feat: improve wallets system and add a first version of SelectWalletD…

…ropdown component
LilaRest · Sep 2, 2022 · 3b02971 · 3b02971
1 parent 3d0164e
commit 3b02971
Show file tree

Hide file tree

Showing 41 changed files with 359 additions and 286 deletions.
diff --git a/demo/frontend/src/App.vue b/demo/frontend/src/App.vue
@@ -2,7 +2,7 @@
 import { ConnectWalletButton,
          SelectNetworkDropdown,
          ContractInteractor,
-         AvailableWallets,
+         SelectWalletDropdown,
          dapp,
          DebugBar } from "../../../src/index.js";
 import { computed, ref } from "vue";
@@ -32,7 +32,7 @@ dapp.contracts.Lock.onReadSafe(function (cpt) {
             <OnProviderSafe>
                 <template #safe>
                     <ConnectWalletButton/>
-                    <AvailableWallets/>
+                    <SelectWalletDropdown/>
                     <SelectNetworkDropdown/>
                     <button @click="toggleOtherComponentDisplay">Toggle OtherComponent</button>
 

diff --git a/demo/frontend/tulipe.config.js b/demo/frontend/tulipe.config.js
@@ -1,41 +1,39 @@
 export const tulipeConfig = {
   networks: [
     {
-      chainId: 31337,
+      id: 31337,
       contracts: {
         "Lock": await import("../backend/deployments/localhost/Lock.json"),
       },
       default: true,
       pollingInterval: 4000,
     },
-    {chainId: 1},
-    {chainId: 3},
-    {chainId: 4},
-    {chainId: 5},
-    {chainId: 10},
-    {chainId: 25},
-    {chainId: 40},
-    {chainId: 56},
-    {chainId: 100},
-    {chainId: 122},
-    {chainId: 128},
-    {chainId: 137},
-    {chainId: 250},
-    {chainId: 1088},
-    {chainId: 1284},
-    {chainId: 1285},
-    {chainId: 8217},
-    {chainId: 42161},
-    // {chainId: 42220},
-    // {chainId: 42262},
-    // {chainId: 43114},
-    // {chainId: 1313161554},
-    // {chainId: 1666600000},
+    {id: 1},
+    {id: 3},
+    {id: 4},
+    {id: 5},
+    {id: 10},
+    {id: 25},
+    {id: 40},
+    {id: 56},
+    {id: 100},
+    {id: 122},
+    {id: 128},
+    {id: 137},
+    {id: 250},
+    {id: 1088},
+    {id: 1284},
+    {id: 1285},
+    {id: 8217},
+    {id: 42161},
+    // {id: 42220},
+    // {id: 42262},
+    // {id: 43114},
+    // {id: 1313161554},
+    // {id: 1666600000},
   ],
   wallets: [
-    {name: "metamask"},
-    {name: "binanceChain"}
+    {id: "metamask"},
+    {id: "binanceChain"}
   ]
 }
-
-
diff --git a/dist/tulipe.es.js b/dist/tulipe.es.js
@@ -433,21 +433,21 @@ const q = (r, t) => {
       t.value = await a.config.networks.getCurrent(), e.value = a.config.networks.getAvailable(), e.value = e.value.filter((h) => h != t.value);
     });
     async function s(h) {
-      const d = e.value.find((f) => f.chainId === parseInt(h));
+      const d = e.value.find((f) => f.id === parseInt(h));
       if (d) {
         h = x.utils.hexlify(parseInt(h)).toString(), h = x.utils.hexValue(h);
         try {
           await window.ethereum.request({
             method: "wallet_switchEthereumChain",
             params: [{
-              chainId: h
+              id: h
             }]
           });
         } catch (f) {
           f.code === 4902 && await window.ethereum.request({
             method: "wallet_addEthereumChain",
             params: [{
-              chainId: h,
+              id: h,
               rpcUrls: [d.defaultRPC],
               chainName: d.name,
               nativeCurrency: {
@@ -480,8 +480,8 @@ const q = (r, t) => {
                 o("p", null, p(t.value.displayName), 1)
               ])) : O("", !0),
               i.value ? (c(!0), u(v, { key: 1 }, S(e.value, (m) => (c(), u("li", {
-                key: m.chainId,
-                onClick: (B) => s(m.chainId)
+                key: m.id,
+                onClick: (B) => s(m.id)
               }, [
                 o("img", {
                   width: "40",
@@ -721,7 +721,7 @@ const k = {
     {
       name: "Ethereum Mainnet",
       displayName: "Ethereum",
-      chainId: 1,
+      id: 1,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/ethereum.svg",
       currency: {
@@ -740,7 +740,7 @@ const k = {
     {
       name: "Ropsten",
       displayName: "Ropsten (Ethereum Testnet)",
-      chainId: 3,
+      id: 3,
       type: "testnet",
       icon: null,
       currency: {
@@ -759,7 +759,7 @@ const k = {
     {
       name: "Rinkeby",
       displayName: "Rinkeby (Ethereum Testnet)",
-      chainId: 4,
+      id: 4,
       type: "testnet",
       icon: null,
       currency: {
@@ -778,7 +778,7 @@ const k = {
     {
       name: "G\xF6rli",
       displayName: "G\xF6rli (Ethereum Testnet)",
-      chainId: 5,
+      id: 5,
       type: "testnet",
       icon: null,
       currency: {
@@ -796,7 +796,7 @@ const k = {
     },
     {
       name: "Optimism",
-      chainId: 10,
+      id: 10,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/optimism.svg",
       currency: {
@@ -815,7 +815,7 @@ const k = {
     {
       name: "Cronos Mainnet Beta",
       displayName: "Cronos",
-      chainId: 25,
+      id: 25,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/cronos.svg",
       currency: {
@@ -834,7 +834,7 @@ const k = {
     {
       name: "Telos EVM Mainnet",
       displayName: "Telos",
-      chainId: 40,
+      id: 40,
       type: "mainnet",
       icon: null,
       currency: {
@@ -853,7 +853,7 @@ const k = {
     {
       name: "Binance Smart Chain Mainnet",
       displayName: "BSC",
-      chainId: 56,
+      id: 56,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/bsc.svg",
       currency: {
@@ -872,7 +872,7 @@ const k = {
     {
       name: "Gnosis Chain",
       displayName: "Gnosis",
-      chainId: 100,
+      id: 100,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/gnosis.svg",
       currency: {
@@ -891,7 +891,7 @@ const k = {
     {
       name: "Fuse Mainnet",
       displayName: "Fuse",
-      chainId: 122,
+      id: 122,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/fuse.svg",
       currency: {
@@ -910,7 +910,7 @@ const k = {
     {
       name: "Huobi ECO Chain Mainnet",
       displayName: "HECO",
-      chainId: 128,
+      id: 128,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/heco.svg",
       currency: {
@@ -929,7 +929,7 @@ const k = {
     {
       name: "Polygon Mainnet",
       displayName: "Polygon",
-      chainId: 137,
+      id: 137,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/polygon.svg",
       currency: {
@@ -948,7 +948,7 @@ const k = {
     {
       name: "Fantom Opera",
       displayName: "Fantom",
-      chainId: 250,
+      id: 250,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/fantom.svg",
       currency: {
@@ -967,7 +967,7 @@ const k = {
     {
       name: "Metis Andromeda Mainnet",
       displayName: "Metis",
-      chainId: 1088,
+      id: 1088,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/metis.svg",
       currency: {
@@ -985,7 +985,7 @@ const k = {
     },
     {
       name: "Moonbeam",
-      chainId: 1284,
+      id: 1284,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/moonbeam.svg",
       currency: {
@@ -1003,7 +1003,7 @@ const k = {
     },
     {
       name: "Moonriver",
-      chainId: 1285,
+      id: 1285,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/moonriver.svg",
       currency: {
@@ -1022,7 +1022,7 @@ const k = {
     {
       name: "Klaytn Mainnet Cypress",
       displayName: "Klaytn",
-      chainId: 8217,
+      id: 8217,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/klaytn.svg",
       currency: {
@@ -1041,7 +1041,7 @@ const k = {
     {
       name: "Hardhat",
       displayName: "Hardhat",
-      chainId: 31337,
+      id: 31337,
       type: "testnet",
       icon: null,
       currency: {
@@ -1056,7 +1056,7 @@ const k = {
     {
       name: "Arbitrum One",
       displayName: "Arbitrum",
-      chainId: 42161,
+      id: 42161,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/arbitrum.svg",
       currency: {
@@ -1075,7 +1075,7 @@ const k = {
     {
       name: "Celo Mainnet",
       displayName: "Celo",
-      chainId: 42220,
+      id: 42220,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/celo.svg",
       currency: {
@@ -1094,7 +1094,7 @@ const k = {
     {
       name: "Emerald Paratime Mainnet",
       displayName: "Emerald",
-      chainId: 42262,
+      id: 42262,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/emerald.svg",
       currency: {
@@ -1113,7 +1113,7 @@ const k = {
     {
       name: "Avalanche C-Chain",
       displayName: "Avalanche",
-      chainId: 43114,
+      id: 43114,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/avalanche.svg",
       currency: {
@@ -1132,7 +1132,7 @@ const k = {
     {
       name: "Aurora Mainnet",
       displayName: "Aurora",
-      chainId: 1313161554,
+      id: 1313161554,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/aurora.svg",
       currency: {
@@ -1151,7 +1151,7 @@ const k = {
     {
       name: "Harmony Mainnet Shard 0",
       displayName: "Harmony",
-      chainId: 16666e5,
+      id: 16666e5,
       type: "mainnet",
       icon: "https://static.tuli.pe/icons/networks/harmony.svg",
       currency: {
@@ -1209,18 +1209,18 @@ class ae {
   constructor(t = null) {
     if (this._list = [], t) {
       for (const e of t)
-        if (e.chainId) {
-          const s = k.networks.find((i) => i.chainId === e.chainId), n = D({ ...s }, { ...e });
+        if (e.id) {
+          const s = k.networks.find((i) => i.id === e.id), n = D({ ...s }, { ...e });
           n.available !== !1 && (n.available = !0), n.displayName || (n.displayName = n.name), this._list.push(n);
         }
     }
     for (const e of k.networks)
-      this._list.find((n) => n.chainId === e.chainId) || (e.available = !1, this._list.push(e));
+      this._list.find((n) => n.id === e.id) || (e.available = !1, this._list.push(e));
   }
   async getCurrent() {
     if (a.provider.proxy.getEthersObject()) {
-      const t = await a.provider.getNetwork().then((e) => e.chainId);
-      return this._list.find((e) => e.chainId === t);
+      const t = await a.provider.getNetwork().then((e) => e.id);
+      return this._list.find((e) => e.id === t);
     }
     return null;
   }
@@ -1500,14 +1500,14 @@ class fe extends A {
       this.status.set("DISCONNECTED");
     else {
       const t = await this.getNetwork();
-      let e = await a.config.networks.getAvailable().find((s) => s.chainId === t.chainId);
+      let e = await a.config.networks.getAvailable().find((s) => s.id === t.id);
       if (e)
         this.status.set("CONNECTED");
-      else if (this.status.set("WRONG"), e = a.config.networks.getAll().find((s) => s.chainId === t.chainId), !e) {
+      else if (this.status.set("WRONG"), e = a.config.networks.getAll().find((s) => s.id === t.id), !e) {
         const s = {
           name: t.name,
           displayName: nt(t.name),
-          chainId: t.chainId
+          id: t.id
         };
         a.config.network.append(s);
       }

diff --git a/dist/tulipe.min.js b/dist/tulipe.min.js
diff --git a/dist/tulipe.umd.js b/dist/tulipe.umd.js
diff --git a/docs/.vitepress/dist/assets/app.906b7b89.js b/docs/.vitepress/dist/assets/app.906b7b89.js