Merge pull request #13 from phantom/napas/update-sdk-with-more-settings

feat: Add more settings and documentation

.changeset/sweet-houses-cover.md

@@ -0,0 +1,5 @@
+---
+"@phantom/wallet-sdk": patch
+---
+
+Add more settings and documentation to the SDK

package.json

@@ -12,5 +12,8 @@
   "dependencies": {
     "@changesets/cli": "^2.27.8",
     "typescript": "^5.6.2"
+  },
+  "devDependencies": {
+    "prettier": "^3.3.3"
   }
 }

packages/sdk/README.md

@@ -1 +1,33 @@
-@phantom/wallet-sdk
+# @phantom/wallet-sdk
+
+### Integrating the Embedded Wallet: Getting Started
+
+1. Install the Phantom SDK (https://github.com/phantom/wallet-sdk)
+
+```bash
+yarn | npm | pnpm add @phantom/wallet-sdk
+```
+
+1.  Load the embedded wallet and the launcher
+
+```tsx
+import { createPhantom } from "@phantom/wallet-sdk"
+
+const opts: CreatePhantomConfig = {
+    zIndex: 10_000,
+    hideLauncherBeforeOnboarded: true,
+}
+
+const App = () => {
+  useEffect(() => {
+		createPhantom(opts);
+  }, []);
+  ...
+}
+```
+
+### Options
+
+- hideLauncherBeforeOnboarded: Set to true to avoid showing the launcher button until a user has onboarded to the Phantom Wallet.
+- zIndex: Pass a custom zIndex to the Phantom Wallet iframe
+- colorScheme: If the Phantom Wallet iframe has an opaque background on your site. You should set this color scheme to match the color scheme of your site.

packages/sdk/src/index.ts

@@ -1,15 +1,25 @@
 import { SDK_URL } from "./constants.js";
 
-type CreatePhantomConfig = Partial<{
-  zIndex: number
-}>
+export type CreatePhantomConfig = Partial<{
+  zIndex: number;
+  hideLauncherBeforeOnboarded: boolean;
+  colorScheme: string;
+}>;
 
 export function createPhantom(config: CreatePhantomConfig = {}) {
   const container = document.head || document.documentElement;
   const scriptTag = document.createElement("script");
 
   const sdkURL = new URL(SDK_URL);
-  if (config.zIndex) sdkURL.searchParams.append("zIndex", config.zIndex.toString())
+  if (config.zIndex)
+    sdkURL.searchParams.append("zIndex", config.zIndex.toString());
+  if (config.hideLauncherBeforeOnboarded)
+    sdkURL.searchParams.append(
+      "hideLauncherBeforeOnboarded",
+      config.hideLauncherBeforeOnboarded.toString(),
+    );
+  if (config.colorScheme)
+    sdkURL.searchParams.append("colorScheme", config.colorScheme.toString());
 
   scriptTag.setAttribute("type", "module");
   scriptTag.setAttribute("src", SDK_URL);

packages/sdk/tsconfig.json

@@ -8,9 +8,6 @@
     "skipLibCheck": true,
     "declaration": true,
     "outDir": "dist"
-
   },
-  "include": [
-    "src"
-  ]
-}
+  "include": ["src"]
+}

yarn.lock

@@ -308,6 +308,7 @@ __metadata:
   resolution: "@phantom/sdk-monorepo@workspace:."
   dependencies:
     "@changesets/cli": "npm:^2.27.8"
+    prettier: "npm:^3.3.3"
     typescript: "npm:^5.6.2"
   languageName: unknown
   linkType: soft
@@ -803,6 +804,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "prettier@npm:3.3.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10c0/b85828b08e7505716324e4245549b9205c0cacb25342a030ba8885aba2039a115dbcf75a0b7ca3b37bc9d101ee61fab8113fc69ca3359f2a226f1ecc07ad2e26
+  languageName: node
+  linkType: hard
+
 "pseudomap@npm:^1.0.2":
   version: 1.0.2
   resolution: "pseudomap@npm:1.0.2"