a

orbs-network · Oct 30, 2024 · 5ceb52e · 5ceb52e
1 parent f677957
commit 5ceb52e
Show file tree

Hide file tree

Showing 18 changed files with 1,215 additions and 1,195 deletions.
diff --git a/src/components/swap-details.tsx b/src/components/swap-details.tsx
diff --git a/src/components/tokens/token-card.tsx b/src/components/tokens/token-card.tsx
@@ -1,72 +1,75 @@
-import { WalletIcon } from 'lucide-react'
-import { Card } from '../ui/card'
-import { TokenSelect } from './token-select'
-import { Token, TokensWithBalances } from '@/types'
-import { NumericFormat } from 'react-number-format'
+import { WalletIcon } from "lucide-react";
+import { Card } from "../ui/card";
+import { TokenSelect } from "./token-select";
+import { Token } from "@/types";
+import { NumericFormat } from "react-number-format";
 import {
   format,
   cn,
-  fromBigNumber,
   ErrorCodes,
-} from '@/lib'
-import { Skeleton } from '../ui/skeleton'
-import { Button } from '../ui/button'
-import { useToExactAmount } from '@/trade/hooks'
-import BN from 'bignumber.js'
+  useTokensWithBalances,
+  useTokenBalance,
+  toExactAmount,
+} from "@/lib";
+import { Skeleton } from "../ui/skeleton";
+import { Button } from "../ui/button";
+import { useToExactAmount } from "@/trade/hooks";
+import BN from "bignumber.js";
 function getTextSize(amountLength: number) {
   if (amountLength > 16) {
-    return 'text-xl'
+    return "text-xl";
   }
 
   if (amountLength > 12 && amountLength <= 16) {
-    return 'text-2xl'
+    return "text-2xl";
   }
 
-  return 'text-4xl'
+  return "text-4xl";
 }
 
 export type TokenCardProps = {
-  label: string
-  amount: string
-  amountUsd?: string
-  balance: any
-  selectedToken: Token
-  tokens: TokensWithBalances
-  onSelectToken: (token: Token) => void
-  isAmountEditable?: boolean
-  onValueChange?: (value: string) => void
-  amountLoading?: boolean
-  inputError?: string | null
-}
+  label: string;
+  amount: string;
+  amountUsd?: string;
+  selectedToken: Token | null;
+  onSelectToken: (token: Token) => void;
+  isAmountEditable?: boolean;
+  onValueChange?: (value: string) => void;
+  amountLoading?: boolean;
+  inputError?: string | null;
+};
 
 export function TokenCard({
   label,
   amount,
   amountUsd,
-  balance,
   selectedToken,
-  tokens,
   onSelectToken,
   onValueChange,
   isAmountEditable = true,
   amountLoading,
   inputError,
 }: TokenCardProps) {
-
-  const balanceError = inputError === ErrorCodes.InsufficientBalance
+  const balance = useTokenBalance(selectedToken?.address);
+  const balanceError = inputError === ErrorCodes.InsufficientBalance;
   const balanceDisplay = selectedToken
-    ? format.crypto(fromBigNumber(balance, selectedToken.decimals))
-    : '0'
+    ? format.crypto(Number(toExactAmount(balance, selectedToken.decimals)))
+    : "0";
 
-    const maxBalance = useToExactAmount(balance, selectedToken?.decimals)
-  const halfBalance = useToExactAmount(BN(balance || 0).dividedBy(2).toString(), selectedToken?.decimals)
+  const maxBalance = useToExactAmount(balance, selectedToken?.decimals);
+  const halfBalance = useToExactAmount(
+    BN(balance || 0)
+      .dividedBy(2)
+      .toString(),
+    selectedToken?.decimals
+  );
 
   return (
     <Card
       className={cn(
-        'bg-slate-50 dark:bg-slate-900 p-4 flex flex-col gap-4',
+        "bg-slate-50 dark:bg-slate-900 p-4 flex flex-col gap-4",
         balanceError &&
-          'mix-blend-multiply bg-red-50 dark:mix-blend-screen dark:bg-red-950'
+          "mix-blend-multiply bg-red-50 dark:mix-blend-screen dark:bg-red-950"
       )}
     >
       <div className="flex justify-between items-center">
@@ -97,7 +100,7 @@ export function TokenCard({
         {amountLoading ? (
           <Skeleton className="h-10 w-[250px]" />
         ) : (
-          <div className={cn(getTextSize(amount?.length), 'w-full')}>
+          <div className={cn(getTextSize(amount?.length), "w-full")}>
             <NumericFormat
               className="bg-transparent w-full min-w-0 outline-none"
               value={amount}
@@ -113,8 +116,7 @@ export function TokenCard({
         )}
         <div>
           <TokenSelect
-            selectedToken={selectedToken}
-            tokens={tokens}
+            selectedToken={selectedToken || undefined}
             onSelectToken={onSelectToken}
           />
         </div>
@@ -126,7 +128,7 @@ export function TokenCard({
           </div>
         ) : (
           <div className="text-gray-500 dark:text-gray-400 text-lg">
-            {format.dollar(Number(amountUsd || '0'))}
+            {format.dollar(Number(amountUsd || "0"))}
           </div>
         )}
         <div className="flex gap-2 items-center text-gray-500 dark:text-gray-400 text-lg">
@@ -135,5 +137,5 @@ export function TokenCard({
         </div>
       </div>
     </Card>
-  )
+  );
 }
diff --git a/src/components/tokens/token-select.tsx b/src/components/tokens/token-select.tsx
@@ -10,38 +10,40 @@ import {
 } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Token, TokensWithBalances } from "@/types";
+import { Token } from "@/types";
 import { Card } from "../ui/card";
 import { useMemo, useState } from "react";
-import { fromBigNumber } from "@/lib";
+import { format, toExactAmount, useTokensWithBalances } from "@/lib";
+import BN from "bignumber.js";
 
 type TokenSelectProps = {
   selectedToken: Token | undefined;
-  tokens: TokensWithBalances;
   onSelectToken: (token: Token) => void;
 };
 
 export function TokenSelect({
   selectedToken,
-  tokens,
   onSelectToken,
 }: TokenSelectProps) {
   const [open, setOpen] = useState(false);
+  const tokens = useTokensWithBalances().tokensWithBalances
   const [filterInput, setFilterInput] = useState("");
 
   const SortedTokens = useMemo(() => {
+    if(!tokens) return null;
     return Object.values(tokens)
       .filter((t) => {
         return (
           t.token.symbol.toLowerCase().includes(filterInput.toLowerCase()) ||
           t.token.address.toLowerCase().includes(filterInput.toLowerCase())
         );
       })
-      .sort(
-        (a, b) =>
-          fromBigNumber(b.balance, b.token.decimals) -
-          fromBigNumber(a.balance, a.token.decimals)
-      )
+      .sort((a, b) => {
+
+        const balanceA = BN(toExactAmount(a.balance.toString(), a.token.decimals));
+        const balanceB = BN(toExactAmount(b.balance.toString(), b.token.decimals));
+        return balanceB.minus(balanceA).toNumber();
+      })
       .map((t) => (
         <Card
           key={t.token.address}
@@ -63,7 +65,7 @@ export function TokenSelect({
               <div className="text-sm text-slate-400">{t.token.name}</div>
             </div>
           </div>
-          <div>{fromBigNumber(t.balance, t.token.decimals).toFixed(5)}</div>
+          <div>{format.crypto(Number(toExactAmount(t.balance.toString(), t.token.decimals) || '0'))}</div>
         </Card>
       ));
   }, [filterInput, onSelectToken, tokens]);

diff --git a/src/lib/useGetRequiresApproval.ts b/src/lib/useGetRequiresApproval.ts
@@ -3,7 +3,7 @@ import { Address, erc20Abi } from 'viem'
 
 /* Determines whether user needs tp approve allowance for quoted token */
 export function useGetRequiresApproval(
-  contractAddress: Address,
+  contractAddress?: Address,
   inTokenAddress = '',
   inAmount = ''
 ) {

diff --git a/src/lib/useHandleInputError.ts b/src/lib/useHandleInputError.ts
@@ -1,10 +1,10 @@
-import { ErrorCodes, fromBigNumber } from "@/lib/utils";
+import { ErrorCodes, toExactAmount } from "@/lib/utils";
 import { Token } from "@/types";
 import { useMemo } from "react";
 import {
   useTokenBalance,
-  useTokensWithBalances,
 } from "./useTokensWithBalances";
+import BN from "bignumber.js";
 
 /* Handles amount input errors */
 
@@ -15,18 +15,15 @@ export function useInputError({
   inToken: Token | null;
   inputAmount: string;
 }) {
-  const tokensWithBalances = useTokensWithBalances();
   const tokenBalance = useTokenBalance(inToken?.address);
   return useMemo(() => {
-    if (!inToken || !tokensWithBalances) return;
     if (!inputAmount) {
       return ErrorCodes.EnterAmount;
     }
-    const value = Number(inputAmount);
-    const balance = fromBigNumber(tokenBalance, inToken.decimals);
+    const balance = toExactAmount(tokenBalance, inToken?.decimals);
 
-    if (value > balance) {
+    if (BN(inputAmount).gt(balance)) {
       return ErrorCodes.InsufficientBalance;
     }
-  }, [inputAmount, inToken, tokenBalance, tokensWithBalances]);
+  }, [inputAmount, inToken, tokenBalance]);
 }
diff --git a/src/lib/useParaswap.ts b/src/lib/useParaswap.ts
@@ -35,10 +35,12 @@ export const useParaswapQuote = ({
   inToken,
   outToken,
   inAmount,
+  refetchInterval = 30_000,
 }: {
   inToken?: string
   outToken?: string
   inAmount?: string
+  refetchInterval?: number
 }) => {
   const paraswap = useParaswap()
   const { chainId } = useAccount()
@@ -72,7 +74,7 @@ export const useParaswapQuote = ({
       return dexQuote
     },
     enabled: !!inToken && !!outToken && Number(inAmount) > 0,
-    refetchInterval: 30_000,
+    refetchInterval,
   })
 }
 

diff --git a/src/lib/usePriceUsd.ts b/src/lib/usePriceUsd.ts
@@ -1,11 +1,13 @@
 import { networks, isNativeAddress } from '@/lib'
 import { useQuery } from '@tanstack/react-query'
+import { useAccount } from 'wagmi'
 
-export const usePriceUsd = (chainId: number, address?: string) => {
+export const usePriceUsd = (address?: string) => {
+  const {chainId} = useAccount()
   return useQuery<number>({
     queryKey: ['usePriceUSD', chainId, address],
     queryFn: async () => {
-      if (!address) {
+      if (!address || !chainId) {
         return 0
       }