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

package/dist/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.3",
+  "version": "0.2.0-next.3",
   "type": "module",
   "exports": {
     ".": {
+      "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
     "./credit-connect": {
+      "types": "./src/credit-connect.ts",
       "default": "./src/credit-connect.ts"
     },
+    "./index.css": "./dist/index.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -27,7 +30,10 @@
       "./index.css": "./dist/index.css"
     }
   },
-  "sideEffects": true,
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
   "scripts": {
     "prepack": "pnpm build && cp package.json dist/ && cp README.md dist/",
     "build": "tsup",
@@ -38,7 +44,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "qrcode.react": "^3.2.0"
+    "qrcode.react": "^4.2.0",
+    "wagmi": "^2.15.6",
+    "@wagmi/core": "^2.16.7",
+    "@gluwa/credit-connect-sdk": "workspace:*",
+    "@gluwa/credit-connect-storage-local": "workspace:*",
+    "@gluwa/credit-connect-e2ee-tweetnacl": "workspace:*",
+    "@gluwa/credit-connect-hub-node-ws": "workspace:*"
   },
   "devDependencies": {
     "@gluwa/credit-connect-sdk": "workspace:*",
@@ -55,17 +67,11 @@
     "wagmi": "^2.15.6"
   },
   "peerDependencies": {
-    "@gluwa/credit-connect-sdk": "workspace:*",
     "@tanstack/react-query": ">=5.0.0",
-    "@wagmi/core": ">=2.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "viem": ">=2.0.0",
-    "wagmi": ">=2.0.0"
+    "viem": ">=2.0.0"
   },
   "peerDependenciesMeta": {
-    "@gluwa/credit-connect-sdk": {
-      "optional": true
-    },
     "@tanstack/react-query": {
       "optional": true
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.3",
+  "version": "0.2.0-next.3",
   "type": "module",
   "exports": {
     ".": {
@@ -16,11 +16,20 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": true,
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "qrcode.react": "^3.2.0"
+    "qrcode.react": "^4.2.0",
+    "wagmi": "^2.15.6",
+    "@wagmi/core": "^2.16.7",
+    "@gluwa/credit-connect-sdk": "0.2.0-next.3",
+    "@gluwa/credit-connect-storage-local": "0.2.0-next.3",
+    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.3",
+    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.3"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.0",
@@ -34,20 +43,14 @@
     "typescript-eslint": "^8.18.2",
     "viem": "^2.31.7",
     "wagmi": "^2.15.6",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.1"
+    "@gluwa/credit-connect-sdk": "0.2.0-next.3"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
-    "@wagmi/core": ">=2.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "viem": ">=2.0.0",
-    "wagmi": ">=2.0.0",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.1"
+    "viem": ">=2.0.0"
   },
   "peerDependenciesMeta": {
-    "@gluwa/credit-connect-sdk": {
-      "optional": true
-    },
     "@tanstack/react-query": {
       "optional": true
     }

package/src/ConnectKitProvider.tsx

@@ -9,53 +9,45 @@ import {
   type FC,
   type ReactNode,
 } from 'react';
-import { WagmiProvider, useAccount, useDisconnect } from 'wagmi';
-import type { Config } from 'wagmi';
+import { WagmiProvider, useAccount, useConfig, useDisconnect, useSwitchChain } from 'wagmi';
+import { getAccount } from '@wagmi/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ConnectModal } from './ConnectModal';
-import type { ConnectErrorContext, ConnectResult, ConnectorId, Connectors } from './types';
+// import { ConnectModal } from './ConnectModal';
+import { ConnectDialog } from './layout/connectDialog';
+import { getConfig, getKitConfig, initConfig } from './core/config';
+import { resolveConnectorId } from './connector-meta';
+import type {
+  ConnectErrorContext,
+  ConnectKitConfig,
+  ConnectKitTheme,
+  ConnectResult,
+  ConnectorId,
+  ConnectorKey,
+  Connectors,
+} from './types';
 
-// wagmiConfig prop으로 기존 프로젝트 통합 시 내부에서 사용하는 QueryClient.
-// 모듈 레벨에 한 번만 생성 — 연결 플로우용으로만 쓰이므로 공유해도 무방.
 const internalQueryClient = new QueryClient();
 
 export interface ConnectKitProviderProps {
   children: ReactNode;
+  kitConfig?: ConnectKitConfig;
   connectors: Connectors;
-  wcProjectId?: string;
-  /**
-   * 연결돼 있는 동안 강제할 체인 ID. 다른 체인에 연결돼 있으면
-   * 자동으로 스위치 모달이 떠서 사용자에게 전환 또는 disconnect를 요구.
-   */
   requiredChainId?: number;
-  /**
-   * 연결이 정상적으로 끝나고(체인 검증까지 통과) "사용 가능한 상태"가 됐을 때 한 번 호출.
-   * 재연결(reconnect)에서는 호출되지 않음 — 그쪽은 dApp의 watchAccount 책임.
-   */
+  theme: ConnectKitTheme;
   onConnect?: (result: ConnectResult) => void;
   onLog?: (message: string, error?: Error) => void;
-  /**
-   * 연결 실패(거절/미설치/기타) 시 모달 안에 표시할 fallback UI를 dApp이 직접 그리고 싶을 때.
-   * 미제공 시 기본 동작은 selector로 복귀.
-   */
   renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
-  /**
-   * 기존 프로젝트 통합용. wagmi config를 넘기면 ConnectKitProvider 내부에서
-   * WagmiProvider를 직접 세운다.
-   *
-   * - 기존 프로젝트: 앱에 WagmiProvider가 없으므로 wagmiConfig를 넘긴다.
-   *   ConnectKitProvider가 같은 config 인스턴스로 WagmiProvider를 셀프 마운트하므로
-   *   기존 wagmi 상태 store와 단일 config를 공유한다.
-   * - 신규 프로젝트: 앱이 이미 WagmiProvider를 감싸므로 이 prop은 불필요하다.
-   */
-  wagmiConfig?: Config;
 }
-
 export interface ConnectKitContextValue {
   isOpen: boolean;
   open: () => void;
   close: () => void;
   isConnected: boolean;
+  needsChainSwitch: boolean;
+  requiredChainId: number | undefined;
+  currentChainId: number | undefined;
+  isSwitchingChain: boolean;
+  switchToRequiredChain: () => Promise<void>;
   address: `0x${string}` | undefined;
   connectorId: ConnectorId | null;
   disconnect: () => Promise<void>;
@@ -63,58 +55,80 @@ export interface ConnectKitContextValue {
 
 const ConnectKitContext = createContext<ConnectKitContextValue | null>(null);
 
-const resolveConnectorId = (wagmiConnectorId: string | undefined): ConnectorId | null => {
-  if (!wagmiConnectorId) return null;
-  if (wagmiConnectorId === 'credit-connect') return 'CREDIT_CONNECT';
-  if (wagmiConnectorId === 'walletConnect') return 'WALLET_CONNECT';
-  const lower = wagmiConnectorId.toLowerCase();
-  if (lower.includes('metamask') || wagmiConnectorId === 'injected') return 'METAMASK';
-  if (lower.includes('walletconnect')) return 'WALLET_CONNECT';
-  return null;
+// 외부 API Connectors (ConnectorKey 배열) → 내부 ConnectorId[] 매핑.
+// 입력 순서 그대로 selector 표시 순서.
+const CONNECTOR_KEY_TO_ID: Record<ConnectorKey, ConnectorId> = {
+  creditWallet: 'CREDIT_CONNECT',
+  metamask: 'METAMASK',
+  walletConnect: 'WALLET_CONNECT',
+};
+const resolveConnectorsFromConfig = (connectorsConfig?: Connectors): ConnectorId[] => {
+  if (!connectorsConfig) return [];
+  return connectorsConfig.map((key) => CONNECTOR_KEY_TO_ID[key]);
 };
 
 export const ConnectKitProvider: FC<ConnectKitProviderProps> = (props) => {
-  if (props.wagmiConfig) {
-    return (
-      <WagmiProvider config={props.wagmiConfig}>
-        <QueryClientProvider client={internalQueryClient}>
-          <ConnectKitProviderInner {...props} />
-        </QueryClientProvider>
-      </WagmiProvider>
-    );
-  }
-  return <ConnectKitProviderInner {...props} />;
+  const wagmiConfig = useMemo(
+    () => (props.kitConfig ? initConfig(props.kitConfig) : getConfig()),
+    [props.kitConfig],
+  );
+
+  const resolvedKitConfig = props.kitConfig ?? getKitConfig();
+
+  return (
+    <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
+      <QueryClientProvider client={internalQueryClient}>
+        <ConnectKitProviderInner {...props} kitConfig={resolvedKitConfig} />
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
+
+type ConnectKitProviderInnerProps = Omit<ConnectKitProviderProps, 'kitConfig'> & {
+  kitConfig: ConnectKitConfig;
 };
 
-const ConnectKitProviderInner: FC<ConnectKitProviderProps> = ({
+const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
   children,
   connectors,
-  wcProjectId,
+  kitConfig,
   requiredChainId,
+  theme,
   onConnect,
   onLog,
-  renderConnectError,
 }) => {
+  // NOTE: renderConnectError 는 ConnectDialog 가 아직 error UI customization 을 받지 않으므로
+  // destructure 에서 제외. 추후 ConnectDialog 의 timeout/error content 에 wire 필요 시 복원.
   const [isOpen, setIsOpen] = useState(false);
   const [pendingResult, setPendingResult] = useState<ConnectResult | null>(null);
 
   const account = useAccount();
+  const wagmiConfig = useConfig();
   const { disconnectAsync } = useDisconnect();
+  const { switchChainAsync } = useSwitchChain();
 
-  // dApp의 onConnect는 ref로 잡아 effect 재실행 노이즈 차단
   const onConnectRef = useRef(onConnect);
   useEffect(() => {
     onConnectRef.current = onConnect;
   }, [onConnect]);
 
-  // chain mismatch invariant: 연결돼 있지만 요구 체인이 아니면 modal force-open
-  const chainMismatch =
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const needsChainSwitch =
     requiredChainId != null &&
     account.status === 'connected' &&
     account.chainId != null &&
     account.chainId !== requiredChainId;
 
-  const effectiveOpen = isOpen || chainMismatch;
+  const [isSwitchingChain, setIsSwitchingChain] = useState(false);
+
+  const effectiveOpen = isOpen;
 
   const open = useCallback((): void => {
     setIsOpen(true);
@@ -122,34 +136,62 @@ const ConnectKitProviderInner: FC<ConnectKitProviderProps> = ({
 
   const close = useCallback((): void => {
     setIsOpen(false);
-  }, []);
+    const status = getAccount(wagmiConfig).status;
+    if (status === 'connecting' || status === 'reconnecting') {
+      disconnectAsync().catch(() => undefined);
+    }
+  }, [wagmiConfig, disconnectAsync]);
 
   const disconnect = useCallback(async (): Promise<void> => {
     await disconnectAsync();
   }, [disconnectAsync]);
 
-  // ConnectModal → Provider: 연결 결과를 일단 보류했다가
-  // chain 검증까지 통과한 후에만 dApp으로 forward
-  const handleModalConnect = useCallback((result: ConnectResult): void => {
+  const switchToRequiredChain = useCallback(async (): Promise<void> => {
+    if (requiredChainId == null) return;
+    setIsSwitchingChain(true);
+    try {
+      await switchChainAsync({ chainId: requiredChainId });
+    } finally {
+      if (isMountedRef.current) setIsSwitchingChain(false);
+    }
+  }, [requiredChainId, switchChainAsync]);
+
+  // ConnectDialog 의 wagmi connect 성공 → pendingResult set → 아래 useEffect 가
+  // account.status === 'connected' 확인 후 외부 onConnect 호출 + modal close.
+  // wagmi state 가 비동기로 'connected' 로 전환되는 race 흡수용.
+  const handleDialogConnect = useCallback((result: ConnectResult): void => {
     setPendingResult(result);
   }, []);
 
-  // pendingResult가 있고, 연결 + chain 매칭이 충족되면 dApp으로 발화
-  useEffect(() => {
+  const handleDialogError = useCallback(
+    (error: Error, connectorId: ConnectorId): void => {
+      onLog?.(`[connect-kit] connect failed: ${connectorId} — ${error.message}`, error);
+    },
+    [onLog],
+  );
+
+  // 연결 성공 시 modal 자동 close — wagmi state 만 기준으로.
+  // 이전 구현은 pendingResult 가 set 된 경우만 close 했는데, `setPendingResult` 는
+  // ConnectDialog 의 onConnect (`connectAsync.then`) 안에서만 호출됨. MM deeplink 같은
+  // 시나리오 (앱 이동 → 승인 → 복귀) 에서 wagmi 가 자체적으로 'connected' 로 전이하지만
+  // connectAsync 의 promise 는 resolve 안 될 수 있음 → pendingResult set 안 됨 → modal 안 닫힘.
+  // 모든 connector (WC/CC/MM) 의 connected 가 일관된 close 트리거가 되도록 단순화.
+  useEffect((): void => {
+    if (!effectiveOpen) return;
+    if (account.status !== 'connected') return;
+    setIsOpen(false);
+  }, [effectiveOpen, account.status]);
+
+  // 외부 onConnect 콜백은 best-effort — pendingResult 가 set 된 경우만 호출.
+  useEffect((): void => {
     if (!pendingResult) return;
     if (account.status !== 'connected') {
-      // 연결이 끊겼거나 진행 중 — pending 폐기
       setPendingResult(null);
       return;
     }
-    if (requiredChainId != null && account.chainId !== requiredChainId) {
-      // chain 아직 안 맞음 — switch 후 다시 평가
-      return;
-    }
     onConnectRef.current?.(pendingResult);
     setPendingResult(null);
-    setIsOpen(false);
-  }, [pendingResult, account.status, account.chainId, requiredChainId]);
+  }, [pendingResult, account.status]);
 
   const value = useMemo<ConnectKitContextValue>(
     () => ({
@@ -157,6 +199,11 @@ const ConnectKitProviderInner: FC<ConnectKitProviderProps> = ({
       open,
       close,
       isConnected: account.status === 'connected',
+      needsChainSwitch,
+      requiredChainId,
+      currentChainId: account.chainId,
+      isSwitchingChain,
+      switchToRequiredChain,
       address: account.address,
       connectorId: resolveConnectorId(account.connector?.id),
       disconnect,
@@ -166,6 +213,11 @@ const ConnectKitProviderInner: FC<ConnectKitProviderProps> = ({
       open,
       close,
       account.status,
+      needsChainSwitch,
+      requiredChainId,
+      account.chainId,
+      isSwitchingChain,
+      switchToRequiredChain,
       account.address,
       account.connector?.id,
       disconnect,
@@ -175,15 +227,14 @@ const ConnectKitProviderInner: FC<ConnectKitProviderProps> = ({
   return (
     <ConnectKitContext.Provider value={value}>
       {children}
-      <ConnectModal
+      <ConnectDialog
         open={effectiveOpen}
-        connectors={connectors}
-        wcProjectId={wcProjectId}
-        requiredChainId={requiredChainId}
-        renderConnectError={renderConnectError}
-        onConnect={handleModalConnect}
+        theme={theme}
+        connectors={resolveConnectorsFromConfig(connectors)}
+        wcProjectId={kitConfig.wcProjectId}
         onClose={close}
-        onLog={onLog}
+        onConnect={handleDialogConnect}
+        onError={handleDialogError}
       />
     </ConnectKitContext.Provider>
   );

package/src/api/account.ts

@@ -0,0 +1,21 @@
+import {
+  getAccount as wagmiGetAccount,
+  signMessage as wagmiSignMessage,
+  signTypedData as wagmiSignTypedData,
+  type GetAccountReturnType,
+  type SignMessageParameters,
+  type SignTypedDataParameters,
+} from '@wagmi/core';
+import { getConfig } from '../core/config';
+
+export const getAccount = (): GetAccountReturnType => {
+  return wagmiGetAccount(getConfig());
+};
+
+export const signMessage = (params: SignMessageParameters): Promise<`0x${string}`> => {
+  return wagmiSignMessage(getConfig(), params);
+};
+
+export const signTypedData = (params: SignTypedDataParameters): Promise<`0x${string}`> => {
+  return wagmiSignTypedData(getConfig(), params);
+};

package/src/api/balance.ts

@@ -0,0 +1,10 @@
+import {
+  getBalance as wagmiGetBalance,
+  type GetBalanceParameters,
+  type GetBalanceReturnType,
+} from '@wagmi/core';
+import { getConfig } from '../core/config';
+
+export const getBalance = (params: GetBalanceParameters): Promise<GetBalanceReturnType> => {
+  return wagmiGetBalance(getConfig(), params);
+};

package/src/api/chain.ts

@@ -0,0 +1,17 @@
+import {
+  switchChain as wagmiSwitchChain,
+  getPublicClient as wagmiGetPublicClient,
+  type SwitchChainParameters,
+  type GetPublicClientParameters,
+  type GetPublicClientReturnType,
+} from '@wagmi/core';
+import type { Chain } from 'viem';
+import { getConfig } from '../core/config';
+
+export const switchChain = (params: SwitchChainParameters): Promise<Chain> => {
+  return wagmiSwitchChain(getConfig(), params);
+};
+
+export const getPublicClient = (params?: GetPublicClientParameters): GetPublicClientReturnType => {
+  return wagmiGetPublicClient(getConfig(), params);
+};

package/src/api/contract.ts

@@ -0,0 +1,33 @@
+import {
+  readContract as wagmiReadContract,
+  writeContract as wagmiWriteContract,
+  type ReadContractParameters,
+  type ReadContractReturnType,
+  type WriteContractParameters,
+  type WriteContractReturnType,
+  type Config,
+} from '@wagmi/core';
+import type { Abi, ContractFunctionArgs, ContractFunctionName } from 'viem';
+import { getConfig } from '../core/config';
+
+export function readContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'pure' | 'view'>,
+  args extends ContractFunctionArgs<abi, 'pure' | 'view', functionName>,
+>(
+  parameters: ReadContractParameters<abi, functionName, args, Config>,
+): Promise<ReadContractReturnType<abi, functionName, args>> {
+  return wagmiReadContract(getConfig(), parameters as any) as Promise<
+    ReadContractReturnType<abi, functionName, args>
+  >;
+}
+
+export function writeContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'nonpayable' | 'payable'>,
+  args extends ContractFunctionArgs<abi, 'nonpayable' | 'payable', functionName>,
+>(
+  parameters: WriteContractParameters<abi, functionName, args, Config>,
+): Promise<WriteContractReturnType> {
+  return wagmiWriteContract(getConfig(), parameters as any);
+}

package/src/api/transaction.ts

@@ -0,0 +1,12 @@
+import {
+  waitForTransactionReceipt as wagmiWaitForTransactionReceipt,
+  type WaitForTransactionReceiptParameters,
+  type WaitForTransactionReceiptReturnType,
+} from '@wagmi/core';
+import { getConfig } from '../core/config';
+
+export const waitForTransactionReceipt = (
+  params: WaitForTransactionReceiptParameters,
+): Promise<WaitForTransactionReceiptReturnType> => {
+  return wagmiWaitForTransactionReceipt(getConfig(), params);
+};

package/src/assets.d.ts

@@ -2,3 +2,8 @@ declare module '*.png' {
   const src: string;
   export default src;
 }
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}

package/src/components/actionItem/index.tsx

@@ -0,0 +1,50 @@
+import { type ReactNode, type AnchorHTMLAttributes, type ButtonHTMLAttributes } from 'react';
+import './style.scss';
+
+interface ActionItemContent {
+  label?: string;
+  description?: string;
+  action?: string;
+  children?: ReactNode;
+}
+
+type ActionItemAsAnchor = { as: 'a' } & AnchorHTMLAttributes<HTMLAnchorElement> & ActionItemContent;
+type ActionItemAsButton = { as: 'button' } & ButtonHTMLAttributes<HTMLButtonElement> &
+  ActionItemContent;
+
+type ActionItemProps = ActionItemAsAnchor | ActionItemAsButton;
+
+const ActionItemBody = ({ label, description, action, children }: ActionItemContent): ReactNode => {
+  if (children) return <>{children}</>;
+  return (
+    <>
+      <span className="ck-action-item-content">
+        <span className="ck-action-item-label">{label}</span>
+        {description && <span className="ck-action-item-desc">{description}</span>}
+      </span>
+      {action && <span className="ck-action-item-action">{action}</span>}
+    </>
+  );
+};
+
+export const ActionItem = (props: ActionItemProps) => {
+  if (props.as === 'a') {
+    const { as: _, label, description, action, children, className, ...rest } = props;
+    return (
+      <a className={`ck-action-item${className ? ` ${className}` : ''}`} {...rest}>
+        <ActionItemBody label={label} description={description} action={action}>
+          {children}
+        </ActionItemBody>
+      </a>
+    );
+  }
+
+  const { as: _, label, description, action, children, className, ...rest } = props;
+  return (
+    <button className={`ck-action-item${className ? ` ${className}` : ''}`} {...rest}>
+      <ActionItemBody label={label} description={description} action={action}>
+        {children}
+      </ActionItemBody>
+    </button>
+  );
+};

package/src/components/actionItem/style.scss

@@ -0,0 +1,47 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-root .ck-action-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  padding: 16px 20px;
+  border-radius: 12px;
+  background: var(--scale-gray-100);
+  cursor: pointer;
+  margin-top: auto;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+
+.ck-action-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ck-action-item-label {
+  @include textToken('subtitle2-bold');
+  color: var(--scale-gray-900);
+}
+
+.ck-action-item-desc {
+  @include textToken('label5-regular');
+  color: var(--scale-gray-600);
+}
+
+.ck-action-item-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  height: 44px;
+  border-radius: 6px;
+  background: var(--scale-blue2-alpha-100);
+  @include textToken('label5-bold');
+  color: var(--semantic-brand-trugi-primary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}

package/src/components/copyLink/index.tsx

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+import './style.scss';
+import { CopyIcon } from '../../layout/connectDialog/asset/copyIcon';
+
+interface CopyLinkProps {
+  onCopy?: () => void;
+}
+
+export const CopyLink: FC<CopyLinkProps> = ({ onCopy }) => {
+  return (
+    <button type="button" className="ck-copy-link" onClick={onCopy}>
+      <CopyIcon className="ck-copy-link-icon" />
+      Copy link
+    </button>
+  );
+};

package/src/components/copyLink/style.scss

@@ -0,0 +1,16 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-root .ck-copy-link {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  gap: 6px;
+  @include textToken('body3-l1-regular');
+  color: var(--scale-gray-500);
+  cursor: pointer;
+}
+
+.ck-copy-link-icon {
+  flex-shrink: 0;
+  color: var(--scale-gray-500);
+}