Merge pull request #10 from PoCInnovation/multichain_dev

add multichain

src/App.vue

@@ -4,7 +4,9 @@
   import ERC from "./components/main/ERC/ERC.vue";
   import { onMounted, ref, onUnmounted } from "vue";
   import passwordPage from "./components/passwordPage.vue";
-  import { useStore } from 'vuex'
+  import chainSwitcher from "./components/chainSwitcher.vue";
+  import { SwitchChain } from "./multichain";
+  import { useStore } from "vuex";
 
   const open = ref(false)
   const store = useStore()
@@ -14,6 +16,8 @@
     if (isOpen === 'true') {
       open.value = true
     }
+    // const store = useStore()
+    // SwitchChain(store)
 
     setInterval(checkOpen, 5000);
 
@@ -45,6 +49,8 @@
 <template>
   <div v-if="open" id="container">
     <header>
+      <div class="logo"><h1>✨Pretty-Metamask✨</h1></div>
+      <chainSwitcher />
     </header>
     <main>
       <VerticalNavbar />
@@ -74,6 +80,13 @@
     color: white;
     width: 100vw;
     border-bottom: 1px solid rgb(3, 3, 3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5vw;
+  }
+  .logo {
+    font-size: 2.4rem;
   }
   main {
     display: flex;

src/alchemy.ts

@@ -1,7 +1,7 @@
 import type { AlchemyConfig } from "alchemy-sdk";
 import { Network, Alchemy, Utils } from "alchemy-sdk";
 import { BigNumber } from 'bignumber.js';
-import { client } from './client'
+import { getBalance } from './getBalance'
 
 interface Config {
   apiKey: string;
@@ -69,7 +69,7 @@ const options = {
 
 export const processAll = async (address_: `0x${string}`, network_: Network) => {
 
-  const balanceTokens: BalanceToken[] = await getBalances(address_, network_);
+  const balanceTokens: BalanceToken[] = await getBalances2(address_, network_);
 
   await updateCoinGeckoTokensValue();
   const map = new Map<string, string>();
@@ -92,9 +92,7 @@ export const processAll = async (address_: `0x${string}`, network_: Network) =>
 }
 
 async function setEth(address_: `0x${string}`, map: Map<string, string>, balanceTokens: BalanceToken[]) {
-  const weiValue = await client.getBalance({ 
-    address: address_,
-  })
+  const weiValue = await getBalance(address_ as string)
 
   map.set('eth', 'ethereum');
 
@@ -110,7 +108,7 @@ async function setEth(address_: `0x${string}`, map: Map<string, string>, balance
   });
 }
 
-async function getBalances(address_: `0x${string}`, network: Network): Promise<BalanceToken[]> {
+async function getBalances2(address_: `0x${string}`, network: Network): Promise<BalanceToken[]> {
   try {
     config.network = network;
     const alchemy = new Alchemy(config as AlchemyConfig);

src/components/chainSwitcher.vue

@@ -0,0 +1,45 @@
+<template>
+    <div id="chain-switcher">
+        <div class="dropdown">
+            <div tabindex="0" role="button" class="btn m-1">chain : {{ chain.name }}</div>
+            <ul tabindex="0" class="dropdown-content menu rounded-box z-[1] w-52 p-2 shadow">
+                <li class="chain" v-for="(c, i) in chainLs" @click="switchChain(i)"><a>{{ c.name }}</a></li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { SwitchChain } from '../multichain'
+import { chain, chainLs } from '../multichain'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+const switchChain = (index: number) => {
+    SwitchChain(store, index)
+    console.log(chain.value.name)
+}
+
+</script>
+
+<style scoped>
+.btn {
+    background-color: #1E6BDE;
+    border: #1E6BDE;
+    color: white;
+    font-size: 1.2rem;
+}
+
+.btn:hover {
+    background-color: #144a9c;
+}
+.chain {
+    cursor: pointer;
+    color: white;
+    font-size: 1rem;
+}
+.dropdown-content {
+    background-color: #1E6BDE;
+}
+</style>

src/components/main/ERC/NFT/NFT.vue

@@ -8,14 +8,15 @@ import { getNFTsForOwner } from '@/getNFTsForOwner';
 
 const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
+const chain = computed(() => store.getters.chain);
 
 const dialogVisible = ref(false);
 const NFTsList = ref([]);
 let importedNFTs = window.localStorage.getItem('ImportedNFTs');
 
 onMounted(async () => {
   if (account.value) {
-    NFTsList.value = await getNFTsForOwner(account.value, "eth-mainnet");
+    NFTsList.value = await getNFTsForOwner(account.value, chain.value.alchemyURLNFT);
   }
 
   if (importedNFTs) {

src/components/main/ERC/token/ButtonBalance.vue

@@ -39,9 +39,10 @@ import { Network } from 'alchemy-sdk';
 export default defineComponent({
   name: 'TokenBalances',
   setup() {
-    const modes: Network[] = [Network.ETH_SEPOLIA, Network.ETH_MAINNET];
-    const currentMode = ref(modes[0]);
     const store = useStore();
+    const myChain = computed(() => store.getters.chain);
+    const modes = [Network.ETH_SEPOLIA, Network.ETH_MAINNET];
+    const currentMode = ref(modes[0]);
 
     const userAddress = ref('');
     const balances = ref<Array<{ name: string; logo: string; balance: string; symbol: string; decimals: number; balanceValue: string | null }>>([]);
@@ -85,6 +86,12 @@ export default defineComponent({
       handleButtonClick();
     });
 
+    watchEffect(() => {
+      if (myChain.value) {
+        handleButtonClick();
+      }
+    });
+
     return {
       modes,
       currentMode,

src/components/main/user-info/UserInfos.vue

@@ -8,19 +8,26 @@ const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
 const balance = ref<number | null>(null);
 const ETH = ref<number | null>(null);
+const myChain = computed(() => store.getters.chain);
 
 ETH.value = await exchangeRates('ETH').then((res: any) => res.data.rates.USD);
 watchEffect(async () => {
   if (account.value) {
     balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
   }
 });
+
+watchEffect(async () => {
+  if (myChain.value) {
+    balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
+  }
+});
 </script>
 
 <template>
   <div id="container">
     <div id="token">
-      <img src="../../../assets/eth_logo.png" alt="ETH" id="eth-logo"/>
+      <img src="/img/eth_logo.png" alt="ETH" id="eth-logo"/>
       <div id="balance">
         <h1 v-if="balance !== null">{{ balance.toFixed(4) }} ETH</h1>
         <p v-if="balance !== null && ETH !== null">${{ (balance.toFixed(4) * ETH).toFixed(2) }} USD</p>

src/components/passwordPage.vue

@@ -17,12 +17,13 @@
 <script setup lang="ts">
 import { ref, defineEmits, onMounted } from 'vue'
 import CryptoJS from 'crypto-js'
-import { useStore} from 'vuex'
+import { useStore } from 'vuex'
 
 const store = useStore()
 const password = ref('')
 const havePassword = ref(false)
 const emit = defineEmits(['isOpen'])
+
 const createPassword = () => {
     const hashedPassword = CryptoJS.SHA256(password.value).toString()
     localStorage.setItem('password', hashedPassword)

src/components/transaction/transaction.vue

@@ -33,18 +33,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
-import { formatEther, getContract } from 'viem';
+import { formatEther, getContract, type PublicClient } from 'viem';
 import ERC20 from '@openzeppelin/contracts/build/contracts/ERC20.json';
 import transactionInfos from './transactionInfos.vue';
+import { x } from '../../main';
+import { fromHex } from 'viem'
+import { defineProps, computed } from 'vue';
 
 const props = defineProps({
   hash: String,
   devise: String,
   from: Boolean
 });
 
+var pubClient: PublicClient;
+
 const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
 const popUp = ref(false);
@@ -103,6 +108,8 @@ const getDateFormated = (timestamp: number) => {
 };
 
 const getInfos = () => {
+  const store = useStore();
+  pubClient = store.getters.pubClient;
   if (account.value) {
     getTransactionInfos(props.hash as `0x${string}`);
   }
@@ -133,37 +140,51 @@ const getErc20Infos = async (transactionInfos: any, transactionReceipt: any, tra
 };
 
 const getTransactionInfos = async (transactionHash: `0x${string}`) => {
-  const transactionInfos = await pubClient.getTransaction({
-    hash: transactionHash
-  });
-  const data = {
-    "id": 1,
-    "jsonrpc": "2.0",
-    "method": "eth_getBlockByHash",
-    "params": [
-      transactionInfos.blockHash,
-      false
-    ]
-  };
-  const transactionReceipt = await pubClient.getTransactionReceipt({
-    hash: transactionHash
-  });
+  var transactionInfos: any;
+  var transactionReceipt: any;
   try {
-    transInfos.value.timestamp = (await x.post('/', data)).data.result.timestamp;
-  } catch (error) {
+    var transactionInfos = (await x.post('/', {
+      "id": 1,
+      "jsonrpc": "2.0",
+      "method": "eth_getTransactionByHash",
+      "params": [
+        transactionHash
+      ]
+    })).data.result;
+    var transactionReceipt = (await x.post('/', {
+      "id": 1,
+      "jsonrpc": "2.0",
+      "method": "eth_getTransactionReceipt",
+      "params": [
+        transactionHash
+      ]
+    })).data.result;
+    transInfos.value.timestamp = (await x.post('/', {
+      "id": 1,
+      "jsonrpc": "2.0",
+      "method": "eth_getBlockByHash",
+      "params": [
+        transactionInfos.blockHash,
+        false
+      ]
+    })).data.result.timestamp;
+  }  catch (error) {
     console.log(error);
+    console.log("transactionInfos: ", transactionInfos);
+    console.log("transactionReceipt: ", transactionReceipt);
+    console.log("transInfos: ", transInfos);
   }
   transInfos.value.hash = transactionInfos.hash;
-  transInfos.value.to = String(transactionInfos.to);
+  transInfos.value.to = transactionInfos.to;
   transInfos.value.from = transactionInfos.from;
   transInfos.value.blockHash = transactionInfos.blockHash;
-  transInfos.value.blockNumber = Number(transactionInfos.blockNumber);
-  transInfos.value.value = formatEther(transactionInfos.value);
-  transInfos.value.status = transactionReceipt.status;
+  transInfos.value.blockNumber = fromHex(transactionInfos.blockNumber, "number");
+  transInfos.value.value = formatEther(fromHex(transactionInfos.value, "bigint"));
+  transInfos.value.status = parseInt(transactionReceipt.status, 16).toString() == "1" ? "success" : "failed";
   transInfos.value.date = getDateFormated(transInfos.value.timestamp);
   transInfos.value.logs.receipt = transactionReceipt;
   transInfos.value.logs.transaction = transactionInfos;
-  if (transInfos.value.devise == undefined)
+  if (!transInfos.value.devise)
     await getErc20Infos(transactionInfos, transactionReceipt, transInfos);
   return transactionInfos;
 };

src/components/transaction/transactionInfos.vue

@@ -23,8 +23,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { pubClient } from '../../main';
 import btn from './btn.vue';
+import { useStore } from 'vuex'
 
 const props = defineProps({
     open: Boolean,
@@ -38,6 +38,7 @@ if (props.data?.logs.receipt.logs.length > 0) {
 }
 
 const isContract = async (address: `0x${string}`) => {
+    const pubClient = useStore().getter.pubClient
     const contract = await pubClient.getBytecode({ address: address })
     return contract != undefined
 }