samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring and cleanup of Send.Svelte

Browse Source
This commit is contained in:
Samuel Andert 2023-07-20 17:07:03 +02:00
parent db5ae4f998
commit 07a61a4d3a
6 changed files with 113 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/Balance.svelte Normal file
View File

@ -0,0 +1,15 @@
<script>
import { fetchBalance } from '@wagmi/core';
import { onMount } from 'svelte';
export let balance;
onMount(async () => {
const getBalance = await fetchBalance({
address: '0x06B6BE47c86cfcDF3f77c0e17e7aD8af750782aE'
});
balance = getBalance.formatted;
});
</script>
<span>{balance}</span>

30
src/lib/Provider.svelte Normal file
View File

@ -0,0 +1,30 @@
<script>
import { configureChains, createConfig } from '@wagmi/core';
import { gnosis } from '@wagmi/core/chains';
import { publicProvider } from '@wagmi/core/providers/public';
import { InjectedConnector } from '@wagmi/core/connectors/injected';
import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
import { onMount } from 'svelte';
const { chains, publicClient } = configureChains(
[gnosis],
[
jsonRpcProvider({
rpc: () => ({
http: `https://rpc.gnosischain.com/`,
wss: `wss://rpc.gnosischain.com/wss`
})
}),
publicProvider()
]
);
onMount(() => {
createConfig({
autoConnect: true,
connectors: [new InjectedConnector({ chains })],
publicClient
});
});
</script>

83
src/lib/Send.svelte
View File

@ -1,67 +1,34 @@
<script>
import { onMount } from 'svelte';
import { waitForTransaction } from '@wagmi/core';
import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
let pkpWallet;
let authSig = null;
// Load wallet on component mount
onMount(async () => {
const storedAuthSig = await localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
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 parsed from local storage');
}
});
export let pkpWallet;
const sendTransaction = async () => {
if (!authSig) {
alert('authsig not ready in send transaction');
} else {
console.log('transaction initiated');
const from = pkpWallet.address;
const to = '0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A';
const value = BigInt(10000000000000000);
const gasLimit = 21000;
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,
gasLimit
};
console.log('transaction request created');
const tx = {
from,
to,
value,
gasLimit
};
console.log('transaction created: ' + tx);
const signedTransactionRequest = await pkpWallet.signTransaction(transactionRequest);
await pkpWallet.sendTransaction(signedTransactionRequest);
console.log('transaction sent');
}
const signedTx = await pkpWallet.signTransaction(tx);
console.log('transaction signed: ' + signedTx);
await pkpWallet.sendTransaction(signedTx);
console.log('transaction sent');
};
</script>
<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>
<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>

31
src/lib/Wallet.svelte Normal file
View File

@ -0,0 +1,31 @@
<script>
import { onMount } from 'svelte';
import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
export let pkpWallet;
export let authSig = null;
onMount(async () => {
const storedAuthSig = await localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
if (storedAuthSig) {
authSig = JSON.parse(storedAuthSig);
pkpWallet = new PKPEthersWallet({
controllerAuthSig: authSig,
pkpPubKey:
'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571',
rpc: 'https://rpc.gnosischain.com/'
});
await pkpWallet.init();
} else {
alert('no authsig parsed from local storage');
}
});
</script>
{#if pkpWallet}
<div class="mb-4 text-lg font-medium">
PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>
</div>
{/if}

2
src/routes/+layout.svelte
View File

@ -1,5 +1,7 @@
<script>
import '../app.css';
import Provider from '$lib/Provider.svelte';
</script>
<Provider />
<slot />

11
src/routes/+page.svelte
View File

@ -1,9 +1,18 @@
<script>
import LitStatus from '$lib/LitStatus.svelte';
import AuthSign from '$lib/AuthSig.svelte';
import Wallet from '$lib/Wallet.svelte';
import Send from '$lib/Send.svelte';
import Balance from '$lib/Balance.svelte';
let pkpWallet;
let authSig;
</script>
<LitStatus />
<AuthSign />
<Send />
<div class="p-4 bg-gray-200 flex justify-center items-center flex-col">
<Wallet bind:pkpWallet bind:authSig />
<Send bind:pkpWallet />
<Balance />
</div>