Support BTC DAI and LINK tokens (#792)

* Support BTC DAI and LINK tokens

* Fix failed to build

Author: JayJay1024

apps/web/public/images/token/btc.png

@@ -1,6 +1,18 @@
+import {
+  FloatingPortal,
+  offset,
+  useClick,
+  useDismiss,
+  useFloating,
+  useHover,
+  useInteractions,
+  useTransitionStyles,
+} from "@floating-ui/react";
 import { TokenCategory, TokenSymbol } from "../types";
 import { getTokenLogoSrc } from "../utils";
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import { safePolygon } from "@floating-ui/react";
+import { useMediaQuery } from "../hooks";
 
 interface Value {
   logo: string;
@@ -17,13 +29,17 @@ interface Props {
 export default function TransferTokenSelect({ value, options, onChange }: Props) {
   const [hoveIndex, setHoverIndex] = useState(-1);
 
+  const isPC = useMediaQuery("lg");
+  const nonMoreTokensAmount = useMemo(() => (isPC ? 5 : 4), [isPC]);
+
   return (
     <div className="gap-medium px-medium flex items-center">
       <TokenImage token={value} active />
       <span className="text-base font-bold text-white">{value.symbol}</span>
       <div className="gap-medium group ml-2 flex items-center">
         {options
           .filter((option) => option.symbol !== value.symbol)
+          .slice(0, nonMoreTokensAmount)
           .map((option, index) => (
             <TokenImage
               key={option.symbol}
@@ -34,6 +50,12 @@ export default function TransferTokenSelect({ value, options, onChange }: Props)
               onHoverChange={setHoverIndex}
             />
           ))}
+        {nonMoreTokensAmount + 1 < options.length && (
+          <MoreTokens
+            options={options.filter((option) => option.symbol !== value.symbol).slice(nonMoreTokensAmount)}
+            onClick={onChange}
+          />
+        )}
       </div>
     </div>
   );
@@ -79,3 +101,59 @@ function TokenImage({
     />
   );
 }
+
+function MoreTokens({ options, onClick = () => undefined }: { options: Value[]; onClick?: (token: Value) => void }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, context, floatingStyles } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset(4)],
+  });
+  const { styles, isMounted } = useTransitionStyles(context, {
+    initial: { transform: "translateY(-10px)", opacity: 0 },
+    open: { transform: "translateY(0)", opacity: 1 },
+    close: { transform: "translateY(-10px)", opacity: 0 },
+  });
+  const hover = useHover(context, { handleClose: safePolygon() });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, click, dismiss]);
+
+  return (
+    <>
+      <img
+        width={36}
+        height={36}
+        src={getTokenLogoSrc("more.svg")}
+        alt="More tokens"
+        className={`transition-opacity duration-200 hover:cursor-pointer hover:opacity-80 ${isOpen ? "opacity-80" : "opacity-50"}`}
+        ref={refs.setReference}
+        {...getReferenceProps()}
+      />
+
+      {isMounted && (
+        <FloatingPortal>
+          <div style={floatingStyles} ref={refs.setFloating} {...getFloatingProps()} className="z-20">
+            <div
+              className="bg-app-bg flex flex-col gap-2 rounded-xl border border-white/20 px-3 py-2"
+              style={styles}
+              onClick={() => setIsOpen(false)}
+            >
+              {options.map((option) => (
+                <img
+                  key={option.symbol}
+                  width={36}
+                  height={36}
+                  src={getTokenLogoSrc(option.logo)}
+                  className="rounded-full opacity-60 transition-opacity duration-200 hover:cursor-pointer hover:opacity-80"
+                  onClick={() => onClick(option)}
+                />
+              ))}
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}

apps/web/public/images/token/link.png

@@ -111,7 +111,6 @@ export default function TransferProvider({ children }: PropsWithChildren<unknown
       const _availableTokenOptions = tokenOptions.filter((tokenOpt) =>
         allTokenKeys.includes(tokenOpt.category.toUpperCase() as Uppercase<string>),
       );
-
       if (!_availableTokenOptions.some(({ category }) => category === tokenRef.current.category)) {
         setToken(_availableTokenOptions[0]);
       }

apps/web/public/images/token/more.svg

@@ -1,17 +1,20 @@
 import { ChainConfig, Token, TokenCategory, TokenOption } from "../types";
 import { getChainConfig, getChainConfigs, isMainnet } from ".";
 
-// ['ETH', 'RING', 'USDT', 'USDC', 'CRAB', 'PINK']
+// ['ETH', 'RING', 'USDT', 'USDC', 'BTC', 'DAI', 'LINK', 'CRAB', 'PINK']
 const allTokenOptions: Record<Exclude<TokenCategory, "others">, TokenOption> = {
   CRAB: { logo: "crab.png", category: "CRAB", symbol: "CRAB" },
   ETH: { logo: "eth.png", category: "ETH", symbol: "ETH" },
   RING: { logo: "ring.png", category: "RING", symbol: "RING" },
   USDC: { logo: "usdc.png", category: "USDC", symbol: "USDC" },
   USDT: { logo: "usdt.png", category: "USDT", symbol: "USDT" },
   PINK: { logo: "pink.png", category: "PINK", symbol: "PINK" },
+  LINK: { logo: "link.png", category: "LINK", symbol: "LINK" },
+  DAI: { logo: "xdai.png", category: "DAI", symbol: "DAI" },
+  BTC: { logo: "btc.png", category: "BTC", symbol: "BTC" },
 };
 const sortedTokenCategories: Exclude<TokenCategory, "others">[] = isMainnet()
-  ? ["USDC", "USDT", "ETH", "RING", "CRAB", "PINK"]
+  ? ["USDC", "USDT", "ETH", "BTC", "DAI", "LINK", "RING", "CRAB", "PINK"]
   : ["USDC", "USDT", "ETH", "RING", "CRAB"];
 const availableTokenCategories = new Set<TokenCategory>();
 const sourceChainOptions = new Map<TokenCategory, ChainConfig[]>();