fix tracking, deposit (#38)

app/page.tsx

@@ -2,11 +2,13 @@
 
 import { useEffect, useState } from "react"
 import { useBalanceContext } from "@/context/BalanceContext"
+import { useCCTXsContext } from "@/context/CCTXsContext"
 import { usePricesContext } from "@/context/PricesContext"
 import { useStakingContext } from "@/context/StakingContext"
 import { RefreshCw } from "lucide-react"
 import { useAccount } from "wagmi"
 
+import { useZetaChainClient } from "@/hooks/useZetaChainClient"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -36,9 +38,13 @@ const ConnectWallet = () => {
   )
 }
 
+const universalSwapContract = "0xb459F14260D1dc6484CE56EB0826be317171e91F"
+
 export default function IndexPage() {
+  const { client } = useZetaChainClient()
   const { stakingDelegations } = useStakingContext()
   const { prices } = usePricesContext()
+  const { trackTransaction } = useCCTXsContext()
 
   const { balances, balancesLoading, balancesRefreshing, fetchBalances } =
     useBalanceContext()
@@ -132,7 +138,12 @@ export default function IndexPage() {
           )}
         </div>
         <div className="mr-4">
-          <Swap />
+          <Swap
+            contract={universalSwapContract}
+            client={client}
+            track={trackTransaction}
+            balances={balances}
+          />
         </div>
       </div>
     </div>

components/Swap/Layout.tsx

@@ -29,23 +29,17 @@ interface SwapLayoutProps {
   sendType: string | null
   sourceAmount: any
   setSourceAmount: (value: any) => any
-  sourceTokenOpen: boolean
-  setSourceTokenOpen: (open: boolean) => void
   sourceTokenSelected: any
   balancesLoading: boolean
   sourceBalances: any[]
   setSourceToken: (token: any) => void
   destinationAmount: string
   destinationAmountIsLoading: boolean
-  destinationTokenOpen: boolean
-  setDestinationTokenOpen: (open: boolean) => void
   destinationTokenSelected: any
   destinationBalances: any[]
   setDestinationToken: (token: any) => void
   computeSendType: (sourceToken: any, destinationToken: any) => string | null
   addressSelected: any
-  customAddressOpen: boolean
-  setCustomAddressOpen: (open: boolean) => void
   canChangeAddress: boolean
   isAddressSelectedValid: boolean
   formatAddress: (address: string) => string
@@ -59,8 +53,6 @@ interface SwapLayoutProps {
     symbol: string
     formatted: string
   } | null
-  isFeeOpen: boolean
-  setIsFeeOpen: (open: boolean) => void
   isRightChain: boolean
   handleSend: (sendType: any) => void
   sendDisabled: boolean
@@ -76,23 +68,17 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
   sendType,
   sourceAmount,
   setSourceAmount,
-  sourceTokenOpen,
-  setSourceTokenOpen,
   sourceTokenSelected,
   balancesLoading,
   sourceBalances,
   setSourceToken,
   destinationAmount,
   destinationAmountIsLoading,
-  destinationTokenOpen,
-  setDestinationTokenOpen,
   destinationTokenSelected,
   destinationBalances,
   setDestinationToken,
   computeSendType,
   addressSelected,
-  customAddressOpen,
-  setCustomAddressOpen,
   canChangeAddress,
   isAddressSelectedValid,
   formatAddress,
@@ -101,8 +87,6 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
   isCustomAddressValid,
   saveCustomAddress,
   crossChainFee,
-  isFeeOpen,
-  setIsFeeOpen,
   isRightChain,
   handleSend,
   sendDisabled,
@@ -112,6 +96,16 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
   isLoading,
   pendingChainId,
 }) => {
+  const [sourceTokenOpen, setSourceTokenOpen] = useState(false)
+  const [destinationTokenOpen, setDestinationTokenOpen] = useState(false)
+  const [isFeeOpen, setIsFeeOpen] = useState(false)
+  const [customAddressOpen, setCustomAddressOpen] = useState(false)
+
+  const confirmCustomAddress = () => {
+    saveCustomAddress()
+    setCustomAddressOpen(false)
+  }
+
   return (
     <div className="shadow-none md:shadow-xl p-0 md:px-5 md:py-7 rounded-2xl md:shadow-gray-100 mb-10">
       <h1 className="text-2xl font-bold leading-tight tracking-tight mt-6 mb-4 ml-2">
@@ -318,7 +312,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
                     disabled={!isCustomAddressValid}
                     size="icon"
                     variant="outline"
-                    onClick={saveCustomAddress}
+                    onClick={confirmCustomAddress}
                   >
                     <Check className="h-4 w-4" strokeWidth={3} />
                   </Button>

components/Swap/hooks/useCrossChainFee.ts

@@ -1,19 +1,16 @@
 import { useEffect, useState } from "react"
-import { useFeesContext } from "@/context/FeesContext"
-import { utils } from "ethers"
+import { ethers, utils } from "ethers"
 
-import { roundNumber } from "@/lib/utils"
-import { useZetaChainClient } from "@/hooks/useZetaChainClient"
+import { computeSendType } from "@/components/Swap/hooks/useSendType"
 
+import { roundNumber } from "../lib/utils"
 import type { CrossChainFee, Token } from "./types"
 
 const useCrossChainFee = (
   sourceTokenSelected: Token | null,
   destinationTokenSelected: Token | null,
-  sendType: string | null
+  client: any
 ) => {
-  const { fees } = useFeesContext()
-  const { client } = useZetaChainClient()
   const [crossChainFee, setCrossChainFee] = useState<CrossChainFee | null>(null)
   const [loading, setLoading] = useState<boolean>(false)
 
@@ -22,10 +19,15 @@ const useCrossChainFee = (
       setLoading(true)
       setCrossChainFee(null)
       try {
-        const fee = await getCrossChainFee(
+        const st = computeSendType(
           sourceTokenSelected,
           destinationTokenSelected
         )
+        const fee = await getCrossChainFee(
+          sourceTokenSelected,
+          destinationTokenSelected,
+          st
+        )
         setCrossChainFee(fee)
       } catch (error) {
         console.error("Error fetching cross-chain fee:", error)
@@ -37,23 +39,35 @@ const useCrossChainFee = (
     if (sourceTokenSelected && destinationTokenSelected) {
       fetchCrossChainFee()
     }
-  }, [sourceTokenSelected, destinationTokenSelected, sendType])
+  }, [sourceTokenSelected, destinationTokenSelected])
 
   const getCrossChainFee = async (
     s: Token | null,
-    d: Token | null
+    d: Token | null,
+    sendType: string | null
   ): Promise<CrossChainFee | null> => {
     if (!sendType || !s || !d) return null
 
     if (["crossChainZeta"].includes(sendType)) {
-      if (!fees) return null
       const dest = d.chain_name
+      console.log("feess....")
+      console.log("sendType", sendType)
+
+      const API = client.getEndpoint("cosmos-http", `zeta_testnet`)
+      const url = `${API}/zeta-chain/crosschain/convertGasToZeta?chainId=${
+        d.chain_id
+      }&gasLimit=${500000}`
+      const response = await fetch(url)
+      if (!response.ok) {
+        return null
+      }
+      const data = await response.json()
+      const gasFee = ethers.BigNumber.from(data.outboundGasInZeta)
+      const protocolFee = ethers.BigNumber.from(data.protocolFeeInZeta)
+      const totalFee = utils.formatUnits(gasFee.add(protocolFee), 18)
+
       const toZetaChain = dest === "zeta_testnet"
-      const fee = fees["messaging"].find(
-        (f: { chainID: number }) => f.chainID === d.chain_id
-      )
-      if (!fee) return null
-      const amount = toZetaChain ? "0" : fee.totalFee
+      const amount = toZetaChain ? "0" : totalFee
       const formatted =
         parseFloat(amount) === 0
           ? "Fee: 0 ZETA"

components/Swap/hooks/useDestinationAddress.ts

@@ -15,7 +15,6 @@ const useDestinationAddress = (
   const [customAddressSelected, setCustomAddressSelected] = useState<
     string | null
   >(null)
-  const [customAddressOpen, setCustomAddressOpen] = useState(false)
   const [isCustomAddressValid, setIsCustomAddressValid] = useState(false)
 
   useEffect(() => {
@@ -64,7 +63,6 @@ const useDestinationAddress = (
     if (isCustomAddressValid) {
       setCustomAddressSelected(customAddress)
       setCustomAddress(customAddress)
-      setCustomAddressOpen(false)
     }
   }
 
@@ -94,8 +92,6 @@ const useDestinationAddress = (
   return {
     addressSelected,
     isAddressSelectedValid,
-    customAddressOpen,
-    setCustomAddressOpen,
     canChangeAddress: true,
     customAddress,
     setCustomAddress,

components/Swap/hooks/useDestinationAmount.ts

@@ -1,25 +1,22 @@
 import { useEffect, useState } from "react"
-import { useBalanceContext } from "@/context/BalanceContext"
 import { utils } from "ethers"
 import debounce from "lodash/debounce"
 
-import { roundNumber } from "@/lib/utils"
-import { useZetaChainClient } from "@/hooks/useZetaChainClient"
-
+import { roundNumber } from "../lib/utils"
 import type { Balance, CrossChainFee, Token } from "./types"
 
 const useDestinationAmount = (
   sourceTokenSelected: Token | null,
   destinationTokenSelected: Token | null,
   sourceAmount: string,
   crossChainFee: CrossChainFee | null,
-  sendType: string | null
+  sendType: string | null,
+  balances: any,
+  client: any
 ) => {
-  const { client } = useZetaChainClient()
   const [destinationAmount, setDestinationAmount] = useState<string>("")
   const [destinationAmountIsLoading, setDestinationAmountIsLoading] =
     useState<boolean>(false)
-  const { balances } = useBalanceContext()
 
   useEffect(() => {
     setDestinationAmount("")