Added Send 0.01xdai with PKP

2023-07-20 12:50:54 +02:00
parent ff2d6489d1
commit 702c33a373
12 changed files with 473 additions and 167 deletions
--- a/svelte/package.json
+++ b/svelte/package.json
@ -37,11 +37,11 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@lit-protocol/constants": "^2.2.41",
 		"@lit-protocol/lit-node-client": "^2.2.41",
 		"@lit-protocol/pkp-ethers": "^2.2.41",
 		"@lit-protocol/types": "^2.2.41",
 		"@wagmi/core": "^1.3.8",
-		"svelte-wagmi": "^0.3.4",
 		"viem": "^1.3.0"
 	}
 }
--- a/svelte/pnpm-lock.yaml
+++ b/svelte/pnpm-lock.yaml
@ -1,6 +1,9 @@
 lockfileVersion: '6.0'

 dependencies:
+  '@lit-protocol/constants':
+    specifier: ^2.2.41
+    version: 2.2.41
  '@lit-protocol/lit-node-client':
    specifier: ^2.2.41
    version: 2.2.41(@ethersproject/contracts@5.7.0)(@ethersproject/hash@5.7.0)(@ethersproject/providers@5.7.2)(@ethersproject/wallet@5.7.0)(react@18.2.0)
@ -13,9 +16,6 @@ dependencies:
  '@wagmi/core':
    specifier: ^1.3.8
    version: 1.3.8(react@18.2.0)(typescript@5.1.6)(viem@1.3.0)
-  svelte-wagmi:
-    specifier: ^0.3.4
-    version: 0.3.4(@wagmi/core@1.3.8)(react@18.2.0)(svelte@4.0.5)(viem@1.3.0)
  viem:
    specifier: ^1.3.0
    version: 1.3.0(typescript@5.1.6)
@ -101,6 +101,7 @@ packages:
    dependencies:
      '@jridgewell/gen-mapping': 0.3.3
      '@jridgewell/trace-mapping': 0.3.18
+    dev: true

  /@assemblyscript/loader@0.9.4:
    resolution: {integrity: sha512-HazVq9zwTVwGmqdwYzu7WyQ6FQVZ7SwET0KKQuKm55jD0IfUpZgN0OPIiZG3zV1iSrVYcN0bdwLRXI/VNCYsUA==}
@ -897,26 +898,32 @@ packages:
      '@jridgewell/set-array': 1.1.2
      '@jridgewell/sourcemap-codec': 1.4.15
      '@jridgewell/trace-mapping': 0.3.18
+    dev: true

  /@jridgewell/resolve-uri@3.1.0:
    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
    engines: {node: '>=6.0.0'}
+    dev: true

  /@jridgewell/set-array@1.1.2:
    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
    engines: {node: '>=6.0.0'}
+    dev: true

  /@jridgewell/sourcemap-codec@1.4.14:
    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
+    dev: true

  /@jridgewell/sourcemap-codec@1.4.15:
    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true

  /@jridgewell/trace-mapping@0.3.18:
    resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
    dependencies:
      '@jridgewell/resolve-uri': 3.1.0
      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true

  /@json-rpc-tools/provider@1.7.6:
    resolution: {integrity: sha512-z7D3xvJ33UfCGv77n40lbzOYjZKVM3k2+5cV7xS8G6SCvKTzMkhkUYuD/qzQUNT4cG/lv0e9mRToweEEVLVVmA==}
@ -1651,7 +1658,7 @@ packages:
    resolution: {integrity: sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==}
    dependencies:
      '@noble/curves': 1.0.0
-      '@noble/hashes': 1.3.0
+      '@noble/hashes': 1.3.1
      '@scure/base': 1.1.1
    dev: false

@ -1673,7 +1680,7 @@ packages:
  /@scure/bip39@1.2.0:
    resolution: {integrity: sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==}
    dependencies:
-      '@noble/hashes': 1.3.0
+      '@noble/hashes': 1.3.1
      '@scure/base': 1.1.1
    dev: false

@ -1951,6 +1958,7 @@ packages:

  /@types/estree@1.0.1:
    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+    dev: true

  /@types/json-schema@7.0.12:
    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
@ -2785,33 +2793,6 @@ packages:
      - react
    dev: false

-  /@web3modal/core@2.7.0(react@18.2.0):
-    resolution: {integrity: sha512-8P4gNHrUjLBelLiAGCrfxYv4Cgg2+1WBSbdi7yT/8KJzI8t8U2A1eQYz049I2FV6GxJVMXWV1Uy0OAH4zH5XKg==}
-    dependencies:
-      valtio: 1.10.7(react@18.2.0)
-    transitivePeerDependencies:
-      - react
-    dev: false
-
-  /@web3modal/ethereum@2.7.0(@wagmi/core@1.3.8)(viem@1.3.0):
-    resolution: {integrity: sha512-JudpjRjpt5ZGIxmdzG2abi4SDkQqu0HFXa7CtQ2KYjTrXRB4GI+5WDxsjCtl4G8K84Tx23G4YPr0CiX+LdL8gQ==}
-    peerDependencies:
-      '@wagmi/core': '>=1'
-      viem: '>=1'
-    dependencies:
-      '@wagmi/core': 1.3.8(react@18.2.0)(typescript@5.1.6)(viem@1.3.0)
-      viem: 1.3.0(typescript@5.1.6)
-    dev: false
-
-  /@web3modal/html@2.7.0(react@18.2.0):
-    resolution: {integrity: sha512-/tPW4suHHVXDHN/SC4o13hqr+2777ay8o6DZEfaEXeD0Aerc+Y7xo/2vandZc8pAf9v7iD9ShXR+ZjJ8VBNK8w==}
-    dependencies:
-      '@web3modal/core': 2.7.0(react@18.2.0)
-      '@web3modal/ui': 2.7.0(react@18.2.0)
-    transitivePeerDependencies:
-      - react
-    dev: false
-
  /@web3modal/standalone@2.2.1(react@18.2.0):
    resolution: {integrity: sha512-pHPL+UykZtOZhEhNl+l3wWnNvZZdm8cgJgVQVo8yL7m4N9kTyRbDArsQenlIeIm2xi0kFncXBJbe1kaxl8AWTA==}
    deprecated: This package has been deprecated in favor of @walletconnect/modal. Please read more at https://docs.walletconnect.com
@ -2854,17 +2835,6 @@ packages:
      - react
    dev: false

-  /@web3modal/ui@2.7.0(react@18.2.0):
-    resolution: {integrity: sha512-Cn0Ddidcl9vJpV7WQP5chcH91+wtLhf9gy10gsN+CzDz97a6B1JoEZZ3ZuT4NqCrS/fC06pC0E2DvAiG446dRA==}
-    dependencies:
-      '@web3modal/core': 2.7.0(react@18.2.0)
-      lit: 2.7.6
-      motion: 10.16.2
-      qrcode: 1.5.3
-    transitivePeerDependencies:
-      - react
-    dev: false
-
  /JSONStream@1.3.5:
    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
    hasBin: true
@ -2914,6 +2884,7 @@ packages:
    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
    engines: {node: '>=0.4.0'}
    hasBin: true
+    dev: true

  /aes-js@3.0.0:
    resolution: {integrity: sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==}
@ -2990,6 +2961,7 @@ packages:
    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
    dependencies:
      dequal: 2.0.3
+    dev: true

  /array-union@2.1.0:
    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@ -3044,6 +3016,7 @@ packages:
    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
    dependencies:
      dequal: 2.0.3
+    dev: true

  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@ -3294,6 +3267,7 @@ packages:
      acorn: 8.10.0
      estree-walker: 3.0.3
      periscopic: 3.1.0
+    dev: true

  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@ -3361,6 +3335,7 @@ packages:
    dependencies:
      mdn-data: 2.0.30
      source-map-js: 1.0.2
+    dev: true

  /cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@ -3433,6 +3408,7 @@ packages:
  /dequal@2.0.3:
    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
    engines: {node: '>=6'}
+    dev: true

  /detect-browser@5.3.0:
    resolution: {integrity: sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==}
@ -3755,6 +3731,7 @@ packages:
    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
    dependencies:
      '@types/estree': 1.0.1
+    dev: true

  /esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@ -4470,6 +4447,7 @@ packages:
    resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==}
    dependencies:
      '@types/estree': 1.0.1
+    dev: true

  /is-typed-array@1.1.12:
    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
@ -4779,14 +4757,6 @@ packages:
      lit-html: 2.7.5
    dev: false

-  /lit@2.7.6:
-    resolution: {integrity: sha512-1amFHA7t4VaaDe+vdQejSVBklwtH9svGoG6/dZi9JhxtJBBlqY5D1RV7iLUYY0trCqQc4NfhYYZilZiVHt7Hxg==}
-    dependencies:
-      '@lit/reactive-element': 1.6.2
-      lit-element: 3.3.2
-      lit-html: 2.7.5
-    dev: false
-
  /local-pkg@0.4.3:
    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
    engines: {node: '>=14'}
@ -4794,6 +4764,7 @@ packages:

  /locate-character@3.0.0:
    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+    dev: true

  /locate-path@5.0.0:
    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
@ -4856,9 +4827,11 @@ packages:
    engines: {node: '>=12'}
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true

  /mdn-data@2.0.30:
    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: true

  /merge-options@3.0.4:
    resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
@ -5227,6 +5200,7 @@ packages:
      '@types/estree': 1.0.1
      estree-walker: 3.0.3
      is-reference: 3.0.1
+    dev: true

  /picocolors@1.0.0:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@ -5897,6 +5871,7 @@ packages:
  /source-map-js@1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
+    dev: true

  /sparse-array@1.3.2:
    resolution: {integrity: sha512-ZT711fePGn3+kQyLuv1fpd3rNSkNF8vd5Kv2D+qnOANeyKs3fx6bUMGWRPvgTTcYV64QMqZKZwcuaQSP3AZ0tg==}
@ -6135,22 +6110,6 @@ packages:
      typescript: 5.1.6
    dev: true

-  /svelte-wagmi@0.3.4(@wagmi/core@1.3.8)(react@18.2.0)(svelte@4.0.5)(viem@1.3.0):
-    resolution: {integrity: sha512-e7bTOpAZvDbxCY412NgWmPS5jwnAajrS6yZhXVRZWfVZQKBT9NacaCMk8uE5ZhmMiiivnwWqbpHPxxQoyjIE0w==}
-    peerDependencies:
-      '@wagmi/core': ^1.0.8
-      svelte: '>=3 <5'
-      viem: ^1.1.6
-    dependencies:
-      '@wagmi/core': 1.3.8(react@18.2.0)(typescript@5.1.6)(viem@1.3.0)
-      '@web3modal/ethereum': 2.7.0(@wagmi/core@1.3.8)(viem@1.3.0)
-      '@web3modal/html': 2.7.0(react@18.2.0)
-      svelte: 4.0.5
-      viem: 1.3.0(typescript@5.1.6)
-    transitivePeerDependencies:
-      - react
-    dev: false
-
  /svelte@4.0.5:
    resolution: {integrity: sha512-PHKPWP1wiWHBtsE57nCb8xiWB3Ht7/3Kvi3jac0XIxUM2rep8alO7YoAtgWeGD7++tFy46krilOrPW0mG3Dx+A==}
    engines: {node: '>=16'}
@ -6168,6 +6127,7 @@ packages:
      locate-character: 3.0.0
      magic-string: 0.30.1
      periscopic: 3.1.0
+    dev: true

  /symbol-observable@2.0.3:
    resolution: {integrity: sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA==}
@ -6462,20 +6422,6 @@ packages:
      use-sync-external-store: 1.2.0(react@18.2.0)
    dev: false

-  /valtio@1.10.7(react@18.2.0):
-    resolution: {integrity: sha512-XUwXJ9twXqwfVhXlcbYlCcRUUSOmp8RcJODVAxPrUZc2jh3com13B49MOL/cbgcTOX+5yf7wdMqbFGR7ba2sPg==}
-    engines: {node: '>=12.20.0'}
-    peerDependencies:
-      react: '>=16.8'
-    peerDependenciesMeta:
-      react:
-        optional: true
-    dependencies:
-      proxy-compare: 2.5.1
-      react: 18.2.0
-      use-sync-external-store: 1.2.0(react@18.2.0)
-    dev: false
-
  /varint@6.0.0:
    resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
    dev: false
--- a/svelte/src/lib/AuthSig.svelte
+++ b/svelte/src/lib/AuthSig.svelte
@ -0,0 +1,56 @@
+<script>
+	import { onMount } from 'svelte';
+	import { checkAndSignAuthMessage } from '@lit-protocol/lit-node-client';
+	import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
+
+	let authSig = null;
+	let error = null;
+
+	async function generateAuthSig() {
+		authSig = null;
+		error = null;
+		try {
+			authSig = await checkAndSignAuthMessage({
+				chain: 'xdai'
+			});
+		} catch (err) {
+			console.error(err);
+			error = `Failed to sign auth message: ${err.message}`;
+		}
+	}
+	onMount(() => {
+		const storedAuthSig = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
+		if (storedAuthSig) {
+			authSig = JSON.parse(storedAuthSig);
+		}
+	});
+</script>
+
+<!-- AuthSig Address Displayed -->
+{#if authSig}
+	<div class="bg-gray-100 p-4 rounded-lg shadow-md mb-4 flex items-center">
+		<p class="text-gray-700 font-medium">
+			AuthSig Address: <span class="text-orange-500">{authSig.address}</span>
+		</p>
+	</div>
+	<!-- Error Message -->
+{:else if error}
+	<div class="bg-red-100 p-4 rounded-lg shadow-md mb-4 flex items-center">
+		<p class="text-red-700 font-medium">{error}</p>
+	</div>
+	<!-- Login Button -->
+{:else}
+	<div class="flex justify-center">
+		<button
+			class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-lg shadow-lg flex items-center m-2"
+			on:click={generateAuthSig}
+		>
+			<img
+				src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
+				alt="MetaMask"
+				class="w-6 h-6 mr-2"
+			/>
+			<span class="text-lg">Login</span>
+		</button>
+	</div>
+{/if}
--- a/svelte/src/lib/LitStatus.svelte
+++ b/svelte/src/lib/LitStatus.svelte
@ -27,8 +27,14 @@
 	});
 </script>

-{#if isNetworkLoading}
-	<p>Loading...</p>
-{:else}
-	<p>Network Status: {networkStatus}</p>
-{/if}
+<div class="bg-gray-100 p-4 rounded-lg shadow-md mb-4">
+	{#if isNetworkLoading}
+		<p class="text-gray-700 font-medium">
+			LIT Network Status: <span class="text-blue-500">Loading ...</span>
+		</p>
+	{:else}
+		<p class="text-gray-700 font-medium">
+			LIT Network Status: <span class="text-green-600">{networkStatus}</span>
+		</p>
+	{/if}
+</div>
--- a/svelte/src/lib/connect.svelte
+++ b/svelte/src/lib/connect.svelte
@ -1,31 +0,0 @@
-<script>
-	import { web3Modal, connected, chainId, signerAddress } from 'svelte-wagmi';
-	import { fetchBalance } from '@wagmi/core';
-
-	let userBalance = '0'; // simple reactive variable for the balance
-
-	// Automatically fetch balance when connected
-	$: if ($connected) {
-		showBalance();
-	}
-
-	async function showBalance() {
-		const balance = await fetchBalance({
-			address: $signerAddress // Using connected address dynamically
-		});
-		userBalance = balance.formatted; // Directly update the reactive variable
-	}
-</script>
-
-{#if $connected}
-	<div>
-		<p>Connected to Ethereum</p>
-		<p>Chain ID: {$chainId}</p>
-		<p>Signer address: {$signerAddress}</p>
-		<p>Balance: {userBalance} ETH</p>
-	</div>
-{:else if $web3Modal}
-	<button on:click={() => $web3Modal.openModal()}> Connect to Ethereum </button>
-{:else}
-	<p>Web3Modal not yet available</p>
-{/if}
--- a/svelte/src/lib/provider.svelte
+++ b/svelte/src/lib/provider.svelte
@ -1,17 +0,0 @@
-<script>
-	import { configureWagmi } from 'svelte-wagmi';
-	import { onMount } from 'svelte';
-
-	const WALLETCONNECT_PROJECT_ID = import.meta.env.VITE_WALLETCONECT_PROJECT_ID;
-	const ALCHEMY_KEY = import.meta.env.VITE_ALCHEMY_KEY;
-
-	onMount(() => {
-		// Configuration for Wagmi.
-		configureWagmi({
-			walletconnect: true,
-			walletconnectProjectID: WALLETCONNECT_PROJECT_ID,
-			alchemyKey: ALCHEMY_KEY,
-			autoConnect: true
-		});
-	});
-</script>
--- a/svelte/src/lib/send.svelte
+++ b/svelte/src/lib/send.svelte
@ -2,47 +2,66 @@
 	import { onMount } from 'svelte';

 	import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
-
-	// Access the environment variable
-	const authSig = JSON.parse(import.meta.env.VITE_AUTH_SIG);
+	import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';

 	let pkpWallet;
+	let authSig = null;

 	// Load wallet on component mount
 	onMount(async () => {
-		pkpWallet = new PKPEthersWallet({
-			controllerAuthSig: authSig,
-			pkpPubKey:
-				'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571',
-			rpc: 'https://rpc.gnosischain.com/'
-		});
+		const storedAuthSig = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);

-		await pkpWallet.init();
-		console.log(pkpWallet);
+		if (storedAuthSig) {
+			authSig = JSON.parse(storedAuthSig);
+			pkpWallet = new PKPEthersWallet({
+				controllerAuthSig: authSig,
+				pkpPubKey:
+					'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571',
+				rpc: 'https://rpc.gnosischain.com/'
+			});
+			await pkpWallet.init();
+			console.log(pkpWallet);
+		} else {
+			alert('no authsig');
+		}
 	});

 	const sendTransaction = async () => {
-		console.log('transaction initiated');
-		const from = '0x06B6BE47c86cfcDF3f77c0e17e7aD8af750782aE';
-		const to = '0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A';
-		const value = BigInt(1000000000000000);
+		if (!authSig) {
+			alert('no authsig');
+		} else {
+			console.log('transaction initiated');
+			const from = pkpWallet.address;
+			const to = '0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A';
+			const value = BigInt(10000000000000000);
+			const gasLimit = 21000;

-		// @lit-protocol/pkp-ethers will automatically add missing fields (nonce, chainId, gasPrice, gasLimit)
-		const transactionRequest = {
-			from,
-			to,
-			value
-		};
-		console.log('transaction request created');
+			// @lit-protocol/pkp-ethers will automatically add missing fields (nonce, chainId, gasPrice, gasLimit)
+			const transactionRequest = {
+				from,
+				to,
+				value,
+				gasLimit
+			};
+			console.log('transaction request created');

-		const signedTransactionRequest = await pkpWallet.signTransaction(transactionRequest);
-		await pkpWallet.sendTransaction(signedTransactionRequest);
+			const signedTransactionRequest = await pkpWallet.signTransaction(transactionRequest);
+			await pkpWallet.sendTransaction(signedTransactionRequest);
+			console.log('transaction sent');
+		}
 	};
 </script>

-<div>
-	<p>Sending transaction...</p>
-	<button style="margin-top: 2rem; padding: 1rem;" on:click={sendTransaction}>
-		send 0.001 xdai
+<div class="p-4 bg-gray-200 flex justify-center items-center flex-col">
+	{#if pkpWallet}
+		<div class="mb-4 text-lg font-medium">
+			PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>
+		</div>
+	{/if}
+	<button
+		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg focus:outline-none focus:shadow-outline-blue active:bg-blue-800 transition duration-150 ease-in-out"
+		on:click={sendTransaction}
+	>
+		send 0.01 xdai
 	</button>
 </div>
--- a/svelte/src/routes/+layout.svelte
+++ b/svelte/src/routes/+layout.svelte
@ -1,7 +1,5 @@
 <script>
 	import '../app.css';
-	import Provider from '$lib/provider.svelte';
 </script>

-<Provider />
 <slot />
--- a/svelte/src/routes/+page.svelte
+++ b/svelte/src/routes/+page.svelte
@ -1,5 +1,9 @@
 <script>
 	import LitStatus from '$lib/LitStatus.svelte';
+	import AuthSign from '$lib/AuthSig.svelte';
+	import Send from '$lib/Send.svelte';
 </script>

 <LitStatus />
+<AuthSign />
+<Send />