@gluwa/connect-kit 0.2.0-next.9 → 0.2.1-next.4

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.9",
+  "version": "0.2.1-next.4",
   "type": "module",
   "exports": {
     ".": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.9",
+  "version": "0.2.1-next.4",
   "type": "module",
   "exports": {
     ".": {
@@ -26,10 +26,10 @@
     "qrcode.react": "^4.2.0",
     "wagmi": "^2.15.6",
     "@wagmi/core": "^2.16.7",
-    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.4",
-    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.4",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.4",
-    "@gluwa/credit-connect-storage-local": "0.2.0-next.4"
+    "@gluwa/credit-connect-storage-local": "0.2.1-next.7",
+    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.1-next.7",
+    "@gluwa/credit-connect-sdk": "0.2.1-next.7",
+    "@gluwa/credit-connect-hub-node-ws": "0.1.1-next.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.0",
@@ -43,7 +43,7 @@
     "typescript-eslint": "^8.18.2",
     "viem": "^2.31.7",
     "wagmi": "^2.15.6",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.4"
+    "@gluwa/credit-connect-sdk": "0.2.1-next.7"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",

package/src/ConnectKitProvider.tsx

@@ -18,6 +18,7 @@ import { getConfig, getKitConfig, initConfig } from './core/config';
 import { resolveConnectorId } from './connector-meta';
 import type {
   ConnectErrorContext,
+  ConnectBannerSiteKey,
   ConnectKitConfig,
   ConnectKitTheme,
   ConnectResult,
@@ -30,6 +31,8 @@ const internalQueryClient = new QueryClient();
 
 export interface ConnectKitProviderProps {
   children: ReactNode;
+  siteKey: ConnectBannerSiteKey;
+  connectBannerUrl: string;
   kitConfig?: ConnectKitConfig;
   connectors: Connectors;
   requiredChainId?: number;
@@ -90,6 +93,8 @@ type ConnectKitProviderInnerProps = Omit<ConnectKitProviderProps, 'kitConfig'> &
 
 const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
   children,
+  siteKey,
+  connectBannerUrl,
   connectors,
   kitConfig,
   requiredChainId,
@@ -154,7 +159,7 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
     } finally {
       if (isMountedRef.current) setIsSwitchingChain(false);
     }
-  }, [requiredChainId, switchChainAsync]);
+  }, [requiredChainId, switchChainAsync, account.chainId]);
 
   // ConnectDialog 의 wagmi connect 성공 → pendingResult set → 아래 useEffect 가
   // account.status === 'connected' 확인 후 외부 onConnect 호출 + modal close.
@@ -229,6 +234,8 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
       {children}
       <ConnectDialog
         open={effectiveOpen}
+        siteKey={siteKey}
+        connectBannerUrl={connectBannerUrl}
         theme={theme}
         connectors={resolveConnectorsFromConfig(connectors)}
         wcProjectId={kitConfig.wcProjectId}

package/src/api/wrappers.ts

@@ -0,0 +1,361 @@
+import * as w from '@wagmi/core/actions';
+import type {
+  Abi,
+  BlockTag,
+  ContractEventName,
+  ContractFunctionArgs,
+  ContractFunctionName,
+  ContractFunctionParameters,
+  FeeValuesType,
+  TypedData,
+  PrepareTransactionRequestRequest as ViemPrepareTransactionRequestRequest,
+} from 'viem';
+import type {
+  Config,
+  ConnectParameters,
+  ConnectReturnType,
+  Connector,
+  CreateConnectorFn,
+  DeployContractParameters,
+  DeployContractReturnType,
+  EstimateFeesPerGasParameters,
+  EstimateFeesPerGasReturnType,
+  EstimateGasParameters,
+  EstimateGasReturnType,
+  EstimateMaxPriorityFeePerGasParameters,
+  EstimateMaxPriorityFeePerGasReturnType,
+  GetBlockNumberParameters,
+  GetBlockNumberReturnType,
+  GetBlockParameters,
+  GetBlockReturnType,
+  GetBlockTransactionCountParameters,
+  GetBlockTransactionCountReturnType,
+  GetCapabilitiesParameters,
+  GetCapabilitiesReturnType,
+  GetClientParameters,
+  GetClientReturnType,
+  GetConnectorClientParameters,
+  GetConnectorClientReturnType,
+  GetFeeHistoryParameters,
+  GetFeeHistoryReturnType,
+  GetGasPriceParameters,
+  GetGasPriceReturnType,
+  GetPublicClientParameters,
+  GetPublicClientReturnType,
+  GetTransactionConfirmationsParameters,
+  GetTransactionConfirmationsReturnType,
+  GetTransactionParameters,
+  GetTransactionReceiptParameters,
+  GetTransactionReceiptReturnType,
+  GetTransactionReturnType,
+  GetWalletClientParameters,
+  GetWalletClientReturnType,
+  MulticallParameters,
+  MulticallReturnType,
+  PrepareTransactionRequestParameters,
+  PrepareTransactionRequestReturnType,
+  ReadContractParameters,
+  ReadContractReturnType,
+  ReadContractsParameters,
+  ReadContractsReturnType,
+  SelectChains,
+  SendCallsParameters,
+  SendCallsReturnType,
+  SendTransactionParameters,
+  SendTransactionReturnType,
+  SignTypedDataParameters,
+  SignTypedDataReturnType,
+  SimulateContractParameters,
+  SimulateContractReturnType,
+  SwitchChainParameters,
+  SwitchChainReturnType,
+  VerifyTypedDataParameters,
+  VerifyTypedDataReturnType,
+  WaitForTransactionReceiptParameters,
+  WaitForTransactionReceiptReturnType,
+  WatchBlockNumberParameters,
+  WatchBlockNumberReturnType,
+  WatchBlocksParameters,
+  WatchBlocksReturnType,
+  WatchClientParameters,
+  WatchClientReturnType,
+  WatchContractEventParameters,
+  WatchPendingTransactionsParameters,
+  WatchPublicClientParameters,
+  WatchPublicClientReturnType,
+  WriteContractParameters,
+  WriteContractReturnType,
+} from '@wagmi/core';
+import { getConfig } from '../core/config';
+
+export function connect<
+  connector extends Connector | CreateConnectorFn,
+  withCapabilities extends boolean = false,
+>(
+  parameters: ConnectParameters<Config, connector, withCapabilities>,
+): Promise<ConnectReturnType<Config, connector, withCapabilities>> {
+  return w.connect(getConfig(), parameters as never) as never;
+}
+
+export function deployContract<
+  const abi extends Abi | readonly unknown[],
+  chainId extends Config['chains'][number]['id'],
+>(parameters: DeployContractParameters<abi, Config, chainId>): Promise<DeployContractReturnType> {
+  return w.deployContract(getConfig(), parameters as never) as never;
+}
+
+export function estimateFeesPerGas<type extends FeeValuesType = 'eip1559'>(
+  parameters?: EstimateFeesPerGasParameters<type, Config>,
+): Promise<EstimateFeesPerGasReturnType<type>> {
+  return w.estimateFeesPerGas(getConfig(), parameters as never) as never;
+}
+
+export function estimateGas<chainId extends Config['chains'][number]['id'] | undefined = undefined>(
+  parameters: EstimateGasParameters<Config, chainId>,
+): Promise<EstimateGasReturnType> {
+  return w.estimateGas(getConfig(), parameters as never) as never;
+}
+
+export function estimateMaxPriorityFeePerGas<
+  chainId extends Config['chains'][number]['id'] = Config['chains'][number]['id'],
+>(
+  parameters?: EstimateMaxPriorityFeePerGasParameters<Config, chainId>,
+): Promise<EstimateMaxPriorityFeePerGasReturnType> {
+  return w.estimateMaxPriorityFeePerGas(getConfig(), parameters as never) as never;
+}
+
+export function getBlock<
+  chainId extends Config['chains'][number]['id'],
+  includeTransactions extends boolean = false,
+  blockTag extends BlockTag = 'latest',
+>(
+  parameters?: GetBlockParameters<includeTransactions, blockTag, Config, chainId>,
+): Promise<GetBlockReturnType<includeTransactions, blockTag, Config, chainId>> {
+  return w.getBlock(getConfig(), parameters as never) as never;
+}
+
+export function getBlockNumber<
+  chainId extends Config['chains'][number]['id'] = Config['chains'][number]['id'],
+>(parameters?: GetBlockNumberParameters<Config, chainId>): Promise<GetBlockNumberReturnType> {
+  return w.getBlockNumber(getConfig(), parameters as never) as never;
+}
+
+export function getBlockTransactionCount<
+  chainId extends Config['chains'][number]['id'] = Config['chains'][number]['id'],
+>(
+  parameters?: GetBlockTransactionCountParameters<Config, chainId>,
+): Promise<GetBlockTransactionCountReturnType> {
+  return w.getBlockTransactionCount(getConfig(), parameters as never) as never;
+}
+
+export function getCapabilities<
+  chainId extends Config['chains'][number]['id'] | undefined = undefined,
+>(
+  parameters?: GetCapabilitiesParameters<Config, chainId>,
+): Promise<GetCapabilitiesReturnType<Config, chainId>> {
+  return w.getCapabilities(getConfig(), parameters as never) as never;
+}
+
+export function getClient<chainId extends Config['chains'][number]['id'] | number | undefined>(
+  parameters?: GetClientParameters<Config, chainId>,
+): GetClientReturnType<Config, chainId> {
+  return w.getClient(getConfig(), parameters as never) as never;
+}
+
+export function getConnectorClient<chainId extends Config['chains'][number]['id']>(
+  parameters?: GetConnectorClientParameters<Config, chainId>,
+): Promise<GetConnectorClientReturnType<Config, chainId>> {
+  return w.getConnectorClient(getConfig(), parameters as never) as never;
+}
+
+export function getFeeHistory<
+  chainId extends Config['chains'][number]['id'] = Config['chains'][number]['id'],
+>(parameters: GetFeeHistoryParameters<Config, chainId>): Promise<GetFeeHistoryReturnType> {
+  return w.getFeeHistory(getConfig(), parameters as never) as never;
+}
+
+export function getGasPrice<
+  chainId extends Config['chains'][number]['id'] = Config['chains'][number]['id'],
+>(parameters?: GetGasPriceParameters<Config, chainId>): Promise<GetGasPriceReturnType> {
+  return w.getGasPrice(getConfig(), parameters as never) as never;
+}
+
+export function getPublicClient<
+  chainId extends Config['chains'][number]['id'] | number | undefined,
+>(
+  parameters?: GetPublicClientParameters<Config, chainId>,
+): GetPublicClientReturnType<Config, chainId> {
+  return w.getPublicClient(getConfig(), parameters as never) as never;
+}
+
+export function getTransaction<chainId extends Config['chains'][number]['id']>(
+  parameters: GetTransactionParameters<Config, chainId>,
+): Promise<GetTransactionReturnType<Config, chainId>> {
+  return w.getTransaction(getConfig(), parameters as never) as never;
+}
+
+export function getTransactionConfirmations<
+  chainId extends Config['chains'][number]['id'] | undefined = Config['chains'][number]['id'],
+>(
+  parameters: GetTransactionConfirmationsParameters<Config, chainId>,
+): Promise<GetTransactionConfirmationsReturnType> {
+  return w.getTransactionConfirmations(getConfig(), parameters as never) as never;
+}
+
+export function getTransactionReceipt<chainId extends Config['chains'][number]['id']>(
+  parameters: GetTransactionReceiptParameters<Config>,
+): Promise<GetTransactionReceiptReturnType<Config, chainId>> {
+  return w.getTransactionReceipt(getConfig(), parameters as never) as never;
+}
+
+export function getWalletClient<chainId extends Config['chains'][number]['id']>(
+  parameters?: GetWalletClientParameters<Config, chainId>,
+): Promise<GetWalletClientReturnType<Config, chainId>> {
+  return w.getWalletClient(getConfig(), parameters as never) as never;
+}
+
+export function multicall<
+  const contracts extends readonly ContractFunctionParameters[],
+  allowFailure extends boolean = true,
+>(
+  parameters: MulticallParameters<contracts, allowFailure, Config>,
+): Promise<MulticallReturnType<contracts, allowFailure>> {
+  return w.multicall(getConfig(), parameters as never) as never;
+}
+
+export function prepareTransactionRequest<
+  chainId extends Config['chains'][number]['id'] | undefined,
+  const request extends ViemPrepareTransactionRequestRequest<
+    SelectChains<Config, chainId>['0'],
+    SelectChains<Config, chainId>['0']
+  >,
+>(
+  parameters: PrepareTransactionRequestParameters<Config, chainId, request>,
+): Promise<PrepareTransactionRequestReturnType<Config, chainId, request>> {
+  return w.prepareTransactionRequest(getConfig(), parameters as never) as never;
+}
+
+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 w.readContract(getConfig(), parameters as never) as never;
+}
+
+export function readContracts<
+  const contracts extends readonly ContractFunctionParameters[],
+  allowFailure extends boolean = true,
+>(
+  parameters: ReadContractsParameters<contracts, allowFailure, Config>,
+): Promise<ReadContractsReturnType<contracts, allowFailure>> {
+  return w.readContracts(getConfig(), parameters as never) as never;
+}
+
+export function sendCalls<
+  const calls extends readonly unknown[],
+  chainId extends Config['chains'][number]['id'],
+>(parameters: SendCallsParameters<Config, chainId, calls>): Promise<SendCallsReturnType> {
+  return w.sendCalls(getConfig(), parameters as never) as never;
+}
+
+export function sendTransaction<chainId extends Config['chains'][number]['id']>(
+  parameters: SendTransactionParameters<Config, chainId>,
+): Promise<SendTransactionReturnType> {
+  return w.sendTransaction(getConfig(), parameters as never) as never;
+}
+
+export function signTypedData<
+  const typedData extends TypedData | Record<string, unknown>,
+  primaryType extends keyof typedData | 'EIP712Domain',
+>(parameters: SignTypedDataParameters<typedData, primaryType>): Promise<SignTypedDataReturnType> {
+  return w.signTypedData(getConfig(), parameters as never) as never;
+}
+
+export function simulateContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'nonpayable' | 'payable'>,
+  args extends ContractFunctionArgs<abi, 'nonpayable' | 'payable', functionName>,
+  chainId extends Config['chains'][number]['id'] | undefined = undefined,
+>(
+  parameters: SimulateContractParameters<abi, functionName, args, Config, chainId>,
+): Promise<SimulateContractReturnType<abi, functionName, args, Config, chainId>> {
+  return w.simulateContract(getConfig(), parameters as never) as never;
+}
+
+export function switchChain<chainId extends Config['chains'][number]['id']>(
+  parameters: SwitchChainParameters<Config, chainId>,
+): Promise<SwitchChainReturnType<Config, chainId>> {
+  return w.switchChain(getConfig(), parameters as never) as never;
+}
+
+export function verifyTypedData<
+  const typedData extends TypedData | Record<string, unknown>,
+  primaryType extends keyof typedData | 'EIP712Domain',
+>(
+  parameters: VerifyTypedDataParameters<typedData, primaryType, Config>,
+): Promise<VerifyTypedDataReturnType> {
+  return w.verifyTypedData(getConfig(), parameters as never) as never;
+}
+
+export function waitForTransactionReceipt<chainId extends Config['chains'][number]['id']>(
+  parameters: WaitForTransactionReceiptParameters<Config, chainId>,
+): Promise<WaitForTransactionReceiptReturnType<Config, chainId>> {
+  return w.waitForTransactionReceipt(getConfig(), parameters as never) as never;
+}
+
+export function watchBlockNumber<
+  chainId extends Config['chains'][number]['id'] = Config['chains'][number]['id'],
+>(parameters: WatchBlockNumberParameters<Config, chainId>): WatchBlockNumberReturnType {
+  return w.watchBlockNumber(getConfig(), parameters as never) as never;
+}
+
+export function watchBlocks<
+  chainId extends Config['chains'][number]['id'] = Config['chains'][number]['id'],
+  includeTransactions extends boolean = false,
+  blockTag extends BlockTag = 'latest',
+>(
+  parameters: WatchBlocksParameters<includeTransactions, blockTag, Config, chainId>,
+): WatchBlocksReturnType {
+  return w.watchBlocks(getConfig(), parameters as never) as never;
+}
+
+export function watchClient<chainId extends Config['chains'][number]['id']>(
+  parameters: WatchClientParameters<Config, chainId>,
+): WatchClientReturnType {
+  return w.watchClient(getConfig(), parameters as never) as never;
+}
+
+export function watchContractEvent<
+  chainId extends Config['chains'][number]['id'],
+  const abi extends Abi | readonly unknown[],
+  eventName extends ContractEventName<abi> | undefined,
+  strict extends boolean | undefined = undefined,
+>(parameters: WatchContractEventParameters<abi, eventName, strict, Config, chainId>): () => void {
+  return w.watchContractEvent(getConfig(), parameters as never) as never;
+}
+
+export function watchPendingTransactions<chainId extends Config['chains'][number]['id']>(
+  parameters: WatchPendingTransactionsParameters<Config, chainId>,
+): () => void {
+  return w.watchPendingTransactions(getConfig(), parameters as never) as never;
+}
+
+export function watchPublicClient<chainId extends Config['chains'][number]['id']>(
+  parameters: WatchPublicClientParameters<Config, chainId>,
+): WatchPublicClientReturnType {
+  return w.watchPublicClient(getConfig(), parameters as never) as never;
+}
+
+export function writeContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'nonpayable' | 'payable'>,
+  args extends ContractFunctionArgs<abi, 'nonpayable' | 'payable', functionName>,
+  chainId extends Config['chains'][number]['id'],
+>(
+  parameters: WriteContractParameters<abi, functionName, args, Config, chainId>,
+): Promise<WriteContractReturnType> {
+  return w.writeContract(getConfig(), parameters as never) as never;
+}

package/src/components/qrArea/index.tsx

@@ -12,13 +12,22 @@ interface QrAreaProps {
   hasBg?: boolean;
   label?: string;
   onCopy?: () => void;
+  onOpenApp?: () => void;
 }
 
 const BG_COLOR = '#ffffff';
 const FG_COLOR = '#000000';
 const FG_GRADIENT = 'url(#ck-qr-gradient)';
 
-export const QrArea: FC<QrAreaProps> = ({ uri, status, logoUrl, hasBg = false, label, onCopy }) => {
+export const QrArea: FC<QrAreaProps> = ({
+  uri,
+  status,
+  logoUrl,
+  hasBg = false,
+  label,
+  onCopy,
+  onOpenApp,
+}) => {
   const bgColor = hasBg ? BG_COLOR : 'transparent';
   const fgColor = hasBg ? FG_COLOR : FG_GRADIENT;
 
@@ -60,10 +69,23 @@ export const QrArea: FC<QrAreaProps> = ({ uri, status, logoUrl, hasBg = false, l
             </div>
           )}
         </figure>
-        {(label || onCopy) && (
+        {(label || onCopy || onOpenApp) && (
           <div className="ck-qr-text">
             {label && <p className="ck-qr-label">{label}</p>}
-            {onCopy && <CopyLink onCopy={onCopy} />}
+            {onOpenApp &&
+              (status === 'loading' ? (
+                <span className="ck-qr-open-app-skeleton" aria-hidden="true" />
+              ) : (
+                <button type="button" className="ck-qr-open-app" onClick={onOpenApp}>
+                  Open app
+                </button>
+              ))}
+            {onCopy &&
+              (status === 'loading' ? (
+                <span className="ck-qr-copy-skeleton" aria-hidden="true" />
+              ) : (
+                <CopyLink onCopy={onCopy} />
+              ))}
           </div>
         )}
       </div>

package/src/components/qrArea/style.scss

@@ -2,11 +2,11 @@
 
 .ck-qr-area {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
   flex: 1;
   width: 100%;
-  padding-bottom: 32px;
+  padding: 32px 0;
 }
 
 // ── Text ──────────────────────────────────────────────────────────────────────
@@ -17,6 +17,10 @@
   gap: 6px;
   width: 100%;
   margin-top: 24px;
+
+  @include tablet {
+    gap: 12px;
+  }
 }
 
 .ck-qr-label {
@@ -25,6 +29,46 @@
   text-align: center;
 }
 
+.ck-root .ck-qr-open-app {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 28px;
+  border: 1px solid var(--semantic-divider-divider-4);
+  border-radius: 500px;
+  @include textToken('label4-bold');
+  color: var(--scale-gray-900);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  @include tablet {
+    display: inline-flex;
+  }
+
+  &:hover {
+    background: var(--scale-gray-100);
+  }
+}
+
+.ck-qr-open-app-skeleton {
+  display: none;
+  width: 116px;
+  height: 44px;
+  border-radius: 500px;
+  background: linear-gradient(
+    132deg,
+    var(--scale-gray-100) 36%,
+    var(--scale-gray-200) 51%,
+    var(--scale-gray-100) 66%
+  );
+  background-size: 200% 100%;
+  animation: ck-qr-shimmer 1.5s linear infinite;
+
+  @include tablet {
+    display: block;
+  }
+}
+
 .ck-qr {
   display: flex;
   flex-direction: column;
@@ -76,6 +120,21 @@
   }
 }
 
+.ck-qr-copy-skeleton {
+  display: block;
+  width: 84px;
+  height: 20px;
+  border-radius: 4px;
+  background: linear-gradient(
+    132deg,
+    var(--scale-gray-100) 36%,
+    var(--scale-gray-200) 51%,
+    var(--scale-gray-100) 66%
+  );
+  background-size: 200% 100%;
+  animation: ck-qr-shimmer 1.5s linear infinite;
+}
+
 @keyframes ck-qr-shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }

package/src/components/toast/index.tsx

@@ -0,0 +1,41 @@
+import { type FC, useEffect } from 'react';
+import './style.scss';
+import { CloseIcon } from '../../layout/connectDialog/asset/closeIcon';
+import { CheckIcon } from '../../layout/connectDialog/asset/checkIcon';
+import { WarningIcon } from '../../layout/connectDialog/asset/warningIcon';
+
+export type ToastVariant = 'success' | 'warning';
+
+const AUTO_CLOSE_MS = 3000;
+
+interface ToastProps {
+  message: string;
+  variant?: ToastVariant;
+  onClose?: () => void;
+}
+
+export const Toast: FC<ToastProps> = ({ message, variant = 'success', onClose }) => {
+  useEffect(() => {
+    if (!onClose) return;
+    const timer = setTimeout(onClose, AUTO_CLOSE_MS);
+    return () => clearTimeout(timer);
+  }, [variant, onClose, message]);
+
+  return (
+    <div className="ck-toast" data-variant={variant} role="status" aria-live="polite">
+      <div className="ck-toast-content">
+        {variant === 'warning' ? (
+          <WarningIcon className="ck-toast-icon ck-toast-icon--warning" />
+        ) : (
+          <CheckIcon className="ck-toast-icon ck-toast-icon--success" />
+        )}
+        <p className="ck-toast-message">{message}</p>
+      </div>
+      {onClose && (
+        <button type="button" className="ck-toast-close" onClick={onClose} aria-label="Close">
+          <CloseIcon width={20} height={20} />
+        </button>
+      )}
+    </div>
+  );
+};