a

orbs-network · Nov 4, 2024 · 3514180 · 3514180
1 parent 5ceb52e
commit 3514180
Show file tree

Hide file tree

Showing 42 changed files with 1,290 additions and 763 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.41",
+    "@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/tokens/token-card.tsx b/src/components/tokens/token-card.tsx
@@ -3,14 +3,7 @@ import { Card } from "../ui/card";
 import { TokenSelect } from "./token-select";
 import { Token } from "@/types";
 import { NumericFormat } from "react-number-format";
-import {
-  format,
-  cn,
-  ErrorCodes,
-  useTokensWithBalances,
-  useTokenBalance,
-  toExactAmount,
-} from "@/lib";
+import { format, cn, ErrorCodes, useTokenBalance, toExactAmount } from "@/lib";
 import { Skeleton } from "../ui/skeleton";
 import { Button } from "../ui/button";
 import { useToExactAmount } from "@/trade/hooks";
@@ -50,7 +43,7 @@ export function TokenCard({
   amountLoading,
   inputError,
 }: TokenCardProps) {
-  const balance = useTokenBalance(selectedToken?.address);
+  const { balance } = useTokenBalance(selectedToken?.address);
   const balanceError = inputError === ErrorCodes.InsufficientBalance;
   const balanceDisplay = selectedToken
     ? format.crypto(Number(toExactAmount(balance, selectedToken.decimals)))

diff --git a/src/components/tokens/token-select.tsx b/src/components/tokens/token-select.tsx
@@ -13,7 +13,16 @@ import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Token } from "@/types";
 import { Card } from "../ui/card";
 import { useMemo, useState } from "react";
-import { format, toExactAmount, useTokensWithBalances } from "@/lib";
+import {
+  eqIgnoreCase,
+  format,
+  usePriceUsd,
+  useSortedTokens,
+  useTokenBalance,
+} from "@/lib";
+import { useToExactAmount } from "@/trade/hooks";
+import { Skeleton } from "../ui/skeleton";
+import { Virtuoso } from "react-virtuoso";
 import BN from "bignumber.js";
 
 type TokenSelectProps = {
@@ -26,49 +35,19 @@ export function TokenSelect({
   onSelectToken,
 }: TokenSelectProps) {
   const [open, setOpen] = useState(false);
-  const tokens = useTokensWithBalances().tokensWithBalances
+  const tokens = useSortedTokens();
   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) => {
-
-        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}
-          className="cursor-pointer p-4 flex items-center justify-between gap-3"
-          onClick={() => {
-            onSelectToken(t.token);
-            setOpen(false);
-          }}
-        >
-          <div className="flex items-center gap-3">
-            <Avatar>
-              <AvatarImage src={t.token.logoUrl} alt={t.token.symbol} />
-              <AvatarFallback className="bg-slate-200 dark:bg-slate-700">
-                {t.token.symbol.charAt(0)}
-              </AvatarFallback>
-            </Avatar>
-            <div className="flex flex-col">
-              <div>{t.token.symbol}</div>
-              <div className="text-sm text-slate-400">{t.token.name}</div>
-            </div>
-          </div>
-          <div>{format.crypto(Number(toExactAmount(t.balance.toString(), t.token.decimals) || '0'))}</div>
-        </Card>
-      ));
-  }, [filterInput, onSelectToken, tokens]);
+  const filteredTokens = useMemo(() => {
+    if (!filterInput) return tokens || [];
+    return (
+      tokens?.filter(
+        (t) =>
+          eqIgnoreCase(t.address, filterInput) ||
+          t.symbol.toLowerCase().includes(filterInput.toLowerCase())
+      ) || []
+    );
+  }, [tokens, filterInput]);
 
   return (
     <Dialog modal={true} open={open} onOpenChange={(o) => setOpen(o)}>
@@ -108,9 +87,64 @@ export function TokenSelect({
           />
         </DialogHeader>
         <div className="relative flex flex-1 flex-col flex-grow gap-2 overflow-y-scroll pr-3">
-          {SortedTokens}
+          <Virtuoso
+            totalCount={filteredTokens?.length}
+            overscan={10}
+            itemContent={(index) => {
+              const token = filteredTokens[index];
+
+              const onSelect = () => {
+                onSelectToken(token);
+                setOpen(false);
+              };
+
+              return <TokenDisplay token={token} onSelect={onSelect} />;
+            }}
+          />
         </div>
       </DialogContent>
     </Dialog>
   );
 }
+
+const TokenDisplay = ({
+  token: t,
+  onSelect,
+}: {
+  token: Token;
+  onSelect: () => void;
+}) => {
+  const { balance, isLoading } = useTokenBalance(t.address);
+  const usd = usePriceUsd(t.address).data || 0;
+  const balanceUi = useToExactAmount(balance, t.decimals) || "0";
+  const usdAmount = BN(balanceUi).multipliedBy(usd).toFixed()
+
+  return (
+    <Card
+      key={t.address}
+      className="cursor-pointer p-4 flex items-center justify-between gap-3 mb-3"
+      onClick={onSelect}
+    >
+      <div className="flex items-center gap-3">
+        <Avatar>
+          <AvatarImage src={t.logoUrl} alt={t.symbol} />
+          <AvatarFallback className="bg-slate-200 dark:bg-slate-700">
+            {t.symbol.charAt(0)}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col">
+          <div>{t.symbol}</div>
+          <div className="text-sm text-slate-400">{t.name}</div>
+        </div>
+      </div>
+      {isLoading ? (
+        <Skeleton style={{ width: 70, height: 20 }} />
+      ) : (
+        <div className='flex flex-col items-end'>
+          <p>{format.crypto(Number(balanceUi))}</p>
+          <p className='opacity-70' style={{fontSize: 13}}>${format.crypto(Number(usdAmount))}</p>
+        </div>
+      )}
+    </Card>
+  );
+};
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -3,11 +3,11 @@ export * from './networks'
 export * from './useGetRequiresApproval'
 export * from './utils'
 export * from './useHandleInputError'
-export * from './useTokensWithBalances'
+export * from './useTokens'
 export * from './useDefaultTokens'
 export * from './useDebounce'
 export * from './useParaswap'
 export * from './wagmi-config'
-export * from './useTokenList'
+export * from './useTokens'
 export * from './useWrapOrUnwrapOnly'
 export * from './usePriceUsd'