From 52ea69c2456eed23eb0755a7d4780c161b8dfe02 Mon Sep 17 00:00:00 2001
From: hoangdv2429 <hoangdv2429@gmail.com>
Date: Sat, 30 Dec 2023 15:45:31 +0700
Subject: [PATCH 01/10] add helper for progress bar

---
 hooks/cosmwasm.tsx | 75 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 63 insertions(+), 12 deletions(-)

diff --git a/hooks/cosmwasm.tsx b/hooks/cosmwasm.tsx
index 7b769ec..5b04645 100644
--- a/hooks/cosmwasm.tsx
+++ b/hooks/cosmwasm.tsx
@@ -1,17 +1,15 @@
 import { useCallback, useState } from "react";
-import {
-  SigningCosmWasmClient,
-  setupWasmExtension,
-} from "@cosmjs/cosmwasm-stargate";
+import { setupWasmExtension } from "@cosmjs/cosmwasm-stargate";
+import { setupBankExtension } from "@cosmjs/stargate";
 import { toBase64, fromBase64, toUtf8, fromUtf8 } from "@cosmjs/encoding";
-import { HttpBatchClient, Tendermint34Client, Tendermint37Client } from "@cosmjs/tendermint-rpc";
-import { QueryClient } from "@cosmjs/stargate";
-import { 
-  getChainConfig,
-} from "../services/chainConfig";
 import {
-  ChainType
-} from "../pages/api/check";
+  HttpBatchClient,
+  Tendermint34Client,
+  Tendermint37Client,
+} from "@cosmjs/tendermint-rpc";
+import { QueryClient } from "@cosmjs/stargate";
+import { getChainConfig } from "../services/chainConfig";
+import { ChainType } from "../pages/api/check";
 
 export const getBatchClient = async (chain: ChainType) => {
   const thisChain = getChainConfig(chain);
@@ -21,7 +19,17 @@ export const getBatchClient = async (chain: ChainType) => {
   const tmint = await Tendermint37Client.create(httpBatch);
   const queryClient = QueryClient.withExtensions(tmint, setupWasmExtension);
   return queryClient;
-}
+};
+
+const getBankClient = async (chain: ChainType) => {
+  const thisChain = getChainConfig(chain);
+  const endpoints = [thisChain.rpc];
+  const endpoint = endpoints[Math.floor(Math.random() * endpoints.length)];
+  const httpBatch = new HttpBatchClient(endpoint);
+  const tmint = await Tendermint37Client.create(httpBatch);
+  const queryClient = QueryClient.withExtensions(tmint, setupBankExtension);
+  return queryClient;
+};
 
 export function toBinary(obj: any): string {
   return toBase64(toUtf8(JSON.stringify(obj)));
@@ -30,3 +38,46 @@ export function toBinary(obj: any): string {
 export function fromBinary(base64: string): any {
   return JSON.parse(fromUtf8(fromBase64(base64)));
 }
+
+async function queryContractBalance(
+  chain: ChainType,
+  contractAddress: string
+): Promise<number> {
+  // get client with bank extension
+  const batchClient = await getBankClient(chain);
+
+  // Query contract's total NOIS token balances
+
+  const balances = await batchClient.bank.allBalances(contractAddress);
+
+  // Find the NOIS token balance, handling both native and IBC denoms
+  // Assuming the contract has only NOIS tokens (also be in the form of ibc denom)
+  const noisTokenIdentifier = "unois";
+  const noisBalance = balances.find(
+    (balance) =>
+      balance.denom === noisTokenIdentifier || balance.denom.includes("ibc")
+  );
+  return noisBalance ? parseInt(noisBalance.amount) : 0;
+}
+
+export async function calculatePercentage(
+  chain: ChainType,
+  contractAddress: string
+): Promise<number> {
+  // Total amount to be distributed per chain (in unois)
+  const totalDistribution = {
+    osmosis: 4_000_000_000_000,
+    injective: 4_100_000_000_000,
+    juno: 2_600_000_000_000,
+    stargaze: 1_200_000_000_000,
+    aura: 100_000_000_000,
+  };
+
+  const balance = await queryContractBalance(chain, contractAddress);
+
+  // Calculate the percentage of NOIS tokens left
+  const totalForChain = totalDistribution[chain];
+  const percentageLeft = (balance / totalForChain) * 100;
+
+  return percentageLeft;
+}

From 575554e619733a6d52856f7740a750086eb2f712 Mon Sep 17 00:00:00 2001
From: hoangdv2429 <hoangdv2429@gmail.com>
Date: Wed, 3 Jan 2024 16:39:46 +0700
Subject: [PATCH 02/10] multiple ibc denom

---
 hooks/cosmwasm.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/hooks/cosmwasm.tsx b/hooks/cosmwasm.tsx
index 5b04645..c6eb5a2 100644
--- a/hooks/cosmwasm.tsx
+++ b/hooks/cosmwasm.tsx
@@ -47,16 +47,25 @@ async function queryContractBalance(
   const batchClient = await getBankClient(chain);
 
   // Query contract's total NOIS token balances
-
   const balances = await batchClient.bank.allBalances(contractAddress);
 
+  // Mapping of known IBC denoms to their chains
+  const ibcDenoms = {
+    'stargaze-1': 'ibc/0F181D9F5BB18A8496153C1666E934169515592C135E8E9FCCC355889858EAF9',
+    'juno-1': 'ibc/1D9E14A1F00613ED39E4B8A8763A20C9BE5B5EA0198F2FE47EAE43CD91A0137B',
+    'injective-1': 'ibc/DD9182E8E2B13C89D6B4707C7B43E8DB6193F9FF486AFA0E6CF86B427B0D231A',
+    'aura': 'ibc/1FD48481DAA1B05575FE6D3E35929264437B8424A73243B207BCB67401C7F1FD',
+    'osmosis': 'ibc/6928AFA9EA721938FED13B051F9DBF1272B16393D20C49EA5E4901BB76D94A90'
+  };
+
   // Find the NOIS token balance, handling both native and IBC denoms
-  // Assuming the contract has only NOIS tokens (also be in the form of ibc denom)
   const noisTokenIdentifier = "unois";
-  const noisBalance = balances.find(
-    (balance) =>
-      balance.denom === noisTokenIdentifier || balance.denom.includes("ibc")
-  );
+  const noisBalance = balances.find((balance) => {
+    return (
+      balance.denom === noisTokenIdentifier ||
+      Object.values(ibcDenoms).includes(balance.denom)
+    )});
+
   return noisBalance ? parseInt(noisBalance.amount) : 0;
 }
 

From 3e95557e8367b97ba18e5e60265ac82a89a747b9 Mon Sep 17 00:00:00 2001
From: hoangdv2429 <hoangdv2429@gmail.com>
Date: Wed, 3 Jan 2024 17:12:13 +0700
Subject: [PATCH 03/10] add barebone bar

---
 components/chainCards.tsx  |  6 ++++++
 components/progressBar.tsx | 10 ++++++++++
 hooks/cosmwasm.tsx         |  2 +-
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 components/progressBar.tsx

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index 43830d2..e0fac03 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -8,6 +8,7 @@ import JunoLogo from "../public/JUNO400x400.png";
 import AuraLogo from "../public/AURA400x400.jpg";
 import OsmosisLogo from "../public/OSMOSIS400x400.png";
 import DiceLoader from '../components/diceLoader';
+import progressBar from '../components/progressBar';
 import { ChainType, CheckResponse } from '../pages/api/check';
 import { parseTimestamp } from '../services/parsing'
 import { randdropClaimMsg } from '../services/contractTx'
@@ -385,6 +386,11 @@ export const ClaimInfo = ({
       case "ready": {
         return (
           <div className={`w-full h-full p-6 flex justify-center items-start`}>
+            {/* Progress Bar */}
+            // TODO
+            <progressBar percentageLeft={percentageLeft} />
+  
+            {/* Your existing button */}
             <button
               onClick={() => handleClaimRanddrop()}
               className={`py-2 px-6 animate-pulse hover:animate-none hover:shaxdow-neon-md hover:bg-green-500/10 text-green-500 border border-green-500 rounded-xl bg-gradient-to-b from-green-500/10`}
diff --git a/components/progressBar.tsx b/components/progressBar.tsx
new file mode 100644
index 0000000..0d9d2ea
--- /dev/null
+++ b/components/progressBar.tsx
@@ -0,0 +1,10 @@
+// TODO: style
+const progressBar = ({ percentageLeft }) => {
+    return (
+      <div className="progress-bar-background" style={{ width: '100%', backgroundColor: '#ddd' }}>
+        <div style={{ width: `${percentageLeft}%`, backgroundColor: 'green', height: '20px' }} />
+      </div>
+    );
+};
+
+export default progressBar;
\ No newline at end of file
diff --git a/hooks/cosmwasm.tsx b/hooks/cosmwasm.tsx
index c6eb5a2..9fea6d6 100644
--- a/hooks/cosmwasm.tsx
+++ b/hooks/cosmwasm.tsx
@@ -39,7 +39,7 @@ export function fromBinary(base64: string): any {
   return JSON.parse(fromUtf8(fromBase64(base64)));
 }
 
-async function queryContractBalance(
+export async function queryContractBalance(
   chain: ChainType,
   contractAddress: string
 ): Promise<number> {

From d58f51a0005178c665c771dfca5ea60c9703f68b Mon Sep 17 00:00:00 2001
From: sontrinh16 <trinhleson2000@gmail.com>
Date: Wed, 3 Jan 2024 20:08:12 +0700
Subject: [PATCH 04/10] add progress bar

---
 components/chainCards.tsx  |  55 +++++++----
 components/progressBar.tsx |  17 ++--
 package-lock.json          | 194 ++++++++++++++++++++++++++++++++++++-
 package.json               |   2 +
 pages/_app.tsx             |   1 +
 5 files changed, 239 insertions(+), 30 deletions(-)

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index e0fac03..d39a448 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react'
+import { useMemo, useCallback, useState, useEffect } from 'react'
 import { toast } from 'react-hot-toast';
 import { ChainSigningClient } from '../contexts/userClients';
 import NextImage from "next/image";
@@ -8,7 +8,7 @@ import JunoLogo from "../public/JUNO400x400.png";
 import AuraLogo from "../public/AURA400x400.jpg";
 import OsmosisLogo from "../public/OSMOSIS400x400.png";
 import DiceLoader from '../components/diceLoader';
-import progressBar from '../components/progressBar';
+import Progress from './progressBar';
 import { ChainType, CheckResponse } from '../pages/api/check';
 import { parseTimestamp } from '../services/parsing'
 import { randdropClaimMsg } from '../services/contractTx'
@@ -16,6 +16,7 @@ import { ethLedgerTxHelper } from '../services/ledgerHelpers';
 import { routeNewTab } from '../services/misc';
 import { AirdropLiveStatus } from '../pages';
 import { signSendAndBroadcastOnInjective } from '../services/injective';
+import { calculatePercentage } from '../hooks/cosmwasm';
 
 const BridgeLinks = {
   "injective": "https://tfm.com/bridge?chainTo=nois-1&chainFrom=injective-1&token0=ibc%2FDD9182E8E2B13C89D6B4707C7B43E8DB6193F9FF486AFA0E6CF86B427B0D231A&token1=unois",
@@ -63,8 +64,8 @@ export const PausedChainCard = ({
         return InjectiveLogo;
       case "aura":
         return AuraLogo;
-        case "osmosis":
-          return OsmosisLogo;
+      case "osmosis":
+        return OsmosisLogo;
       case "stargaze":
         return StargazeLogo;
       default:
@@ -134,8 +135,8 @@ export const LiveChainCard = ({
         return InjectiveLogo;
       case "aura":
         return AuraLogo;
-        case "osmosis":
-          return OsmosisLogo;
+      case "osmosis":
+        return OsmosisLogo;
       case "stargaze":
         return StargazeLogo;
       default:
@@ -261,6 +262,25 @@ export const ClaimInfo = ({
   checkResponse: CheckResponse;
   refetch: () => {}
 }) => {
+  const [claimPercentageLeft, setClaimPercentageLeft] = useState(0)
+
+  useEffect(() => {
+    (async () => {
+      // If no client, or client is not metamask or ledger, return
+      if (!client || !client.chain) {
+        toast.error(`Wallet or Ledger not connected for ${checkResponse.chain}`);
+        return;
+      }
+
+      // Assert claim_contract exists
+      if (!checkResponse.address) {
+        toast.error(`No randdrop contract available for ${checkResponse.chain}`);
+        return;
+      }
+      const percentage = await calculatePercentage(client?.chain, checkResponse?.address)
+      setClaimPercentageLeft(100 - percentage)
+    })()
+  }, [])
 
   const {
     submitted,
@@ -385,18 +405,19 @@ export const ClaimInfo = ({
     switch (checkResponse.userStatus) {
       case "ready": {
         return (
-          <div className={`w-full h-full p-6 flex justify-center items-start`}>
+          <div>
             {/* Progress Bar */}
-            // TODO
-            <progressBar percentageLeft={percentageLeft} />
-  
-            {/* Your existing button */}
-            <button
-              onClick={() => handleClaimRanddrop()}
-              className={`py-2 px-6 animate-pulse hover:animate-none hover:shaxdow-neon-md hover:bg-green-500/10 text-green-500 border border-green-500 rounded-xl bg-gradient-to-b from-green-500/10`}
-            >
-              {"Roll the dice!"}
-            </button>
+            <Progress percentageLeft={claimPercentageLeft} />
+            <div className={`w-full h-full p-6 flex justify-center items-start`}>
+
+              {/* Your existing button */}
+              <button
+                onClick={() => handleClaimRanddrop()}
+                className={`py-2 px-6 animate-pulse hover:animate-none hover:shaxdow-neon-md hover:bg-green-500/10 text-green-500 border border-green-500 rounded-xl bg-gradient-to-b from-green-500/10`}
+              >
+                {"Roll the dice!"}
+              </button>
+            </div>
           </div>
         )
       }
diff --git a/components/progressBar.tsx b/components/progressBar.tsx
index 0d9d2ea..811a007 100644
--- a/components/progressBar.tsx
+++ b/components/progressBar.tsx
@@ -1,10 +1,11 @@
-// TODO: style
-const progressBar = ({ percentageLeft }) => {
-    return (
-      <div className="progress-bar-background" style={{ width: '100%', backgroundColor: '#ddd' }}>
-        <div style={{ width: `${percentageLeft}%`, backgroundColor: 'green', height: '20px' }} />
-      </div>
-    );
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+const Progress = ({ percentageLeft }) => {
+  return (
+    <div style={{marginBottom: '20px'}}>
+      <ProgressBar striped animated now={percentageLeft} label={`${percentageLeft}%`} style={{color: 'black'}}/>
+    </div>
+  );
 };
 
-export default progressBar;
\ No newline at end of file
+export default Progress;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0a7b795..5108913 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,11 +19,13 @@
         "@metamask/sdk": "^0.14.1",
         "@next/bundle-analyzer": "^13.4.12",
         "@tanstack/react-query": "^4.29.12",
+        "bootstrap": "^5.3.2",
         "crypto-js": "^4.1.1",
         "ethereumjs-util": "^7.1.5",
         "merkletreejs": "^0.3.9",
         "next": "^13.1.1",
         "react": "18.2.0",
+        "react-bootstrap": "^2.9.2",
         "react-dom": "18.2.0",
         "react-hot-toast": "^2.4.0",
         "tsparticles-confetti": "^2.9.3",
@@ -5539,6 +5541,15 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@project-serum/sol-wallet-adapter": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/@project-serum/sol-wallet-adapter/-/sol-wallet-adapter-0.2.6.tgz",
@@ -5608,6 +5619,20 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.1.tgz",
+      "integrity": "sha512-NqzkLFP8ZVI4GSorS0AYljC13QW2sc8bDqJOkBvkAt3M8gbcAXJWVRGtZBCRscki9RZF+rNlnPdg0G0jYkhJcg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/@react-native-async-storage/async-storage": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.21.0.tgz",
@@ -7478,6 +7503,45 @@
       "integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==",
       "peer": true
     },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.15",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.15.tgz",
+      "integrity": "sha512-cZFXYTxbpzYcieq/mBwSyXgqnGMHoBVh3J7MU0CCoIB4NRZxV9/TuwTBAaLMqpNhC3zTPMCgkQ5Ey07L02Xmcw==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@scure/base": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.3.tgz",
@@ -9208,14 +9272,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
       "version": "18.0.21",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
       "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -9231,11 +9293,18 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
     },
     "node_modules/@types/secp256k1": {
       "version": "4.0.6",
@@ -9256,6 +9325,11 @@
       "resolved": "https://registry.npmjs.org/@types/w3c-web-usb/-/w3c-web-usb-1.0.10.tgz",
       "integrity": "sha512-CHgUI5kTc/QLMP8hODUHhge0D4vx+9UiAwIGiT0sTy/B2XpdX1U5rJt6JSISgr6ikRT7vxV9EVAFeYZqUnl1gQ=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "node_modules/@types/web": {
       "version": "0.0.119",
       "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.119.tgz",
@@ -10478,6 +10552,24 @@
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
       "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/borsh": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/borsh/-/borsh-0.7.0.tgz",
@@ -10944,6 +11036,11 @@
         "consola": "^3.2.3"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -11594,6 +11691,14 @@
         "prop-types": "^15.8.1"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/des.js": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
@@ -11666,6 +11771,15 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -17126,6 +17240,18 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/protobufjs": {
       "version": "6.11.3",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.3.tgz",
@@ -17443,6 +17569,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.2.tgz",
+      "integrity": "sha512-a36B+EHsAI/aH+ZhXNILBFnqscE3zr10dWmjBmfhIb2QR7KSXJiGzYd6Faf/25G8G7/CP9TCL2B0WhUBOD2UBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.6",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-devtools-core": {
       "version": "4.28.5",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.5.tgz",
@@ -17668,6 +17823,21 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19628,6 +19798,20 @@
         "multiformats": "^9.4.2"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/uncrypto": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
diff --git a/package.json b/package.json
index 6e36eca..8e2d5b4 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,13 @@
     "@metamask/sdk": "^0.14.1",
     "@next/bundle-analyzer": "^13.4.12",
     "@tanstack/react-query": "^4.29.12",
+    "bootstrap": "^5.3.2",
     "crypto-js": "^4.1.1",
     "ethereumjs-util": "^7.1.5",
     "merkletreejs": "^0.3.9",
     "next": "^13.1.1",
     "react": "18.2.0",
+    "react-bootstrap": "^2.9.2",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.0",
     "tsparticles-confetti": "^2.9.3",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 8118f63..79b2ce1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,6 +8,7 @@ import {
 import { Toaster } from 'react-hot-toast';
 import { useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(

From d43b0746af54c785ad15a52dc977e76474de6600 Mon Sep 17 00:00:00 2001
From: hoangdv2429 <hoangdv2429@gmail.com>
Date: Wed, 3 Jan 2024 21:53:46 +0700
Subject: [PATCH 05/10] change query address

---
 components/chainCards.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index d39a448..45ac70f 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -277,8 +277,13 @@ export const ClaimInfo = ({
         toast.error(`No randdrop contract available for ${checkResponse.chain}`);
         return;
       }
-      const percentage = await calculatePercentage(client?.chain, checkResponse?.address)
-      setClaimPercentageLeft(100 - percentage)
+      let percentage;
+      if (!checkResponse.claim_contract) {
+        console.error(`No claim contract available for ${checkResponse.chain}`);
+      } else {
+        percentage = await calculatePercentage(client?.chain,  checkResponse?.claim_contract)
+      }
+      setClaimPercentageLeft(parseFloat((100 - percentage).toFixed(2)))
     })()
   }, [])
 

From f01cfa5c9de72f5dee942aa9e6bc0fb027bbd323 Mon Sep 17 00:00:00 2001
From: sontrinh16 <trinhleson2000@gmail.com>
Date: Wed, 3 Jan 2024 22:01:58 +0700
Subject: [PATCH 06/10] always show progress bar

---
 components/chainCards.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index d39a448..d6ce65e 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -400,7 +400,9 @@ export const ClaimInfo = ({
   }, [client?.walletAddress])
 
   if (!client || checkResponse.userStatus === "not_eligible") {
-    return <></>
+    return <div style={{width: '100%'}}>
+      <Progress percentageLeft={claimPercentageLeft} />
+    </div>
   } else {
     switch (checkResponse.userStatus) {
       case "ready": {
@@ -478,7 +480,9 @@ export const ClaimInfo = ({
       }
       default: {
         return (
-          <></>
+          <div style={{width: '100%'}}>
+            <Progress percentageLeft={claimPercentageLeft} />
+          </div>
         )
       }
     }

From 8987982669cb2288b333fa93227089f5b51f86c4 Mon Sep 17 00:00:00 2001
From: sontrinh16 <trinhleson2000@gmail.com>
Date: Wed, 3 Jan 2024 23:04:35 +0700
Subject: [PATCH 07/10] add get contract address from registry

---
 components/chainCards.tsx | 17 ++++++++---------
 pages/api/check.ts        |  9 +++++++++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index 9302f17..c1149b7 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -17,6 +17,7 @@ import { routeNewTab } from '../services/misc';
 import { AirdropLiveStatus } from '../pages';
 import { signSendAndBroadcastOnInjective } from '../services/injective';
 import { calculatePercentage } from '../hooks/cosmwasm';
+import { getContractAddress } from '../pages/api/check';
 
 const BridgeLinks = {
   "injective": "https://tfm.com/bridge?chainTo=nois-1&chainFrom=injective-1&token0=ibc%2FDD9182E8E2B13C89D6B4707C7B43E8DB6193F9FF486AFA0E6CF86B427B0D231A&token1=unois",
@@ -272,17 +273,15 @@ export const ClaimInfo = ({
         return;
       }
 
-      // Assert claim_contract exists
-      if (!checkResponse.address) {
+      const contractAddress = getContractAddress(client.chain)
+
+      if (contractAddress === "") {
         toast.error(`No randdrop contract available for ${checkResponse.chain}`);
         return;
       }
+
       let percentage;
-      if (!checkResponse.claim_contract) {
-        console.error(`No claim contract available for ${checkResponse.chain}`);
-      } else {
-        percentage = await calculatePercentage(client?.chain,  checkResponse?.claim_contract)
-      }
+      percentage = await calculatePercentage(client?.chain, contractAddress)
       setClaimPercentageLeft(parseFloat((100 - percentage).toFixed(2)))
     })()
   }, [])
@@ -405,7 +404,7 @@ export const ClaimInfo = ({
   }, [client?.walletAddress])
 
   if (!client || checkResponse.userStatus === "not_eligible") {
-    return <div style={{width: '100%'}}>
+    return <div style={{ width: '100%' }}>
       <Progress percentageLeft={claimPercentageLeft} />
     </div>
   } else {
@@ -485,7 +484,7 @@ export const ClaimInfo = ({
       }
       default: {
         return (
-          <div style={{width: '100%'}}>
+          <div style={{ width: '100%' }}>
             <Progress percentageLeft={claimPercentageLeft} />
           </div>
         )
diff --git a/pages/api/check.ts b/pages/api/check.ts
index 6692559..428d236 100644
--- a/pages/api/check.ts
+++ b/pages/api/check.ts
@@ -141,6 +141,15 @@ const AirdropRegistry = {
   }
 }
 
+export const getContractAddress = (chainType: string) => {
+  const chain = AirdropRegistry[chainType]
+  if (!chain) {
+    return ""
+  }
+
+  return chain.contract
+}
+
 interface AmtProof {
   amount: string,
   proof: string[]

From dae566cae5a4d9965271453269c0307f595b91bd Mon Sep 17 00:00:00 2001
From: sontrinh16 <trinhleson2000@gmail.com>
Date: Thu, 4 Jan 2024 00:37:13 +0700
Subject: [PATCH 08/10] improve progress bar

---
 components/chainCards.tsx |  59 ++-
 hooks/cosmwasm.tsx        |  12 +-
 package-lock.json         | 899 +++++++++++++++++++++++++++++++++++++-
 package.json              |   1 +
 pages/_app.tsx            |   1 +
 5 files changed, 953 insertions(+), 19 deletions(-)

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index c1149b7..8c14909 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -18,6 +18,7 @@ import { AirdropLiveStatus } from '../pages';
 import { signSendAndBroadcastOnInjective } from '../services/injective';
 import { calculatePercentage } from '../hooks/cosmwasm';
 import { getContractAddress } from '../pages/api/check';
+import { Popover, Spin } from 'antd';
 
 const BridgeLinks = {
   "injective": "https://tfm.com/bridge?chainTo=nois-1&chainFrom=injective-1&token0=ibc%2FDD9182E8E2B13C89D6B4707C7B43E8DB6193F9FF486AFA0E6CF86B427B0D231A&token1=unois",
@@ -264,6 +265,7 @@ export const ClaimInfo = ({
   refetch: () => {}
 }) => {
   const [claimPercentageLeft, setClaimPercentageLeft] = useState(0)
+  const [tokenLeft, setTokenLeft] = useState(0)
 
   useEffect(() => {
     (async () => {
@@ -280,9 +282,14 @@ export const ClaimInfo = ({
         return;
       }
 
-      let percentage;
-      percentage = await calculatePercentage(client?.chain, contractAddress)
-      setClaimPercentageLeft(parseFloat((100 - percentage).toFixed(2)))
+      const resp = await calculatePercentage(client?.chain, contractAddress)
+      if (!resp) {
+        toast.error(`Unable to fetch contract balance for ${checkResponse.chain}`);
+        return;
+      }
+      console.log(resp)
+      setClaimPercentageLeft(parseFloat(resp.percentageLeft.toFixed(2)))
+      setTokenLeft(resp.amountLeft)
     })()
   }, [])
 
@@ -405,7 +412,18 @@ export const ClaimInfo = ({
 
   if (!client || checkResponse.userStatus === "not_eligible") {
     return <div style={{ width: '100%' }}>
-      <Progress percentageLeft={claimPercentageLeft} />
+      <Popover placement="top" content={`${(tokenLeft / Math.pow(10, 6)).toFixed(2)} Nois left`}>
+        <div>
+          <Progress percentageLeft={claimPercentageLeft} />
+        </div>
+      </Popover>
+      {
+        (tokenLeft < 20_000_000 || claimPercentageLeft === 0) && (
+          <div style={{ color: 'white', display: 'flex', justifyContent: 'center' }}>
+            All tokens claimed
+          </div>
+        )
+      }
     </div>
   } else {
     switch (checkResponse.userStatus) {
@@ -413,16 +431,29 @@ export const ClaimInfo = ({
         return (
           <div>
             {/* Progress Bar */}
-            <Progress percentageLeft={claimPercentageLeft} />
+            <Popover placement="top" content={`${(tokenLeft / Math.pow(10, 6)).toFixed(2)} Nois left`}>
+              <div>
+                <Progress percentageLeft={claimPercentageLeft} />
+              </div>
+            </Popover>
             <div className={`w-full h-full p-6 flex justify-center items-start`}>
 
               {/* Your existing button */}
-              <button
-                onClick={() => handleClaimRanddrop()}
-                className={`py-2 px-6 animate-pulse hover:animate-none hover:shaxdow-neon-md hover:bg-green-500/10 text-green-500 border border-green-500 rounded-xl bg-gradient-to-b from-green-500/10`}
-              >
-                {"Roll the dice!"}
-              </button>
+              {
+                (tokenLeft < 20_000_000 || claimPercentageLeft === 0) ? (
+                  <div>
+                    All tokens claimed
+                  </div>
+                ) : (
+                  <button
+                    onClick={() => handleClaimRanddrop()}
+                    className={`py-2 px-6 animate-pulse hover:animate-none hover:shaxdow-neon-md hover:bg-green-500/10 text-green-500 border border-green-500 rounded-xl bg-gradient-to-b from-green-500/10`}
+                  >
+                    {"Roll the dice!"}
+                  </button>
+                )
+              }
+
             </div>
           </div>
         )
@@ -485,7 +516,11 @@ export const ClaimInfo = ({
       default: {
         return (
           <div style={{ width: '100%' }}>
-            <Progress percentageLeft={claimPercentageLeft} />
+            <Popover placement="top" content={`${(tokenLeft / Math.pow(10, 6)).toFixed(2)} Nois left`}>
+              <div>
+                <Progress percentageLeft={claimPercentageLeft} />
+              </div>
+            </Popover>
           </div>
         )
       }
diff --git a/hooks/cosmwasm.tsx b/hooks/cosmwasm.tsx
index 9fea6d6..d59b319 100644
--- a/hooks/cosmwasm.tsx
+++ b/hooks/cosmwasm.tsx
@@ -69,10 +69,15 @@ export async function queryContractBalance(
   return noisBalance ? parseInt(noisBalance.amount) : 0;
 }
 
+export interface ContractQueryResp {
+  percentageLeft: number,
+  amountLeft: number
+}
+
 export async function calculatePercentage(
   chain: ChainType,
   contractAddress: string
-): Promise<number> {
+): Promise<ContractQueryResp> {
   // Total amount to be distributed per chain (in unois)
   const totalDistribution = {
     osmosis: 4_000_000_000_000,
@@ -88,5 +93,8 @@ export async function calculatePercentage(
   const totalForChain = totalDistribution[chain];
   const percentageLeft = (balance / totalForChain) * 100;
 
-  return percentageLeft;
+  return {
+    percentageLeft,
+    amountLeft: balance
+  };
 }
diff --git a/package-lock.json b/package-lock.json
index 5108913..fb48e70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@metamask/sdk": "^0.14.1",
         "@next/bundle-analyzer": "^13.4.12",
         "@tanstack/react-query": "^4.29.12",
+        "antd": "^5.12.7",
         "bootstrap": "^5.3.2",
         "crypto-js": "^4.1.1",
         "ethereumjs-util": "^7.1.5",
@@ -73,6 +74,81 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz",
+      "integrity": "sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.6.1"
+      }
+    },
+    "node_modules/@ant-design/cssinjs": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.2.tgz",
+      "integrity": "sha512-514V9rjLaFYb3v4s55/8bg2E6fb81b99s3crDZf4nSwtiDLLXs8axnIph+q2TVkY2hbJPZOn/cVsVcnLkzFy7w==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "classnames": "^2.3.1",
+        "csstype": "^3.1.3",
+        "rc-util": "^5.35.0",
+        "stylis": "^4.0.13"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs/node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "node_modules/@ant-design/cssinjs/node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/@ant-design/icons": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.2.6.tgz",
+      "integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/icons-svg": "^4.3.0",
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.31.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
+      "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
+    },
+    "node_modules/@ant-design/react-slick": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
+      "integrity": "sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "throttle-debounce": "^5.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
     "node_modules/@apocentre/alias-sampling": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/@apocentre/alias-sampling/-/alias-sampling-0.5.3.tgz",
@@ -2444,6 +2520,14 @@
       "resolved": "https://registry.npmjs.org/@cosmostation/extension-client/-/extension-client-0.1.15.tgz",
       "integrity": "sha512-HlXYJjFrNpjiV/GUKhri1UL8/bhlOIFFLpRF78YDSqq16x0+plIqx5CAvEusFcKTDpVfpeD5sfUHiKvP7euNFg=="
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -5619,6 +5703,118 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@rc-component/color-picker": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.5.1.tgz",
+      "integrity": "sha512-onyAFhWKXuG4P162xE+7IgaJkPkwM94XlOYnQuu69XdXWMfxpeFi6tpJBsieIMV7EnyLV5J3lDzdLiFeK0iEBA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@ctrl/tinycolor": "^3.6.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.38.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/context": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
+      "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/mini-decimal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@rc-component/mutate-observer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz",
+      "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
+      "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/tour": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.11.1.tgz",
+      "integrity": "sha512-c9Lw3/oVinj5D64Rsp8aDLOXcgdViE+hq7bj0Qoo8fTuQEh9sSpUw5OZcum943JkjeIE4hLcc5FD4a5ANtMJ4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/portal": "^1.0.0-9",
+        "@rc-component/trigger": "^1.3.6",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/trigger": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.2.tgz",
+      "integrity": "sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@rc-component/portal": "^1.1.0",
+        "classnames": "^2.3.2",
+        "rc-motion": "^2.0.0",
+        "rc-resize-observer": "^1.3.1",
+        "rc-util": "^5.38.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/@react-aria/ssr": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.1.tgz",
@@ -10016,6 +10212,68 @@
         "node": ">=4"
       }
     },
+    "node_modules/antd": {
+      "version": "5.12.7",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.12.7.tgz",
+      "integrity": "sha512-+SnWLO0kwXFnP15PAzvczZG3/yGu1PoYJa1mcYajqi248gaFA6HjY0s/kXVyXEIzY8dO3MT+RenYweU+s47Fwg==",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.2",
+        "@ant-design/cssinjs": "^1.18.2",
+        "@ant-design/icons": "^5.2.6",
+        "@ant-design/react-slick": "~1.0.2",
+        "@ctrl/tinycolor": "^3.6.1",
+        "@rc-component/color-picker": "~1.5.1",
+        "@rc-component/mutate-observer": "^1.1.0",
+        "@rc-component/tour": "~1.11.1",
+        "@rc-component/trigger": "^1.18.2",
+        "classnames": "^2.5.1",
+        "copy-to-clipboard": "^3.3.3",
+        "dayjs": "^1.11.10",
+        "qrcode.react": "^3.1.0",
+        "rc-cascader": "~3.20.0",
+        "rc-checkbox": "~3.1.0",
+        "rc-collapse": "~3.7.2",
+        "rc-dialog": "~9.3.4",
+        "rc-drawer": "~6.5.2",
+        "rc-dropdown": "~4.1.0",
+        "rc-field-form": "~1.41.0",
+        "rc-image": "~7.5.1",
+        "rc-input": "~1.3.11",
+        "rc-input-number": "~8.4.0",
+        "rc-mentions": "~2.9.1",
+        "rc-menu": "~9.12.4",
+        "rc-motion": "^2.9.0",
+        "rc-notification": "~5.3.0",
+        "rc-pagination": "~4.0.4",
+        "rc-picker": "~3.14.6",
+        "rc-progress": "~3.5.1",
+        "rc-rate": "~2.12.0",
+        "rc-resize-observer": "^1.4.0",
+        "rc-segmented": "~2.2.2",
+        "rc-select": "~14.10.0",
+        "rc-slider": "~10.5.0",
+        "rc-steps": "~6.0.1",
+        "rc-switch": "~4.1.0",
+        "rc-table": "~7.36.1",
+        "rc-tabs": "~12.14.1",
+        "rc-textarea": "~1.5.3",
+        "rc-tooltip": "~6.1.3",
+        "rc-tree": "~5.8.2",
+        "rc-tree-select": "~5.15.0",
+        "rc-upload": "~4.5.2",
+        "rc-util": "^5.38.1",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "throttle-debounce": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -10074,6 +10332,11 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -10149,6 +10412,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -11229,6 +11497,11 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "peer": true
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -11499,9 +11772,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/d": {
       "version": "1.0.1",
@@ -11530,8 +11803,7 @@
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
-      "peer": true
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -14300,6 +14572,14 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -17363,6 +17643,14 @@
         "qrcode-terminal": "bin/qrcode-terminal.js"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
+      "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/qrcode/node_modules/ansi-regex": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
@@ -17558,6 +17846,581 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rc-cascader": {
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.20.0.tgz",
+      "integrity": "sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "^2.3.1",
+        "rc-select": "~14.10.0",
+        "rc-tree": "~5.8.1",
+        "rc-util": "^5.37.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-checkbox": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.1.0.tgz",
+      "integrity": "sha512-PAwpJFnBa3Ei+5pyqMMXdcKYKNBMS+TvSDiLdDnARnMJHC8ESxwPfm4Ao1gJiKtWLdmGfigascnCpwrHFgoOBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.25.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-collapse": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.7.2.tgz",
+      "integrity": "sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.3.4",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dialog": {
+      "version": "9.3.4",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.4.tgz",
+      "integrity": "sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.0.0-8",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.3.0",
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-drawer": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-6.5.2.tgz",
+      "integrity": "sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.1.1",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.6.1",
+        "rc-util": "^5.36.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dropdown": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
+      "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@rc-component/trigger": "^1.7.0",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.11.0",
+        "react-dom": ">=16.11.0"
+      }
+    },
+    "node_modules/rc-field-form": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.41.0.tgz",
+      "integrity": "sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "async-validator": "^4.1.0",
+        "rc-util": "^5.32.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-image": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.5.1.tgz",
+      "integrity": "sha512-Z9loECh92SQp0nSipc0MBuf5+yVC05H/pzC+Nf8xw1BKDFUJzUeehYBjaWlxly8VGBZJcTHYri61Fz9ng1G3Ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/portal": "^1.0.2",
+        "classnames": "^2.2.6",
+        "rc-dialog": "~9.3.4",
+        "rc-motion": "^2.6.2",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-input": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.3.11.tgz",
+      "integrity": "sha512-jhH7QP5rILanSHCGSUkdoFE5DEtpv8FIseYhuYkOZzUBeiVAiwM3q26YqZ6xBB0QFEZ/yUAgms4xW4iuub3xFQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-input-number": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.4.0.tgz",
+      "integrity": "sha512-B6rziPOLRmeP7kcS5qbdC5hXvvDHYKV4vUxmahevYx2E6crS2bRi0xLDjhJ0E1HtOWo8rTmaE2EBJAkTCZOLdA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "classnames": "^2.2.5",
+        "rc-input": "~1.3.5",
+        "rc-util": "^5.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-mentions": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.9.1.tgz",
+      "integrity": "sha512-cZuElWr/5Ws0PXx1uxobxfYh4mqUw2FitfabR62YnWgm+WAfDyXZXqZg5DxXW+M1cgVvntrQgDDd9LrihrXzew==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@rc-component/trigger": "^1.5.0",
+        "classnames": "^2.2.6",
+        "rc-input": "~1.3.5",
+        "rc-menu": "~9.12.0",
+        "rc-textarea": "~1.5.0",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-menu": {
+      "version": "9.12.4",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.12.4.tgz",
+      "integrity": "sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^1.17.0",
+        "classnames": "2.x",
+        "rc-motion": "^2.4.3",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-motion": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.0.tgz",
+      "integrity": "sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-notification": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.3.0.tgz",
+      "integrity": "sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.9.0",
+        "rc-util": "^5.20.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-overflow": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz",
+      "integrity": "sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.37.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-pagination": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-4.0.4.tgz",
+      "integrity": "sha512-GGrLT4NgG6wgJpT/hHIpL9nELv27A1XbSZzECIuQBQTVSf4xGKxWr6I/jhpRPauYEWEbWVw22ObG6tJQqwJqWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-picker": {
+      "version": "3.14.6",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-3.14.6.tgz",
+      "integrity": "sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^1.5.0",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.30.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "date-fns": ">= 2.x",
+        "dayjs": ">= 1.x",
+        "luxon": ">= 3.x",
+        "moment": ">= 2.x",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rc-progress": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.5.1.tgz",
+      "integrity": "sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-rate": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.12.0.tgz",
+      "integrity": "sha512-g092v5iZCdVzbjdn28FzvWebK2IutoVoiTeqoLTj9WM7SjA/gOJIw5/JFZMRyJYYVe1jLAU2UhAfstIpCNRozg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-resize-observer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
+      "integrity": "sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.38.0",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-segmented": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.2.2.tgz",
+      "integrity": "sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-select": {
+      "version": "14.10.0",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.10.0.tgz",
+      "integrity": "sha512-TsIJTYafTTapCA32LLNpx/AD6ntepR1TG8jEVx35NiAAWCPymhUfuca8kRcUNd3WIGVMDcMKn9kkphoxEz+6Ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^1.5.0",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-slider": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.5.0.tgz",
+      "integrity": "sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.27.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-steps": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.1.tgz",
+      "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "classnames": "^2.2.3",
+        "rc-util": "^5.16.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-switch": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.1.0.tgz",
+      "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.30.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-table": {
+      "version": "7.36.1",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.36.1.tgz",
+      "integrity": "sha512-9qMxEm/3Y8ukdW8I8ZvmhX0QImfNKzH0JEUlSbyaUlsYTB+/tQEbfaB8YkG4sHVZ1io4pxqK/BXoZYqebi/TIQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/context": "^1.4.0",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.1.0",
+        "rc-util": "^5.37.0",
+        "rc-virtual-list": "^3.11.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tabs": {
+      "version": "12.14.1",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.14.1.tgz",
+      "integrity": "sha512-1xlE7JQNYxD5RwBsM7jf2xSdUrkmTSDFLFEm2gqAgnsRlOGydEzXXNAVTOT6QcgM1G/gCm+AgG+FYPUGb4Hs4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "2.x",
+        "rc-dropdown": "~4.1.0",
+        "rc-menu": "~9.12.0",
+        "rc-motion": "^2.6.2",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.34.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-textarea": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.5.3.tgz",
+      "integrity": "sha512-oH682ghHx++stFNYrosPRBfwsypywrTXpaD0/5Z8MPkUOnyOQUaY9ueL9tMu6BP1LfsuYQ1VLpg5OtshViLNgA==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-input": "~1.3.5",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tooltip": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.1.3.tgz",
+      "integrity": "sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/trigger": "^1.18.0",
+        "classnames": "^2.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tree": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.2.tgz",
+      "integrity": "sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.1"
+      },
+      "engines": {
+        "node": ">=10.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-tree-select": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.15.0.tgz",
+      "integrity": "sha512-YJHfdO6azFnR0/JuNBZLDptGE4/RGfVeHAafUIYcm2T3RBkL1O8aVqiHvwIyLzdK59ry0NLrByd+3TkfpRM+9Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-select": "~14.10.0",
+        "rc-tree": "~5.8.1",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-upload": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.5.2.tgz",
+      "integrity": "sha512-QO3ne77DwnAPKFn0bA5qJM81QBjQi0e0NHdkvpFyY73Bea2NfITiotqJqVjHgeYPOJu5lLVR32TNGP084aSoXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.38.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.38.1.tgz",
+      "integrity": "sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/rc-virtual-list": {
+      "version": "3.11.3",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
+      "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.0",
+        "classnames": "^2.2.6",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -18027,6 +18890,11 @@
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -18434,6 +19302,14 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
     "node_modules/scrypt-js": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/scrypt-js/-/scrypt-js-3.0.1.tgz",
@@ -18995,6 +19871,11 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -19272,6 +20153,14 @@
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
       "peer": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index 8e2d5b4..c066d45 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@metamask/sdk": "^0.14.1",
     "@next/bundle-analyzer": "^13.4.12",
     "@tanstack/react-query": "^4.29.12",
+    "antd": "^5.12.7",
     "bootstrap": "^5.3.2",
     "crypto-js": "^4.1.1",
     "ethereumjs-util": "^7.1.5",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 79b2ce1..c1b60bd 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,6 +9,7 @@ import { Toaster } from 'react-hot-toast';
 import { useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import "antd/dist/reset.css"
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(

From 8b1804fd43773fb02d4f9798e816653243939375 Mon Sep 17 00:00:00 2001
From: hoangdv2429 <hoangdv2429@gmail.com>
Date: Thu, 4 Jan 2024 14:53:43 +0700
Subject: [PATCH 09/10] refactor

---
 components/chainCards.tsx | 68 +++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 39 deletions(-)

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index 8c14909..65ae265 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -255,6 +255,23 @@ export const LiveChainCard = ({
   )
 }
 
+const ProgressBar = ({ tokenLeft, claimPercentageLeft }) => (
+  <div style={{ width: '75%' }}>
+    <Popover placement="top" content={`${(tokenLeft / Math.pow(10, 6)).toFixed(2)} Nois left`}>
+      <div>
+        <Progress percentageLeft={claimPercentageLeft} />
+      </div>
+    </Popover>
+    {
+      (tokenLeft < 20_000_000 || claimPercentageLeft === 0) && (
+        <div style={{ color: 'white', display: 'flex', justifyContent: 'center' }}>
+          All tokens claimed
+        </div>
+      )
+    }
+  </div>
+);
+
 export const ClaimInfo = ({
   client,
   checkResponse,
@@ -411,40 +428,19 @@ export const ClaimInfo = ({
   }, [client?.walletAddress])
 
   if (!client || checkResponse.userStatus === "not_eligible") {
-    return <div style={{ width: '100%' }}>
-      <Popover placement="top" content={`${(tokenLeft / Math.pow(10, 6)).toFixed(2)} Nois left`}>
-        <div>
-          <Progress percentageLeft={claimPercentageLeft} />
-        </div>
-      </Popover>
-      {
-        (tokenLeft < 20_000_000 || claimPercentageLeft === 0) && (
-          <div style={{ color: 'white', display: 'flex', justifyContent: 'center' }}>
-            All tokens claimed
-          </div>
-        )
-      }
-    </div>
+    return <ProgressBar tokenLeft={tokenLeft} claimPercentageLeft={claimPercentageLeft} />;
   } else {
     switch (checkResponse.userStatus) {
       case "ready": {
         return (
-          <div>
-            {/* Progress Bar */}
-            <Popover placement="top" content={`${(tokenLeft / Math.pow(10, 6)).toFixed(2)} Nois left`}>
-              <div>
-                <Progress percentageLeft={claimPercentageLeft} />
-              </div>
-            </Popover>
+          <div className={`w-full h-full p-2 flex flex-col justify-start gap-y-2 items-center`}>
+            {/* Progress bar */}
+            <ProgressBar tokenLeft={tokenLeft} claimPercentageLeft={claimPercentageLeft} />
+      
             <div className={`w-full h-full p-6 flex justify-center items-start`}>
-
-              {/* Your existing button */}
+              {/* Claim button */}
               {
-                (tokenLeft < 20_000_000 || claimPercentageLeft === 0) ? (
-                  <div>
-                    All tokens claimed
-                  </div>
-                ) : (
+                (tokenLeft > 20_000_000 || claimPercentageLeft !== 0) && (
                   <button
                     onClick={() => handleClaimRanddrop()}
                     className={`py-2 px-6 animate-pulse hover:animate-none hover:shaxdow-neon-md hover:bg-green-500/10 text-green-500 border border-green-500 rounded-xl bg-gradient-to-b from-green-500/10`}
@@ -453,14 +449,14 @@ export const ClaimInfo = ({
                   </button>
                 )
               }
-
             </div>
           </div>
-        )
+        );
       }
       case "already_won": {
         return (
           <div className={`w-full h-full p-2 flex flex-col justify-start gap-y-2 items-center`}>
+            <ProgressBar tokenLeft={tokenLeft} claimPercentageLeft={claimPercentageLeft} />
             <div className="text-nois-white/80 text-xs">
               {`Submitted at: ${submitted}`}
             </div>
@@ -494,6 +490,7 @@ export const ClaimInfo = ({
       case "already_lost": {
         return (
           <div className={`w-full h-full p-4 flex flex-col justify-start gap-y-2 items-center`}>
+            <ProgressBar tokenLeft={tokenLeft} claimPercentageLeft={claimPercentageLeft} />
             <div className="text-nois-white/80 text-sm">
               {`Submitted at: ${submitted}`}
             </div>
@@ -514,15 +511,8 @@ export const ClaimInfo = ({
         )
       }
       default: {
-        return (
-          <div style={{ width: '100%' }}>
-            <Popover placement="top" content={`${(tokenLeft / Math.pow(10, 6)).toFixed(2)} Nois left`}>
-              <div>
-                <Progress percentageLeft={claimPercentageLeft} />
-              </div>
-            </Popover>
-          </div>
-        )
+        return <ProgressBar tokenLeft={tokenLeft} claimPercentageLeft={claimPercentageLeft} />
+
       }
     }
   }

From 2d0e2dea53d188e0ba190260210660f6c0dfe3de Mon Sep 17 00:00:00 2001
From: sontrinh16 <trinhleson2000@gmail.com>
Date: Thu, 4 Jan 2024 16:25:44 +0700
Subject: [PATCH 10/10] align progress bar

---
 components/chainCards.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/chainCards.tsx b/components/chainCards.tsx
index 65ae265..0c5cef7 100644
--- a/components/chainCards.tsx
+++ b/components/chainCards.tsx
@@ -239,7 +239,7 @@ export const LiveChainCard = ({
         )}
       </div>
       {/* Claim Info*/}
-      <div className="h-[44%] flex justify-center items-center ">
+      <div className="flex justify-center items-center ">
         {!checkResponse || !client ? (
           <div className="w-full h-full flex flex-col justify-center items-center gap-y-4 pb-10">
             <div className="circle-spinner" />
@@ -433,14 +433,16 @@ export const ClaimInfo = ({
     switch (checkResponse.userStatus) {
       case "ready": {
         return (
-          <div className={`w-full h-full p-2 flex flex-col justify-start gap-y-2 items-center`}>
-            {/* Progress bar */}
-            <ProgressBar tokenLeft={tokenLeft} claimPercentageLeft={claimPercentageLeft} />
-      
-            <div className={`w-full h-full p-6 flex justify-center items-start`}>
+          <div style={{ width: '100%'}}>
+            <div style={{display: 'flex', justifyContent: 'center' }}>
+              {/* Progress bar */}
+              <ProgressBar tokenLeft={tokenLeft} claimPercentageLeft={claimPercentageLeft} />
+            </div>
+
+            <div style={{display: 'flex', justifyContent: 'center' }}>
               {/* Claim button */}
               {
-                (tokenLeft > 20_000_000 || claimPercentageLeft !== 0) && (
+                 (
                   <button
                     onClick={() => handleClaimRanddrop()}
                     className={`py-2 px-6 animate-pulse hover:animate-none hover:shaxdow-neon-md hover:bg-green-500/10 text-green-500 border border-green-500 rounded-xl bg-gradient-to-b from-green-500/10`}