fix: export private key (#26)

* docs: add usage for export private key modal

* docs: add how to check if wallet is inApp

* fix: private key not working

* fix: issue with message from iframe not processed

* chore: remove unused impor

---------

Co-authored-by: Angelica Willianto <78342026+angelicawill@users.noreply.github.com>

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
 <script>
 	import { ThirdwebSvelteProvider } from '@holdex/thirdweb-svelte';
@@ -22,7 +26,9 @@ Add the ThirdwebSvelteProvider to your `src/routes/layout.svelte`:
 ```
 
 ### 3. Implement Wallet Connection
+
 Import and use the ConnectWalletModal component in your pages:
+
 ```svelte
 <script>
 	import { ConnectWalletModal } from '@holdex/thirdweb-svelte';
@@ -38,9 +44,39 @@ Import and use the ConnectWalletModal component in your pages:
 />
 ```
 
+### 4. Optional: Integrate Export Private Key Modal
+
+If you would like to allow users who logged in with `inApp` wallet (e.g. Google, Apple, or X) to export their private key, you can use the `ExportPrivateKeyModal` component.
+
+```svelte
+<script>
+	import { ExportPrivateKeyModal } from '@holdex/thirdweb-svelte';
+</script>
+
+<ExportPrivateKeyModal
+	bind:open={/* Boolean to control modal visibility */}
+	onOpenChange={/* Callback function for modal open/close events */}
+/>
+```
+
+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
+<script>
+	import { getThirdwebSvelteContext } from '@holdex/thirdweb-svelte';
+
+	const { wallet } = getThirdwebSvelteContext();
+</script>
+
+{#if wallet.type === 'inApp'}
+	<!-- Show Export Private Key button -->
+{/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

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);
+	});
 </script>
 
 {#if wallet && wallet.id === 'inApp'}