diff --git a/.changeset/sweet-houses-cover.md b/.changeset/sweet-houses-cover.md new file mode 100644 index 0000000..615333e --- /dev/null +++ b/.changeset/sweet-houses-cover.md @@ -0,0 +1,5 @@ +--- +"@phantom/wallet-sdk": patch +--- + +Add more settings and documentation to the SDK diff --git a/package.json b/package.json index 1dfd231..c6dc1df 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,8 @@ "dependencies": { "@changesets/cli": "^2.27.8", "typescript": "^5.6.2" + }, + "devDependencies": { + "prettier": "^3.3.3" } } diff --git a/packages/sdk/README.md b/packages/sdk/README.md index 5b247c1..783468f 100644 --- a/packages/sdk/README.md +++ b/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. diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts index 5b41f38..5d2fa28 100644 --- a/packages/sdk/src/index.ts +++ b/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); diff --git a/packages/sdk/tsconfig.json b/packages/sdk/tsconfig.json index 0a3edf0..f586d00 100644 --- a/packages/sdk/tsconfig.json +++ b/packages/sdk/tsconfig.json @@ -8,9 +8,6 @@ "skipLibCheck": true, "declaration": true, "outDir": "dist" - }, - "include": [ - "src" - ] -} \ No newline at end of file + "include": ["src"] +} diff --git a/yarn.lock b/yarn.lock index e9cd694..653f3c2 100644 --- a/yarn.lock +++ b/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"