From 3194a3a4dca75f9a7a0e32a9e603579fd6a1b482 Mon Sep 17 00:00:00 2001
From: darwintree <17946284+darwintree@users.noreply.github.com>
Date: Tue, 14 May 2024 16:10:32 +0800
Subject: [PATCH] doc: Simple tutorial for pure js demo

---
 examples/VanillaDemo/README.md   | 20 ++++++++++++++++++++
 examples/VanillaDemo/src/main.ts | 22 +++++++++++++++++-----
 2 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 examples/VanillaDemo/README.md

diff --git a/examples/VanillaDemo/README.md b/examples/VanillaDemo/README.md
new file mode 100644
index 0000000..e8c6ccf
--- /dev/null
+++ b/examples/VanillaDemo/README.md
@@ -0,0 +1,20 @@
+# README
+
+This is the example project showing how to use the `use-wallet` library to connect to Fluent wallet with Conflux eSpace as target chain.
+
+You can also switch to other wallets like Metamask or switch to other target chains like Conflux core space by modifying the example code.
+
+## How to start
+
+Making sure [node](https://nodejs.org/en) is installed with version `>= 18.18` or `>= 20`. Then run
+
+```sh
+# install dependencies
+npm install
+# develop and project will start on localhost:5173
+npm run dev
+# or build
+npm build
+# preview built files
+
+```
diff --git a/examples/VanillaDemo/src/main.ts b/examples/VanillaDemo/src/main.ts
index 8480617..119cdf0 100644
--- a/examples/VanillaDemo/src/main.ts
+++ b/examples/VanillaDemo/src/main.ts
@@ -5,8 +5,20 @@ enum TargetChains {
     eSpaceMainnet = '1030',
     eSpaceTestnet = '71',
 }
+const targetChainName = "eSpaceMainnet"
+const typedSignDomainName = "EIP712Domain"
 
-const TargetChain = TargetChains.eSpaceMainnet;
+// uncomment to use Core Space setting
+// import { store, connect, Unit, sendTransaction, typedSign, switchChain } from '@cfxjs/use-wallet-react/conflux/Fluent';
+// enum TargetChains {
+//     coreSpaceMainnet = '1029',
+//     coreSpaceTestnet = '1',
+// }
+// const targetChainName = "coreSpaceMainnet"
+// const typedSignDomainName = "CIP23Domain"
+
+
+const targetChain = TargetChains[targetChainName];
 
 let unsubWallState: ReturnType<(typeof store)['subscribe']> | null = null;
 store.subscribe(
@@ -28,7 +40,7 @@ store.subscribe(
             unsubWallState = store.subscribe(
                 (state) => [state.accounts, state.chainId, state.balance] as const,
                 ([accounts, chainId, balance]) => {
-                    const isChainMatch = chainId === TargetChain;
+                    const isChainMatch = chainId === targetChain;
                     if (isChainMatch) {
                         const account = accounts?.[0];
                         document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
@@ -92,7 +104,7 @@ store.subscribe(
                                     primaryType: 'Mail',
                                     types: {
                                         // This refers to the domain the contract is hosted on.
-                                        EIP712Domain: [
+                                        [typedSignDomainName]: [
                                             { name: 'name', type: 'string' },
                                             { name: 'version', type: 'string' },
                                             { name: 'chainId', type: 'uint256' },
@@ -123,11 +135,11 @@ store.subscribe(
                         });
                     } else {
                         document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-                            <p>Current Chain is not Target Chain -- ${TargetChain === TargetChains.eSpaceMainnet ? 'eSpaceMainnet' : 'eSpaceTestnet'} </p>
+                            <p>Current Chain is not Target Chain -- ${targetChainName} </p>
                             <button id="switch">Switch to Target Chain</button>
                         `;
                         const switchBtn = document.querySelector<HTMLButtonElement>('#switch')!;
-                        switchBtn.addEventListener('click', () => switchChain(`0x${(+TargetChain).toString(16)}`));
+                        switchBtn.addEventListener('click', () => switchChain(`0x${(+targetChain).toString(16)}`));
                     }
                 },
                 {