Merge pull request #7 from orbs-network/refactor

Refactor
orbs-network · Nov 4, 2024 · 9f4b5a0 · 9f4b5a0
2 parents c7f7dbc + 1e663b5
commit 9f4b5a0
Show file tree

Hide file tree

Showing 51 changed files with 2,792 additions and 5,194 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/orbslogo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Orbs Demo</title>
+    <title>Orbs Playground</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@ethersproject/hash": "^5.7.0",
-    "@orbs-network/liquidity-hub-sdk": "^1.0.40",
+    "@orbs-network/liquidity-hub-sdk": "^1.0.44",
     "@orbs-network/swap-ui": "^0.0.14",
     "@orbs-network/twap-sdk": "^2.0.38",
     "@paraswap/sdk": "^6.10.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,35 @@
-import { Header } from '@/components/header'
-import { Trade } from './trade/trade'
+import { Header } from "@/components/header";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
+import { SwapLiquidityHub } from "./trade/liquidity-hub/liquidity-hub-swap";
+import { Settings } from "./trade/settings";
+import { SwapTwap, SwapLimit } from "./trade/twap/twap";
 
 export function App() {
   return (
     <>
       <Header />
       <div className="flex justify-center h-full py-32">
-        <Trade />
+        <div className="max-w-lg w-full px-4">
+          <h1 className="text-5xl font-bold mb-8">Trade</h1>
+          <Settings />
+          <Tabs defaultValue="swap" className="w-full">
+            <TabsList>
+              <TabsTrigger value="swap">Swap</TabsTrigger>
+              <TabsTrigger value="twap">TWAP</TabsTrigger>
+              <TabsTrigger value="limit">Limit</TabsTrigger>
+            </TabsList>
+            <TabsContent value="swap">
+              <SwapLiquidityHub />
+            </TabsContent>
+            <TabsContent value="twap">
+              <SwapTwap />
+            </TabsContent>
+            <TabsContent value="limit">
+              <SwapLimit />
+            </TabsContent>
+          </Tabs>
+        </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/src/assets/orbslogo.svg b/src/assets/orbslogo.svg
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,12 +1,13 @@
 import { ThemeToggle } from '@/components/theme-toggle'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
+import Logo from '@/assets/orbslogo.svg'
 
 export function Header() {
   return (
     <div className="p-4 flex w-full justify-between items-center fixed dark:bg-slate-950 ">
       <div className="flex gap-2 items-center">
-        <img src="/dex-playground/orbslogo.svg" className="w-6 h-6" />
-        <span>Orbs Demo</span>
+        <img src={Logo} className="w-6 h-6" />
+        <span>Orbs Playground</span>
       </div>
       <div className="flex gap-4">
         <ThemeToggle />

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,68 @@
-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 {
-  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'
+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, ErrorCodes, 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 +93,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 +109,7 @@ export function TokenCard({
         )}
         <div>
           <TokenSelect
-            selectedToken={selectedToken}
-            tokens={tokens}
+            selectedToken={selectedToken || undefined}
             onSelectToken={onSelectToken}
           />
         </div>
@@ -126,7 +121,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 +130,5 @@ export function TokenCard({
         </div>
       </div>
     </Card>
-  )
+  );
 }