@gluwa/connect-kit 0.1.0-next.3 → 0.2.0-next.10

package/src/hooks/useConnectTimeout.ts

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type ConnectorId } from '../types';
+
+// MM / CC 폴백용 기본 타임아웃. (CC 는 원칙적으로 서버 push 로 만료가 오지만,
+// 서버 값이 없거나 신호가 유실된 경우를 대비한 폴백 용도로도 쓸 수 있음.)
+export const DEFAULT_CONNECT_TIMEOUT_MS = 300_000;
+
+interface UseConnectTimeoutParams {
+  /** 현재 연결 시도 중인 커넥터. null = 유휴 상태. */
+  connectorId: ConnectorId | null;
+  /** 타임아웃 감시 활성화 여부 — pending/QR 표시 중일 때 true. */
+  active: boolean;
+  /** Wagmi connect promise가 실제로 대기 중인지 여부. */
+  isConnecting: boolean;
+  /**
+   * 외부 이벤트 기반 실패/만료 신호. 값이 증가할 때마다 연결 실패로 간주.
+   * - CC: dialog 가 connector 의 `session_expired`(서버 push) 를 받아 올림.
+   * - MM: connect promise reject.
+   * - WC: dialog 가 WC connect promise reject(프로토콜 ~5분 만료 등) 를 받아 올림.
+   */
+  expiredSignal?: number;
+  /** "Try Again" 시 실행할 재연결 로직 (dialog 가 주입). */
+  onRetry?: () => void;
+}
+
+interface UseConnectTimeoutResult {
+  /** 타임아웃 발생 여부 — true 면 dialog 가 <Timeout> 을 렌더. */
+  timedOut: boolean;
+  /** 다른 지갑 연결을 시작하기 전에 이전 타임아웃 상태를 즉시 초기화. */
+  reset: () => void;
+  /** "Try Again" 버튼에 연결할 함수 — 상태 리셋 + onRetry 실행. */
+  retry: () => void;
+}
+
+/**
+ * 커넥터별로 타임아웃 신호원을 분기해 하나의 `timedOut` 으로 수렴시키는 훅.
+ * - CC: 서버 push (`OnSessionExpired` → connector → expiredSignal).
+ * - MM: 네이티브 타임아웃 없음 → client 타이머(DEFAULT_CONNECT_TIMEOUT_MS).
+ * - WC: 프로토콜 자체 ~5분 proposal reject → connect promise reject → expiredSignal.
+ */
+export const useConnectTimeout = ({
+  connectorId,
+  active,
+  isConnecting,
+  expiredSignal = 0,
+  onRetry,
+}: UseConnectTimeoutParams): UseConnectTimeoutResult => {
+  const [timedOut, setTimedOut] = useState(false);
+
+  const fire = useCallback(() => {
+    setTimedOut(true);
+  }, []);
+
+  // 커넥터가 바뀌면(=새 연결 시도) 타임아웃 상태 리셋.
+  // active 가 false 로 떨어질 때는 리셋하지 않는다 — timeout UI 표시 중 상태가 날아가지 않도록.
+  useEffect(() => {
+    setTimedOut(false);
+  }, [connectorId]);
+
+  // MM 만 client 타이머로 강제 (승인 대기에 네이티브 상한이 없음).
+  // CC(서버 push) / WC(connect reject) 는 아래 expiredSignal effect 에서 처리.
+  useEffect(() => {
+    if (!active || !isConnecting || connectorId !== 'METAMASK') return;
+    const timer = setTimeout(fire, DEFAULT_CONNECT_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [active, isConnecting, connectorId, fire]);
+
+  // 외부 실패/만료 신호 처리 (CC 서버 push / MM·WC connect reject).
+  // signal 값이 올라가면(새 만료 이벤트) 발화.
+  const prevSignal = useRef(expiredSignal);
+  useEffect(() => {
+    if (!active || !connectorId) {
+      prevSignal.current = expiredSignal;
+      return;
+    }
+    if (expiredSignal !== prevSignal.current) {
+      prevSignal.current = expiredSignal;
+      fire();
+    }
+  }, [expiredSignal, connectorId, active, fire]);
+
+  const retry = useCallback(() => {
+    setTimedOut(false);
+    onRetry?.();
+  }, [onRetry]);
+
+  const reset = useCallback(() => {
+    setTimedOut(false);
+  }, []);
+
+  return { timedOut, reset, retry };
+};

package/src/hooks/useMetaMaskExtension.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+const METAMASK_RDNS = 'io.metamask';
+
+// EIP-6963 응답의 rdns 로 MetaMask 확장을 식별.
+const isMetaMaskAnnouncement = (event: Event): boolean => {
+  const detail = (event as CustomEvent<{ info?: { rdns?: string }; provider?: unknown }>).detail;
+  return detail?.info?.rdns?.toLowerCase() === METAMASK_RDNS && detail.provider != null;
+};
+
+export const useMetaMaskExtension = (): boolean => {
+  const [isInstalled, setIsInstalled] = useState(false);
+
+  useEffect(() => {
+    const handleAnnouncement = (event: Event): void => {
+      if (isMetaMaskAnnouncement(event)) setIsInstalled(true);
+    };
+
+    // 응답 listener를 먼저 등록한 뒤 설치된 provider 목록을 요청.
+    window.addEventListener('eip6963:announceProvider', handleAnnouncement);
+    window.dispatchEvent(new Event('eip6963:requestProvider'));
+
+    return () => {
+      window.removeEventListener('eip6963:announceProvider', handleAnnouncement);
+    };
+  }, []);
+
+  return isInstalled;
+};

package/src/hooks/useWCState.ts

@@ -1,18 +1,31 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import type { WCWallet, WCSubView } from '../types';
-
-const fetchWCWalletList = async (projectId: string): Promise<WCWallet[]> => {
-  const all: WCWallet[] = [];
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+import { CREDIT_WALLET_LISTING_ID, overrideWalletDisplay } from '../wallet-display-override';
+
+const sortCreditWalletFirst = (list: WCWallet[]): WCWallet[] =>
+  [...list].sort((a, b) => {
+    // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+    if (a.id === CREDIT_WALLET_LISTING_ID) return -1;
+    if (b.id === CREDIT_WALLET_LISTING_ID) return 1;
+    return 0;
+  });
+
+const fetchWCWalletList = async (projectId: string, signal?: AbortSignal): Promise<WCWallet[]> => {
+  // WC Explorer API 가 page 경계에서 같은 wallet 을 중복 emit 하는 케이스 관찰됨
+  // (paginate 사이 sort/dedup 보장 X). id 기준 first-write-wins dedup.
+  const byId = new Map<string, WCWallet>();
   let page = 1;
   const entries = 100;
 
   while (page <= 10) {
+    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
     const url = new URL('https://explorer-api.walletconnect.com/v3/wallets');
     url.searchParams.set('projectId', projectId);
     url.searchParams.set('entries', String(entries));
     url.searchParams.set('page', String(page));
 
-    const res = await fetch(url.toString());
+    const res = await fetch(url.toString(), { signal });
     if (!res.ok) throw new Error(`Failed to fetch wallet list: ${res.status}`);
 
     const json = (await res.json()) as {
@@ -33,7 +46,8 @@ const fetchWCWalletList = async (projectId: string): Promise<WCWallet[]> => {
 
     const listings = Object.values(json.listings ?? {});
     for (const w of listings) {
-      all.push({
+      if (byId.has(w.id)) continue;
+      byId.set(w.id, {
         id: w.id,
         name: w.name,
         imageUrl: w.image_url?.md ?? w.image_url?.sm ?? '',
@@ -47,11 +61,11 @@ const fetchWCWalletList = async (projectId: string): Promise<WCWallet[]> => {
       });
     }
 
-    if (listings.length < entries || all.length >= json.total) break;
+    if (listings.length < entries || byId.size >= json.total) break;
     page += 1;
   }
 
-  return all;
+  return Array.from(byId.values());
 };
 
 export interface WCState {
@@ -66,7 +80,6 @@ export interface WCState {
   onSelectWallet: (wallet: WCWallet) => void;
   onSearchChange: (q: string) => void;
   onFilterToggle: () => void;
-  // Returns true if WC handled the back navigation, false if the parent should handle it
   handleBack: () => boolean;
   resetView: () => void;
   reset: () => void;
@@ -80,18 +93,36 @@ export const useWCState = (): WCState => {
   const [filterActive, setFilterActive] = useState(false);
   const [selectedWallet, setSelectedWallet] = useState<WCWallet | null>(null);
   const loadedRef = useRef(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = null;
+    };
+  }, []);
 
   const loadWalletList = useCallback(async (projectId: string): Promise<void> => {
     if (loadedRef.current) return;
     loadedRef.current = true;
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
     setWalletListLoading(true);
     try {
-      const list = await fetchWCWalletList(projectId);
-      setWalletList(list);
-    } catch {
-      loadedRef.current = false;
+      const list = await fetchWCWalletList(projectId, controller.signal);
+      // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+      const sorted = sortCreditWalletFirst(list).map(overrideWalletDisplay);
+      // Credit Wallet 을 최상단으로 정렬한 상태로 state 저장 — view 측은 정렬 신경 X.
+      if (isMountedRef.current) setWalletList(sorted);
+    } catch (err) {
+      const isAbort = err instanceof DOMException && err.name === 'AbortError';
+      if (!isAbort) loadedRef.current = false;
     } finally {
-      setWalletListLoading(false);
+      if (isMountedRef.current) setWalletListLoading(false);
+      if (abortControllerRef.current === controller) abortControllerRef.current = null;
     }
   }, []);
 

package/src/hooks/useWagmiConnect.ts

@@ -13,8 +13,10 @@ const hasMetaMaskKeyword = (value: string): boolean => value.toLowerCase().inclu
 const hasWalletConnectKeyword = (value: string): boolean =>
   value.toLowerCase().includes('walletconnect');
 
+// 전역 provider 대신 wagmi connector 메타데이터로 MetaMask를 판별.
 const isMetaMaskConnector = (connector: WagmiConnectorLike): boolean => {
-  if (connector.id === 'injected' || connector.id === 'metaMaskSDK') return true;
+  if (connector.id === 'metaMaskSDK') return true;
+
   if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
 
   if (connector.rdns) {
@@ -42,7 +44,6 @@ export const resolveWagmiConnector = <T extends WagmiConnectorLike>(
     case 'METAMASK':
       return connectors.find(isMetaMaskConnector);
 
-    case 'CREDIT_WALLET':
     case 'WALLET_CONNECT':
       return connectors.find(isWalletConnectConnector);
 
@@ -55,11 +56,13 @@ interface Options {
   onConnect: (result: ConnectResult) => void;
   onError: (error: Error, connectorId: ConnectorId) => void;
   onQrUri: (uri: string | null) => void;
+  onSessionExpired?: () => void;
 }
 
 interface UseWagmiConnectResult {
   triggerConnect: (connectorId: ConnectorId) => void;
   cancelConnect: () => void;
+  restartConnect: (connectorId: ConnectorId) => Promise<void>;
   isConnecting: boolean;
 }
 
@@ -67,30 +70,34 @@ export const useWagmiConnect = ({
   onConnect,
   onError,
   onQrUri,
+  onSessionExpired,
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
+  const attemptCounter = useRef(0);
 
-  // 콜백 참조
   const onConnectRef = useRef(onConnect);
   const onErrorRef = useRef(onError);
   const onQrUriRef = useRef(onQrUri);
+  const onSessionExpiredRef = useRef(onSessionExpired);
   useEffect(() => {
     onConnectRef.current = onConnect;
     onErrorRef.current = onError;
     onQrUriRef.current = onQrUri;
-  }, [onConnect, onError, onQrUri]);
+    onSessionExpiredRef.current = onSessionExpired;
+  }, [onConnect, onError, onQrUri, onSessionExpired]);
 
-  // 연결 시도
   const { connectAsync, reset, isPending } = useConnect();
 
-  // QR 코드 표시
   useEffect(() => {
     const handler = (data: unknown): void => {
       const msg = data as { type?: string; data?: unknown };
       if (msg?.type === 'display_uri' && typeof msg.data === 'string') {
         onQrUriRef.current(msg.data);
       }
+      if (msg?.type === 'session_expired') {
+        onSessionExpiredRef.current?.();
+      }
     };
 
     const unsubscribers = config.connectors.map((connector) => {
@@ -107,7 +114,6 @@ export const useWagmiConnect = ({
     };
   }, [config.connectors]);
 
-  // 연결 트리거
   const triggerConnect = useCallback(
     (connectorId: ConnectorId): void => {
       const connector = resolveWagmiConnector(config.connectors, connectorId);
@@ -117,10 +123,11 @@ export const useWagmiConnect = ({
       }
 
       onQrUriRef.current(null);
+      const attemptId = ++attemptCounter.current;
       pendingConnectorId.current = connectorId;
       connectAsync({ connector })
         .then((result) => {
-          if (pendingConnectorId.current !== connectorId) return;
+          if (attemptCounter.current !== attemptId) return;
           const address = result.accounts?.[0];
           if (!address) {
             throw new Error('Connected but no account returned');
@@ -129,7 +136,7 @@ export const useWagmiConnect = ({
           onConnectRef.current({ address, connectorId });
         })
         .catch((error) => {
-          if (pendingConnectorId.current !== connectorId) return;
+          if (attemptCounter.current !== attemptId) return;
           pendingConnectorId.current = null;
           onErrorRef.current(error as Error, connectorId);
         });
@@ -137,12 +144,36 @@ export const useWagmiConnect = ({
     [config.connectors, connectAsync],
   );
 
-  // 연결 취소
   const cancelConnect = useCallback((): void => {
+    attemptCounter.current += 1;
     pendingConnectorId.current = null;
     onQrUriRef.current(null);
     reset();
   }, [reset]);
 
-  return { triggerConnect, cancelConnect, isConnecting: isPending };
+  const restartConnect = useCallback(
+    async (connectorId: ConnectorId): Promise<void> => {
+      const connector = resolveWagmiConnector(config.connectors, connectorId);
+
+      cancelConnect();
+      const restartAttempt = attemptCounter.current;
+
+      try {
+        // MetaMask SDK connector.disconnect()는 sdk.terminate()를 호출해
+        // 기존 QR/Deeplink 연결 채널을 정리한다.
+        await connector?.disconnect();
+      } catch (error) {
+        onErrorRef.current(error as Error, connectorId);
+        throw error;
+      }
+
+      // SDK 정리 중 다른 지갑을 선택하거나 모달을 닫았으면 재연결하지 않는다.
+      if (attemptCounter.current !== restartAttempt) return;
+
+      triggerConnect(connectorId);
+    },
+    [config.connectors, cancelConnect, triggerConnect],
+  );
+
+  return { triggerConnect, cancelConnect, restartConnect, isConnecting: isPending };
 };

package/src/index.ts

@@ -1,14 +1,50 @@
-export { ConnectModal } from './ConnectModal';
+import { readContract, writeContract } from './api/contract';
+import { getBalance } from './api/balance';
+import { switchChain, getPublicClient } from './api/chain';
+import { waitForTransactionReceipt } from './api/transaction';
+import { getAccount, signMessage, signTypedData } from './api/account';
+import { watchAsset } from './api/asset';
+import { watchAccount, watchConnections, reconnect, disconnectAll } from './events/account';
+
 export { ConnectKitProvider, useConnectKit } from './ConnectKitProvider';
 export type { ConnectKitContextValue, ConnectKitProviderProps } from './ConnectKitProvider';
+
+export { initConfig } from './core/config';
+
 export type {
   ConnectErrorContext,
   ConnectErrorReason,
+  ConnectBannerSiteKey,
   ConnectModalProps,
+  ConnectKitConfig,
+  ConnectKitTheme,
   Connectors,
+  ConnectorKey,
   ConnectResult,
   ConnectorId,
-  CreditWalletStrategy,
   WCSubView,
   WCWallet,
 } from './types';
+
+export const connectKit = {
+  api: {
+    readContract,
+    writeContract,
+    getBalance,
+    switchChain,
+    getPublicClient,
+    waitForTransactionReceipt,
+    getAccount,
+    signMessage,
+    signTypedData,
+    watchAsset,
+  },
+  events: {
+    watchAccount,
+    watchConnections,
+    reconnect,
+    disconnectAll,
+  },
+} as const;
+
+export type * from '@wagmi/core';

package/src/layout/allWallets/index.tsx

@@ -0,0 +1,52 @@
+import { type FC, useState, useMemo } from 'react';
+import './style.scss';
+import { type WCWallet } from '../../types';
+import { SearchBar } from '../../components/searchBar';
+import { Toggle } from '../../components/toggle';
+import { WalletGrid } from '../../components/walletGrid';
+import wcLogo from '../../../assets/wc-search.png';
+
+interface AllWalletsProps {
+  /** Credit Wallet 이 최상단에 오도록 정렬된 상태로 전달됨 — useWCState 의 loadWalletList 에서 처리. */
+  wallets: WCWallet[];
+  isLoading: boolean;
+  onSelectWallet: (wallet: WCWallet) => void;
+}
+
+export const AllWallets: FC<AllWalletsProps> = ({ wallets, isLoading, onSelectWallet }) => {
+  const [search, setSearch] = useState('');
+  const [filterInstalled, setFilterInstalled] = useState(false);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    let list = wallets;
+    if (filterInstalled) {
+      list = list.filter(
+        (w) => w.mobileNative || w.mobileUniversal || w.desktopNative || w.desktopUniversal,
+      );
+    }
+    if (q) {
+      list = list.filter((w) => w.name.toLowerCase().includes(q));
+    }
+    return list;
+  }, [wallets, search, filterInstalled]);
+
+  return (
+    <div className="ck-all-wallets">
+      <div className="ck-all-wallets-controls">
+        <SearchBar value={search} onChange={setSearch} onClear={() => setSearch('')} />
+        <div className="ck-wc-filter-btn">
+          <img className="ck-wc-filter-logo" src={wcLogo} alt="" aria-hidden="true" />
+          <Toggle checked={filterInstalled} label="" onChange={setFilterInstalled} />
+        </div>
+      </div>
+      {!isLoading && filtered.length === 0 ? (
+        <div className="ck-all-wallets-empty" role="status">
+          <p>No Wallet found</p>
+        </div>
+      ) : (
+        <WalletGrid wallets={filtered} isLoading={isLoading} onSelect={onSelectWallet} />
+      )}
+    </div>
+  );
+};

package/src/layout/allWallets/style.scss

@@ -0,0 +1,57 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-all-wallets {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  gap: 12px;
+
+  @include tablet {
+    min-height: min(420px, 55dvh);
+    max-height: calc(100dvh - 60px);
+  }
+}
+
+.ck-all-wallets-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+
+  .ck-search {
+    min-width: 0;
+  }
+}
+
+.ck-wc-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 100px;
+  background: var(--scale-gray-100);
+  flex-shrink: 0;
+}
+
+.ck-wc-filter-logo {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  object-fit: cover;
+  background: var(--static-white-main);
+}
+
+.ck-all-wallets-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+
+  p {
+    @include textToken('body4-l2-regular');
+    color: var(--scale-gray-600);
+    text-align: center;
+  }
+}

package/src/layout/connectDialog/asset/backIcon.tsx

@@ -0,0 +1,24 @@
+import { type FC, type SVGProps } from 'react';
+
+export const BackIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={14}
+      height={20}
+      viewBox="0 0 14 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M10 4L4 10L10 16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/checkIcon.tsx

@@ -0,0 +1,28 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CheckIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <g clipPath="url(#clip0_check)">
+        <path
+          d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM10.4512 15.6953C10.7879 15.973 11.2866 15.9546 11.6016 15.6396L16.7529 10.4883C17.0877 10.1536 17.0877 9.61013 16.7529 9.27539C16.4182 8.94114 15.8756 8.94091 15.541 9.27539L10.9961 13.8223L8.56836 11.3936C8.23374 11.0591 7.69116 11.0593 7.35645 11.3936C7.02171 11.7283 7.02171 12.2717 7.35645 12.6064L10.3867 15.6367C10.4075 15.6575 10.4289 15.6771 10.4512 15.6953Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_check">
+          <rect width="20" height="20" fill="white" transform="translate(2 2)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/closeIcon.tsx

@@ -0,0 +1,21 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CloseIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M15.7785 3.2787C16.0389 3.01835 16.4614 3.01835 16.7217 3.2787C16.9819 3.53899 16.9819 3.96077 16.7217 4.22108L10.9421 9.99989L16.7209 15.7787L16.7673 15.8292C16.9809 16.091 16.9658 16.4778 16.7217 16.7219C16.4776 16.9658 16.0908 16.981 15.829 16.7675L15.7785 16.7211L9.99971 10.9422L4.22172 16.7211L4.17126 16.7675C3.90947 16.981 3.52261 16.9658 3.27852 16.7219C3.03445 16.4778 3.0194 16.091 3.23295 15.8292L3.27934 15.7787L9.05733 9.99989L3.27852 4.22108C3.01842 3.96077 3.01839 3.53899 3.27852 3.2787C3.53887 3.01835 3.96137 3.01835 4.22172 3.2787L9.99971 9.05669L15.7785 3.2787Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/copyIcon.tsx

@@ -0,0 +1,28 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CopyIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <g clipPath="url(#clip0_copy)">
+        <path
+          d="M16.2247 6.89437C17.1245 6.89437 17.8539 7.6238 17.854 8.5236V16.2246C17.854 17.1244 17.1245 17.8538 16.2247 17.8538H8.52373C7.62388 17.8538 6.89449 17.1244 6.89449 16.2246V8.5236C6.89454 7.6238 7.62391 6.89437 8.52373 6.89437H16.2247ZM8.52373 8.22738C8.36029 8.22738 8.22755 8.36019 8.2275 8.5236V16.2246C8.2275 16.3881 8.36026 16.5208 8.52373 16.5208H16.2247C16.3882 16.5208 16.521 16.3881 16.521 16.2246V8.5236C16.5209 8.36019 16.3881 8.22738 16.2247 8.22738H8.52373ZM13.0225 2.57064C13.8439 2.65419 14.4848 3.34822 14.4848 4.19173V4.91357C14.4848 5.28173 14.1865 5.58002 13.8183 5.58008C13.4501 5.58008 13.1518 5.28176 13.1518 4.91357V4.19173C13.1518 4.04865 13.05 3.92956 12.915 3.90202L12.8556 3.8955H4.19185C4.02839 3.8955 3.89563 4.02827 3.89563 4.19173V12.8555L3.90214 12.9148C3.92968 13.0498 4.04878 13.1517 4.19185 13.1517H4.91369L4.98206 13.1549C5.31816 13.1892 5.5802 13.4731 5.5802 13.8182C5.58014 14.1633 5.31813 14.4473 4.98206 14.4814L4.91369 14.4847H4.19185C3.34833 14.4847 2.65432 13.8438 2.57076 13.0223L2.56262 12.8555V4.19173C2.56262 3.29189 3.29201 2.5625 4.19185 2.5625H12.8556L13.0225 2.57064Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_copy">
+          <rect width="15.8333" height="15.8333" fill="white" transform="translate(2.5 2.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/linkIcon.tsx

@@ -0,0 +1,24 @@
+import { type FC, type SVGProps } from 'react';
+
+export const LinkIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M6 3L11 8L6 13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};