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

fixed import global but and added some POC interactions with LIT

Browse Source
This commit is contained in:
Samuel Andert 2023-07-19 17:19:45 +02:00
parent 55bb332faa
commit ff2d6489d1
12 changed files with 2459 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -18,6 +18,7 @@
"next": "13.4.9",
"react": "18.2.0",
"react-dom": "18.2.0",
"vite-plugin-global": "^0.0.1",
"wagmi": "^0.12.19"
},
"devDependencies": {

7
pnpm-lock.yaml
View File

@ -28,6 +28,9 @@ dependencies:
react-dom:
specifier: 18.2.0
version: 18.2.0(react@18.2.0)
vite-plugin-global:
specifier: ^0.0.1
version: 0.0.1
wagmi:
specifier: ^0.12.19
version: 0.12.19(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6)
@ -6779,6 +6782,10 @@ packages:
safe-buffer: 5.2.1
dev: false
/vite-plugin-global@0.0.1:
resolution: {integrity: sha512-WcL4fwkIto0yGTzcdmyPCLz7RMDk2tRXh6RupsL9b1beQnrM8eRZ4AhCh1gdF9HLSzB6stBfQ6WoglOpF1lfHA==}
dev: false
/wagmi@0.12.19(ethers@5.7.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6):
resolution: {integrity: sha512-S/el9BDb/HNeQWh1v8TvntMPX/CgKLDAoJqDb8i7jifLfWPqFL7gor3vnI1Vs6ZlB8uh7m+K1Qyg+mKhbITuDQ==}
peerDependencies:

5
svelte/package.json
View File

@ -37,8 +37,11 @@
},
"type": "module",
"dependencies": {
"@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"
}
}
}

2319
svelte/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

4
svelte/src/app.html
View File

@ -6,6 +6,10 @@
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<script>
// Fix `global is not defined` error
global = window
</script>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>

34
svelte/src/lib/LitStatus.svelte Normal file
View File

@ -0,0 +1,34 @@
<!-- src/routes/LitStatus.svelte -->
<script>
import { onMount } from 'svelte';
import Lit from '../lib/lit';
let networkStatus = 'Disconnected';
let isNetworkLoading = true;
// Connect to the LIT network on component mount
onMount(() => {
Lit.connect();
// Define the event handler
const handleLitReady = () => {
networkStatus = 'Connected';
isNetworkLoading = false;
};
// Listen for the lit-ready event
document.addEventListener('lit-ready', handleLitReady, false);
// Cleanup the event listener on component destroy
return () => {
document.removeEventListener('lit-ready', handleLitReady);
};
});
</script>
{#if isNetworkLoading}
<p>Loading...</p>
{:else}
<p>Network Status: {networkStatus}</p>
{/if}

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

@ -0,0 +1,31 @@
<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}

15
svelte/src/lib/lit.js Normal file
View File

@ -0,0 +1,15 @@
// src/lib/lit.js
import * as Lit from "@lit-protocol/lit-node-client";
const client = new Lit.LitNodeClient();
class LitConnector {
litNodeClient;
async connect() {
await client.connect();
this.litNodeClient = client;
}
}
export default new LitConnector();

48
svelte/src/lib/send.svelte Normal file
View File

@ -0,0 +1,48 @@
<script>
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);
let pkpWallet;
// Load wallet on component mount
onMount(async () => {
pkpWallet = new PKPEthersWallet({
controllerAuthSig: authSig,
pkpPubKey:
'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571',
rpc: 'https://rpc.gnosischain.com/'
});
await pkpWallet.init();
console.log(pkpWallet);
});
const sendTransaction = async () => {
console.log('transaction initiated');
const from = '0x06B6BE47c86cfcDF3f77c0e17e7aD8af750782aE';
const to = '0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A';
const value = BigInt(1000000000000000);
// @lit-protocol/pkp-ethers will automatically add missing fields (nonce, chainId, gasPrice, gasLimit)
const transactionRequest = {
from,
to,
value
};
console.log('transaction request created');
const signedTransactionRequest = await pkpWallet.signTransaction(transactionRequest);
await pkpWallet.sendTransaction(signedTransactionRequest);
};
</script>
<div>
<p>Sending transaction...</p>
<button style="margin-top: 2rem; padding: 1rem;" on:click={sendTransaction}>
send 0.001 xdai
</button>
</div>

2
svelte/src/routes/+layout.svelte
View File

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

30
svelte/src/routes/+page.svelte
View File

@ -1,31 +1,5 @@
<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
}
import LitStatus from '$lib/LitStatus.svelte';
</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}
<LitStatus />

2
svelte/svelte.config.js
View File

@ -5,6 +5,6 @@ const config = {
kit: {
adapter: adapter()
},
preprocess: vitePreprocess()
preprocess: vitePreprocess(),
};
export default config;