feat: start setting up UI for 1Click

.gitignore

@@ -31,4 +31,7 @@ coverage/
 *.tgz
 
 # Generated types
-src/types/defuse-contracts-types.d.ts
+src/types/defuse-contracts-types.d.ts
+
+# nix
+.direnv

example.envrc

@@ -0,0 +1 @@
+use flake

flake.nix

@@ -0,0 +1,21 @@
+{
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { nixpkgs, flake-utils, ... }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let pkgs = nixpkgs.legacyPackages.${system};
+      in {
+        devShells.default = pkgs.mkShell {
+          buildInputs = [
+            pkgs.nodejs_20
+            (pkgs.yarn.override { nodejs = pkgs.nodejs_20; })
+            pkgs.udev
+            pkgs.pkg-config
+            pkgs.jq
+          ];
+        };
+      });
+}

src/components/Asset/AssetComboIcon/index.tsx

@@ -33,7 +33,7 @@ export const AssetComboIcon = ({
         )}
       </div>
       {showChainIcon && (
-        <div className="absolute -right-[7px] bottom-0 flex justify-center items-center p-1 bg-gray-1 rounded-full border-2 border-gray-1">
+        <div className="absolute -right-[7px] -bottom-[7px] flex justify-center items-center p-1 bg-gray-1 rounded-full border-2 border-gray-1">
           {chainIcon ? (
             <img
               src={chainIcon}

src/components/Asset/AssetList.tsx

@@ -10,6 +10,7 @@ import type {
 } from "../../types/base"
 import type { SelectItemToken } from "../Modal/ModalSelectAssets"
 
+import { chainIcons } from "src/constants/blockchains"
 import { formatTokenValue } from "../../utils/format"
 import { isBaseToken } from "../../utils/token"
 import { AssetComboIcon } from "./AssetComboIcon"
@@ -20,6 +21,7 @@ type Props<T> = {
   className?: string
   accountId?: string
   handleSelectToken?: (token: SelectItemToken<T>) => void
+  showChain?: boolean
 }
 
 type Token = BaseTokenInfo | UnifiedTokenInfo
@@ -28,54 +30,60 @@ export const AssetList = <T extends Token>({
   assets,
   className,
   handleSelectToken,
+  showChain = false,
 }: Props<T>) => {
   return (
     <div className={clsx("flex flex-col", className && className)}>
-      {assets.map(({ itemId, token, selected, balance }, i) => (
-        <button
-          key={itemId}
-          type="button"
-          className={clsx(
-            "flex justify-between items-center gap-3 p-2.5 rounded-md hover:bg-gray-3",
-            { "bg-gray-3": selected }
-          )}
-          // biome-ignore lint/style/noNonNullAssertion: i is always within bounds
-          onClick={() => handleSelectToken?.(assets[i]!)}
-        >
-          <div className="relative">
-            <AssetComboIcon
-              icon={token.icon}
-              name={token.name}
-              chainName={isBaseToken(token) ? token.chainName : undefined}
-              style={
-                selected
-                  ? {
-                      mask: "radial-gradient(7px at 28px 86%, transparent 99%, rgb(255, 255, 255) 100%)",
-                    }
-                  : undefined
-              }
-            />
-            {selected && (
-              <div className="absolute bottom-1 -right-1.5 rounded-full">
-                <CheckCircle width={12} height={12} weight="fill" />
-              </div>
+      {assets.map(({ itemId, token, selected, balance }, i) => {
+        const chainIcon = isBaseToken(token)
+          ? chainIcons[token.chainName]
+          : undefined
+
+        return (
+          <button
+            key={itemId}
+            type="button"
+            className={clsx(
+              "flex justify-between items-center gap-3 p-2.5 rounded-md hover:bg-gray-3",
+              { "bg-gray-3": selected }
             )}
-          </div>
-          <div className="grow flex flex-col">
-            <div className="flex justify-between items-center">
-              <Text as="span" size="2" weight="medium">
-                {token.name}
-              </Text>
-              {renderBalance(balance)}
+            // biome-ignore lint/style/noNonNullAssertion: i is always within bounds
+            onClick={() => handleSelectToken?.(assets[i]!)}
+          >
+            <div className="relative">
+              <AssetComboIcon
+                icon={token.icon}
+                name={token.name}
+                showChainIcon={showChain && chainIcon !== undefined}
+                chainName={isBaseToken(token) ? token.chainName : undefined}
+                chainIcon={chainIcon}
+              />
+              {selected && (
+                <div className="absolute top-1 -right-1.5 rounded-full">
+                  <CheckCircle width={12} height={12} weight="fill" />
+                </div>
+              )}
             </div>
-            <div className="flex justify-between items-center text-gray-11">
-              <Text as="span" size="2">
-                {token.symbol}
-              </Text>
+            <div className="grow flex flex-col">
+              <div className="flex justify-between items-center">
+                <Text as="span" size="2" weight="medium">
+                  {token.name}
+                </Text>
+                {renderBalance(balance)}
+              </div>
+              <div className="flex justify-between items-center text-gray-11">
+                <Text as="span" size="2">
+                  {/* biome-ignore lint/nursery/useConsistentCurlyBraces: <explanation> */}
+                  {token.symbol}{" "}
+                  {showChain && isBaseToken(token)
+                    ? token.chainName.toUpperCase()
+                    : ""}
+                </Text>
+              </div>
             </div>
-          </div>
-        </button>
-      ))}
+          </button>
+        )
+      })}
     </div>
   )
 }

src/components/Modal/ModalContainer.tsx

@@ -4,11 +4,14 @@ import { ModalType } from "../../stores/modalStore"
 
 import { ModalConfirmAddPubkey } from "./ModalConfirmAddPubkey"
 import { ModalSelectAssets } from "./ModalSelectAssets"
+import { ModalSelectToken } from "./ModalSelectToken"
 
 export const ModalContainer = () => {
   const { modalType } = useModalStore((state) => state)
 
   switch (modalType) {
+    case ModalType.MODAL_SELECT_TOKEN:
+      return <ModalSelectToken />
     case ModalType.MODAL_SELECT_ASSETS:
       return <ModalSelectAssets />
     case ModalType.MODAL_CONFIRM_ADD_PUBKEY: