diff --git a/README.md b/README.md index fdea59e..11cb2b8 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,17 @@ ## How to Use ### 1. Installation + Install both the Svelte SDK and the core thirdweb library: + ```bash pnpm i @holdex/thirdweb-svelte thirdweb ``` ### 2. Setup Provider + Add the ThirdwebSvelteProvider to your `src/routes/layout.svelte`: + ```svelte + + +``` + +Note that this modal is only available for inApp wallets. If you would like to check if the user is connected with an inApp wallet, you can check it by using the code below: + +```svelte + + +{#if wallet.type === 'inApp'} + +{/if} +``` + ## Development Guidelines ### Getting Started + 1. Clone the repository 2. Install dependencies: ```bash @@ -53,11 +89,13 @@ Import and use the ConnectWalletModal component in your pages: 4. Visit `http://localhost:5173` to see the test page with working wallet connection functionality ### Repository Structure + - `src/lib/` - Contains all the library's source code - `src/lib/index.ts` - Main entry point for the library - `src/routes/` - Contains the test application code (not included in npm package) ### Building + - To build the package for npm: ```bash pnpm package @@ -68,9 +106,11 @@ Import and use the ConnectWalletModal component in your pages: ``` ### Testing + You can test the library using the app code in `src/routes`. This directory contains a complete Svelte application that serves as a testing environment, making it easy to verify your changes to the SDK code in `src/lib`. ### Testing with Local Projects + To test your local library changes in another project: 1. Build the package: @@ -80,9 +120,9 @@ To test your local library changes in another project: 2. In your consumer project, update the dependency in `package.json`: ```json { - "dependencies": { - "@holdex/thirdweb-svelte": "file:../path/to/your/local/thirdweb-svelte" - } + "dependencies": { + "@holdex/thirdweb-svelte": "file:../path/to/your/local/thirdweb-svelte" + } } ``` 3. Reinstall dependencies in your consumer project: @@ -94,20 +134,23 @@ To test your local library changes in another project: If you encounter issues: -1. **Changes not reflecting:** +1. **Changes not reflecting:** + - Remove `node_modules/.vite` directory - Restart the development server 2. **"exports not defined" error:** + - Add the following to your consumer project's `vite.config.js`: + ```js export default defineConfig({ - resolve: { - preserveSymlinks: true, - } - }) + resolve: { + preserveSymlinks: true + } + }); ``` -3. **Browser compatibility:** +3. **Browser compatibility:** - Use Chrome instead of Brave for development - Brave browser may not properly reflect changes during development diff --git a/src/lib/components/export-private-key-modal/export-private-key-modal-content.svelte b/src/lib/components/export-private-key-modal/export-private-key-modal-content.svelte index 53c1786..55529d5 100644 --- a/src/lib/components/export-private-key-modal/export-private-key-modal-content.svelte +++ b/src/lib/components/export-private-key-modal/export-private-key-modal-content.svelte @@ -5,6 +5,7 @@ import type { ExportPrivateKeyModalProps } from './index.js'; import { Spinner } from '../ui/spinner/index.js'; import { NotSupportedIcon } from '../ui/not-supported-icon/index.js'; + import { onDestroy, onMount } from 'svelte'; export let wallet: Wallet | null; export let theme: ExportPrivateKeyModalProps['theme'] = 'dark'; @@ -13,9 +14,45 @@ let isLoading = true; - const iframeSrc = `https://embedded-wallet.thirdweb.com/sdk/2022-08-12/embedded-wallet/export-private-key?clientId=${ + const baseDomain = 'https://embedded-wallet.thirdweb.com'; + const iframeSrc = `${baseDomain}/sdk/2022-08-12/embedded-wallet/export-private-key?clientId=${ client.clientId }&theme=${theme}`; + + const loginReady = async (e: MessageEvent<{ eventType: string }>) => { + if (typeof e.data === 'object' && 'eventType' in e.data && e.origin === baseDomain) { + if (e.data.eventType === 'exportPrivateKeyIframeLoaded') { + const iframe = document.getElementById(`export-wallet-${wallet?.id}`); + + if (!(iframe instanceof HTMLIFrameElement)) { + return; + } + if (!wallet) { + return; + } + + const AUTH_TOKEN_LOCAL_STORAGE_PREFIX = 'walletToken'; + const authToken = localStorage.getItem( + `${AUTH_TOKEN_LOCAL_STORAGE_PREFIX}-${client.clientId}` + ); + if (iframe?.contentWindow) { + iframe.contentWindow.postMessage( + { + eventType: 'initExportPrivateKey', + authToken + }, + e.origin + ); + } + } + } + }; + onMount(() => { + window.addEventListener('message', loginReady); + }); + onDestroy(() => { + window.removeEventListener('message', loginReady); + }); {#if wallet && wallet.id === 'inApp'}