refactor

zeta-chain · Jun 29, 2024 · 84f3898 · 84f3898
1 parent 8ab161b
commit 84f3898
Show file tree

Hide file tree

Showing 15 changed files with 564 additions and 551 deletions.
diff --git a/app/index.tsx b/app/index.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,9 +9,9 @@ import {
   xdefiWallet,
 } from "@rainbow-me/rainbowkit/wallets"
 
+import { ZetaChainProvider } from "@/hooks/useZetaChainClient"
 import Index from "@/app/index"
 
-import { ZetaChainProvider } from "../hooks/useZetaChainClient"
 import "@rainbow-me/rainbowkit/styles.css"
 import {
   RainbowKitProvider,
@@ -56,28 +56,26 @@ const wagmiConfig = createConfig({
   webSocketPublicClient,
 })
 
-export const fontSans = FontSans({
+const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
 })
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <>
-      <html lang="en" suppressHydrationWarning>
-        <head />
-        <body
-          className={`min-h-screen bg-background font-sans antialiased ${fontSans.variable}`}
-        >
-          <WagmiConfig config={wagmiConfig}>
-            <RainbowKitProvider chains={chains}>
-              <ZetaChainProvider>
-                <Index>{children}</Index>
-              </ZetaChainProvider>
-            </RainbowKitProvider>
-          </WagmiConfig>
-        </body>
-      </html>
-    </>
+    <html lang="en" suppressHydrationWarning>
+      <head />
+      <body
+        className={`min-h-screen bg-background font-sans antialiased ${fontSans.variable}`}
+      >
+        <WagmiConfig config={wagmiConfig}>
+          <RainbowKitProvider chains={chains}>
+            <ZetaChainProvider>
+              <Index>{children}</Index>
+            </ZetaChainProvider>
+          </RainbowKitProvider>
+        </WagmiConfig>
+      </body>
+    </html>
   )
 }
diff --git a/app/messaging/page.tsx b/app/messaging/page.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useContext, useEffect, useState } from "react"
 import Link from "next/link"
+import { useAppContext } from "@/context/AppContext"
 import UniswapV2Factory from "@uniswap/v2-periphery/build/IUniswapV2Router02.json"
 import Quoter from "@uniswap/v3-periphery/artifacts/contracts/lens/Quoter.sol/Quoter.json"
 import { getExplorers } from "@zetachain/networks"
@@ -35,7 +36,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { AppContext } from "@/app/index"
 
 const contracts: any = {
   goerli_testnet: "0x122F9Cca5121F23b74333D5FBd0c5D9B413bc002",
@@ -72,7 +72,7 @@ const MessagingPage = () => {
       (networks as any)[destinationNetwork]?.chain_id ?? null
     )
   }, [destinationNetwork])
-  const { inbounds, setInbounds, fees } = useContext(AppContext)
+  const { inbounds, setInbounds, fees } = useAppContext()
 
   const {
     config,

diff --git a/app/nft/burn.ts b/app/nft/burn.ts
@@ -1,10 +1,10 @@
 import { useContext } from "react"
+import { useAppContext } from "@/context/AppContext"
 import { abi } from "@zetachain/example-contracts/abi/omnichain/NFT.sol/NFT.json"
 import { ethers } from "ethers"
 import { useAccount } from "wagmi"
 
 import { useEthersSigner } from "@/hooks/useEthersSigner"
-import { AppContext } from "@/app/index"
 
 import { useFetchNFTs } from "./fetchNFTs"
 import { useNFT } from "./useNFT"
@@ -16,7 +16,7 @@ export const useBurn = () => {
     setAssetsBurned,
     omnichainContract,
   } = useNFT()
-  const { setInbounds, inbounds } = useContext(AppContext)
+  const { setInbounds, inbounds } = useAppContext()
   const { address } = useAccount()
   const signer = useEthersSigner()
   const { fetchNFTs } = useFetchNFTs()

diff --git a/app/nft/mint.ts b/app/nft/mint.ts
@@ -1,20 +1,20 @@
 import { useContext } from "react"
+import { useAppContext } from "@/context/AppContext"
 import { networks } from "@zetachain/networks"
 import { getAddress } from "@zetachain/protocol-contracts"
 import { prepareData } from "@zetachain/toolkit/client"
 import { parseEther } from "viem"
 import { useAccount } from "wagmi"
 
 import { useEthersSigner } from "@/hooks/useEthersSigner"
-import { AppContext } from "@/app/index"
 
 import { useNFT } from "./useNFT"
 
 export const useMint = () => {
   const { amount, setAmount, setMintingInProgress, omnichainContract } =
     useNFT()
   const { bitcoinAddress, setInbounds, inbounds, connectBitcoin } =
-    useContext(AppContext)
+    useAppContext()
   const { address } = useAccount()
   const signer = useEthersSigner()
 

diff --git a/app/nft/page.tsx b/app/nft/page.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useContext, useEffect } from "react"
+import { useAppContext } from "@/context/AppContext"
 import { AnimatePresence, motion } from "framer-motion"
 import { debounce } from "lodash"
 import { Flame, Loader, RefreshCw, Send, Sparkles } from "lucide-react"
@@ -21,7 +22,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { AppContext } from "@/app/index"
 
 import { useBurn } from "./burn"
 import { useFetchNFTs } from "./fetchNFTs"
@@ -44,7 +44,7 @@ const NFTPage = () => {
     setRecipient,
     foreignCoins,
   } = useNFT()
-  const { cctxs } = useContext(AppContext)
+  const { cctxs } = useAppContext()
   const { switchNetwork } = useSwitchNetwork()
   const { chain } = useNetwork()
   const { transfer } = useTransfer()

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,24 +1,15 @@
 "use client"
 
-import { useContext, useEffect, useState } from "react"
-import Link from "next/link"
-import { ArrowBigUp, ChevronDown, ChevronUp, RefreshCw } from "lucide-react"
-import { formatUnits } from "viem"
+import { useEffect, useState } from "react"
+import { useAppContext } from "@/context/AppContext"
+import { RefreshCw } from "lucide-react"
 import { useAccount } from "wagmi"
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
+import BalancesTable from "@/components/BalancesTable"
 import Swap from "@/components/swap"
-import { AppContext } from "@/app/index"
 
 const LoadingSkeleton = () => {
   return (
@@ -32,83 +23,6 @@ const LoadingSkeleton = () => {
   )
 }
 
-const BalancesTable = ({
-  balances,
-  showAll,
-  toggleShowAll,
-  stakingAmountTotal,
-}: any) => {
-  return (
-    <div>
-      <Table>
-        <TableHeader>
-          <TableRow className="border-none hover:bg-transparent">
-            <TableHead className="pl-4">Asset</TableHead>
-            <TableHead>Type</TableHead>
-            <TableHead className="text-right">Price</TableHead>
-            <TableHead className="text-right">Balance</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {balances
-            .slice(0, showAll ? balances.length : 5)
-            .map((b: any, index: any) => (
-              <TableRow key={index} className="border-none">
-                <TableCell className="pl-4 rounded-bl-xl rounded-tl-xl">
-                  <div>{b.ticker}</div>
-                  <div className="text-xs text-gray-400">{b.chain_name}</div>
-                </TableCell>
-                <TableCell>{b.coin_type}</TableCell>
-                <TableCell className="text-right">
-                  {b.price?.toFixed(2)}
-                </TableCell>
-                <TableCell className="rounded-br-xl rounded-tr-xl text-right">
-                  {parseFloat(b.balance).toFixed(2) || "N/A"}
-                  {b.ticker === "ZETA" && b.coin_type === "Gas" && (
-                    <div>
-                      <Button
-                        size="sm"
-                        variant="link"
-                        className="my-1 p-0 text-xs h-5"
-                        asChild
-                      >
-                        <Link href="/staking">
-                          <ArrowBigUp className="h-4 w-4 mr-0.5" />
-                          {stakingAmountTotal > 0 ? (
-                            <span>
-                              Staked:&nbsp;
-                              {parseFloat(
-                                formatUnits(stakingAmountTotal, 18)
-                              ).toFixed(0)}
-                            </span>
-                          ) : (
-                            <span>Stake ZETA</span>
-                          )}
-                        </Link>
-                      </Button>
-                    </div>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
-        </TableBody>
-      </Table>
-      {balances?.length > 5 && (
-        <div className="my-4 flex justify-center">
-          <Button variant="link" onClick={toggleShowAll}>
-            {showAll ? "Collapse" : "Show all assets"}
-            {showAll ? (
-              <ChevronUp className="ml-2 h-4 w-4 shrink-0 opacity-75" />
-            ) : (
-              <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-75" />
-            )}
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}
-
 const ConnectWallet = () => {
   return (
     <Alert>
@@ -128,7 +42,7 @@ export default function IndexPage() {
     fetchBalances,
     prices,
     stakingDelegations,
-  } = useContext(AppContext)
+  } = useAppContext()
   const [sortedBalances, setSortedBalances] = useState([])
   const [showAll, setShowAll] = useState(false)
 
@@ -144,12 +58,10 @@ export default function IndexPage() {
 
   const balancesPrices = sortedBalances.map((balance: any) => {
     const normalizeSymbol = (symbol: string) => symbol.replace(/^[tg]/, "")
-
     const normalizedSymbol = normalizeSymbol(balance.symbol)
     const priceObj = prices.find(
       (price: any) => normalizeSymbol(price.symbol) === normalizedSymbol
     )
-
     return {
       ...balance,
       price: priceObj ? priceObj.price : null,
@@ -167,20 +79,18 @@ export default function IndexPage() {
         // Prioritize ZETA
         if (a.ticker === "ZETA" && a.coin_type === "Gas") return -1
         if (b.ticker === "ZETA" && b.coin_type === "Gas") return 1
-
         if (a.coin_type === "Gas" && b.coin_type !== "Gas") return -1
         if (a.coin_type !== "Gas" && b.coin_type === "Gas") return 1
         return a.chain_name < b.chain_name ? -1 : 1
       })
-      .filter((b: any) => {
-        return b.balance > 0
-      })
+      .filter((b: any) => b.balance > 0)
     setSortedBalances(balance)
   }, [balances])
 
-  const balancesTotal = balancesPrices.reduce((a: any, c: any) => {
-    return a + parseFloat(c.balance)
-  }, 0)
+  const balancesTotal = balancesPrices.reduce(
+    (a: any, c: any) => a + parseFloat(c.balance),
+    0
+  )
 
   const formatBalanceTotal = (b: string) => {
     if (parseFloat(b) > 1000) {

diff --git a/app/pools/page.tsx b/app/pools/page.tsx
@@ -1,16 +1,16 @@
 "use client"
 
 import { useContext, useEffect, useState } from "react"
+import { useAppContext } from "@/context/AppContext"
 import { formatUnits } from "viem"
 import { useAccount } from "wagmi"
 
 import { Card } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
-import { AppContext } from "@/app/index"
 
 const PoolsPage = () => {
   const { pools, balances, balancesLoading, poolsLoading, fetchPools } =
-    useContext(AppContext)
+    useAppContext()
   const [poolsSorted, setPoolsSorted] = useState<any[]>([])
   const { address, isConnected } = useAccount()
 

diff --git a/app/staking/page.tsx b/app/staking/page.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useContext, useEffect, useState } from "react"
 import Link from "next/link"
+import { useAppContext } from "@/context/AppContext"
 import { generatePostBodyBroadcast } from "@evmos/provider"
 import {
   createTxMsgBeginRedelegate,
@@ -67,7 +68,6 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { useToast } from "@/components/ui/use-toast"
-import { AppContext } from "@/app/index"
 
 const StakingPage = () => {
   const {
@@ -84,7 +84,7 @@ const StakingPage = () => {
     fetchBalances,
     observers,
     fetchObservers,
-  } = useContext(AppContext)
+  } = useAppContext()
   const [selectedValidator, setSelectedValidator] = useState<any>(null)
   const [isSending, setIsSending] = useState(false)
   const [isZetaChain, setIsZetaChain] = useState(false)