Merge pull request #18 from teller-protocol/user-tokens-first

#patch: User tokens first
teller-protocol · Nov 4, 2024 · 85491b2 · 85491b2
2 parents aa02ba1 + 8d23b0a
commit 85491b2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 26 deletions.
diff --git a/src/components/TokenDropdown/TokenDropdown.tsx b/src/components/TokenDropdown/TokenDropdown.tsx
@@ -1,10 +1,8 @@
 import { useState } from "react";
 import cx from "classnames";
-
 import { UserToken } from "../../hooks/useGetUserTokens";
 import TokenLogo from "../TokenLogo";
 import defaultTokenImage from "../../assets/generic_token-icon.svg";
-
 import "./tokenDropdown.scss";
 import { useGetBorrowSectionContext } from "../../pages/BorrowSection/BorrowSectionContext";
 import useOutsideClick from "../../hooks/useOutsideClick";
@@ -53,6 +51,15 @@ const TokenDropdown: React.FC<TokenDropdownProps> = ({
 
   const ref = useOutsideClick(() => setIsOpen(false));
 
+  const sortedTokens = [
+    ...tokens
+      .filter((token) => parseFloat(token.balance) > 0)
+      .sort((a, b) => a.symbol.localeCompare(b.symbol)),
+    ...tokens
+      .filter((token) => parseFloat(token.balance) <= 0)
+      .sort((a, b) => a.symbol.localeCompare(b.symbol)),
+  ];
+
   return (
     <div className="token-dropdown" ref={ref}>
       <div
@@ -64,22 +71,19 @@ const TokenDropdown: React.FC<TokenDropdownProps> = ({
           <Icon icon="clarity:caret-line" />
         </div>
       </div>
-      {isOpen && tokens.length > 0 && (
+      {isOpen && sortedTokens.length > 0 && (
         <div className="token-dropdown--tokens">
-          {tokens
-            .sort((a, b) => a.symbol.localeCompare(b.symbol))
-            .map((token) => ( 
-              <TokenDropdownRow
-                token={token}
-                key={token.address}
-                onClick={onTokenDropdownRowClick}
-              />
-            ))
-          }
+          {sortedTokens.map((token) => (
+            <TokenDropdownRow
+              token={token}
+              key={token.address}
+              onClick={onTokenDropdownRowClick}
+            />
+          ))}
         </div>
       )}
     </div>
   );
 };
 
-export default TokenDropdown;
+export default TokenDropdown;
diff --git a/src/pages/BorrowSection/CollateralTokenList/CollateralTokenList.tsx b/src/pages/BorrowSection/CollateralTokenList/CollateralTokenList.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import CollateralTokenRow from "../../../components/CollateralTokenRow";
 import Loader from "../../../components/Loader";
 import { UserToken } from "../../../hooks/useGetUserTokens";
@@ -23,25 +24,32 @@ const CollateralTokenList: React.FC = () => {
     setSelectedCollateralToken(token);
   };
 
+  const sortedTokens = [
+    ...tokensWithCommitments
+      .filter((token) => parseFloat(token.balance) > 0)
+      .sort((a, b) => a.symbol.localeCompare(b.symbol)),
+    ...tokensWithCommitments
+      .filter((token) => parseFloat(token.balance) <= 0)
+      .sort((a, b) => a.symbol.localeCompare(b.symbol)),
+  ];
+
   return (
     <div className="collateral-token-list">
       {isSupportedChain ? (
         <div>
           <div className="section-title">
-            Select token collateral for deposit:{" "}
+            Select token collateral for deposit:
           </div>
           {loading ? (
             <Loader />
-          ) : tokensWithCommitments.length > 0 ? (
-            tokensWithCommitments
-              .sort((a, b) => a.symbol.localeCompare(b.symbol))
-              .map((token) => (
-                <CollateralTokenRow
-                  token={token}
-                  onClick={onCollateralTokenSelected}
-                  key={token.address.toString()}
-                />
-              ))
+          ) : sortedTokens.length > 0 ? (
+            sortedTokens.map((token) => (
+              <CollateralTokenRow
+                token={token}
+                onClick={() => onCollateralTokenSelected(token)}
+                key={token.address.toString()}
+              />
+            ))
           ) : (
             <div className="section-title">No tokens available</div>
           )}
@@ -53,4 +61,4 @@ const CollateralTokenList: React.FC = () => {
   );
 };
 
-export default CollateralTokenList;
+export default CollateralTokenList;