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

package/src/layout/connectDialog/style.scss

@@ -46,51 +46,3 @@
     &[data-step='detail'] .ck-selector { display: none !important; }
   }
 }
-
-.ck-root .ck-dialog-snackbar {
-  position: fixed;
-  top: clamp(20px, 9.2vh, 99px);
-  left: 50%;
-  z-index: 1001;
-  width: min(calc(100vw - 40px), 400px);
-  transform: translateX(-50%);
-  animation: ck-dialog-snackbar-in 0.2s ease;
-
-  @include tablet {
-    top: clamp(
-      calc(env(safe-area-inset-top, 0px) + 20px),
-      calc(env(safe-area-inset-top, 0px) + 20px),
-      calc(env(safe-area-inset-top, 0px) + 20px)
-    );
-    left: 20px;
-    right: 20px;
-    width: auto;
-    transform: none;
-  }
-}
-
-@keyframes ck-dialog-snackbar-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-@include tablet {
-  @keyframes ck-dialog-snackbar-in {
-    from {
-      opacity: 0;
-      transform: translateY(8px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-}

package/src/layout/connectDialog/timeout/index.tsx

@@ -10,11 +10,6 @@ export const Timeout: FC<TimeoutProps> = ({ onRetry }) => {
     <div className="ck-timeout">
       <div className="ck-timeout-text">
         <h3 className="ck-timeout-title">Connection Failed</h3>
-        <p className="ck-timeout-desc">
-          The connection took too long to respond.
-          <br />
-          Please check your network and try again.
-        </p>
       </div>
       <button type="button" className="ck-timeout-retry-btn" onClick={onRetry}>
         Try Again

package/src/layout/connectDialog/timeout/style.scss

@@ -21,11 +21,6 @@
   color: var(--scale-gray-900);
 }
 
-.ck-timeout-desc {
-  @include textToken('body4-l1-regular');
-  color: var(--scale-gray-600);
-}
-
 .ck-root .ck-timeout-retry-btn {
   display: inline-flex;
   align-items: center;

package/src/layout/connectDialog/walletQR/index.tsx

@@ -7,9 +7,10 @@ interface WalletQRProps {
   wallet: WCWallet;
   uri?: string | null;
   onCopy?: () => void;
+  onOpenApp?: () => void;
 }
 
-export const WalletQR: FC<WalletQRProps> = ({ wallet, uri = null, onCopy }) => {
+export const WalletQR: FC<WalletQRProps> = ({ wallet, uri = null, onCopy, onOpenApp }) => {
   const downloadUrl = wallet.appIos || wallet.appAndroid || wallet.homepage;
 
   return (
@@ -21,6 +22,7 @@ export const WalletQR: FC<WalletQRProps> = ({ wallet, uri = null, onCopy }) => {
         hasBg
         label={`Scan with ${wallet.name}`}
         onCopy={onCopy}
+        onOpenApp={onOpenApp}
       />
       {downloadUrl && (
         <ActionItem

package/src/layout/detailPanel/index.tsx

@@ -2,7 +2,7 @@ import { type FC } from 'react';
 import { CloseIcon } from '../connectDialog/asset/closeIcon';
 import { BackIcon } from '../connectDialog/asset/backIcon';
 import './style.scss';
-import { type ConnectorId, type WCWallet } from '../../types';
+import { type ConnectBanner, type ConnectorId, type WCWallet } from '../../types';
 import { CONNECTOR_META } from '../../connector-meta';
 import { Idle } from '../connectDialog/idle';
 import { Loading } from '../connectDialog/loading';
@@ -25,6 +25,8 @@ export type DetailContent =
   | 'wallet-qr';
 
 interface DetailPanelProps {
+  connectBanner?: ConnectBanner | null;
+  connectBannerLoading?: boolean;
   selectedConnector: ConnectorId | null;
   selectedWallet?: WCWallet | null;
   content?: DetailContent;
@@ -40,6 +42,8 @@ interface DetailPanelProps {
   onShowAllWallets?: () => void;
   onSelectWallet?: (wallet: WCWallet) => void;
   onCopyLink?: () => void;
+  /** 모바일 QR 화면의 'Open app' 버튼 — 해당 지갑 앱을 deeplink 로 연다. */
+  onOpenApp?: () => void;
   /** timeout 화면의 "Try Again" 버튼 핸들러. */
   onRetry?: () => void;
 }
@@ -68,6 +72,8 @@ const getTitle = (content: DetailContent, connector: ConnectorId | null): string
 };
 
 export const DetailPanel: FC<DetailPanelProps> = ({
+  connectBanner = null,
+  connectBannerLoading = false,
   selectedConnector,
   selectedWallet = null,
   content = 'idle',
@@ -80,6 +86,7 @@ export const DetailPanel: FC<DetailPanelProps> = ({
   onShowAllWallets,
   onSelectWallet,
   onCopyLink,
+  onOpenApp,
   onRetry,
 }) => {
   // CONNECTOR_META 에서 활성 connector 의 logo / downloadUrl 가져옴.
@@ -91,6 +98,10 @@ export const DetailPanel: FC<DetailPanelProps> = ({
       ? `Scan with ${selectedWallet.name}`
       : getTitle(content, selectedConnector);
   const showBack = content !== 'idle';
+  const closeColor =
+    content === 'idle' && !connectBannerLoading
+      ? (connectBanner?.closeColor ?? '#FFFFFF')
+      : undefined;
 
   return (
     <section className="ck-detail">
@@ -105,15 +116,37 @@ export const DetailPanel: FC<DetailPanelProps> = ({
         ) : (
           <span className="ck-detail-header-spacer" aria-hidden="true" />
         )}
-        <button type="button" className="ck-btn-close" onClick={onClose} aria-label="Close">
+        <button
+          type="button"
+          className="ck-btn-close"
+          onClick={onClose}
+          aria-label="Close"
+          style={{ color: closeColor }}
+        >
           <CloseIcon />
         </button>
       </header>
       <div className="ck-detail-body">
-        {content === 'idle' && <Idle />}
+        {content === 'idle' && !connectBannerLoading && (
+          <Idle
+            title={connectBanner?.title}
+            description={connectBanner?.subtitle}
+            linkText={connectBanner?.linkText}
+            linkUrl={connectBanner?.linkUrl}
+            imageUrl={connectBanner?.imageUrl}
+            titleColor={connectBanner?.titleColor}
+            descriptionColor={connectBanner?.subtitleColor}
+            linkTextColor={connectBanner?.linkTextColor}
+          />
+        )}
         {content === 'loading' && <Loading />}
         {content === 'qr' && (
-          <QR uri={qrUri} logoUrl={connectorLogoUrl} downloadUrl={connectorDownloadUrl} />
+          <QR
+            uri={qrUri}
+            logoUrl={connectorLogoUrl}
+            downloadUrl={connectorDownloadUrl}
+            onOpenApp={onOpenApp}
+          />
         )}
         {content === 'timeout' && <Timeout onRetry={onRetry} />}
         {(content === 'metamask-ext' || content === 'metamask-qr') && (
@@ -122,7 +155,7 @@ export const DetailPanel: FC<DetailPanelProps> = ({
             logoUrl={connectorLogoUrl}
             uri={qrUri}
             downloadUrl={connectorDownloadUrl}
-            onCopy={onCopyLink}
+            onOpenApp={onOpenApp}
           />
         )}
         {content === 'walletconnect' && (
@@ -142,7 +175,7 @@ export const DetailPanel: FC<DetailPanelProps> = ({
           />
         )}
         {content === 'wallet-qr' && selectedWallet && (
-          <WalletQR wallet={selectedWallet} uri={qrUri} onCopy={onCopyLink} />
+          <WalletQR wallet={selectedWallet} uri={qrUri} onCopy={onCopyLink} onOpenApp={onOpenApp} />
         )}
       </div>
     </section>

package/src/layout/detailPanel/style.scss

@@ -13,11 +13,12 @@
 .ck-detail-header {
   display: flex;
   align-items: center;
+  position: relative;
+  z-index: 1;
   gap: 10px;
   height: 60px;
   padding: 0 20px;
   flex-shrink: 0;
-  background: var(--semantic-paper-sheet);
 }
 
 .ck-btn-back {

package/src/layout/selectorPanel/index.tsx

@@ -87,6 +87,7 @@ export const SelectorPanel: FC<SelectorPanelProps> = ({
 
         <a
           className="ck-no-wallet-btn"
+          // TODO: Change to Penguin Wallet
           href="https://creditcoin.org/Credit-Wallet"
           target="_blank"
           rel="noopener noreferrer"

package/src/types.ts

@@ -37,6 +37,26 @@ export type WCSubView = 'qr' | 'list' | 'wallet';
 
 export type ConnectKitTheme = 'light' | 'dark';
 
+export type ConnectBannerSiteKey =
+  | 'penguin-swap'
+  | 'penguin-bridge'
+  | 'penguin-base'
+  | 'penguin-wallet';
+
+export interface ConnectBanner {
+  id: number;
+  siteKey: ConnectBannerSiteKey;
+  title: string;
+  subtitle: string;
+  linkText: string;
+  linkUrl: string;
+  imageUrl: string;
+  titleColor: string;
+  subtitleColor: string;
+  linkTextColor: string;
+  closeColor: string;
+}
+
 export interface ConnectResult {
   address: `0x${string}`;
   connectorId: ConnectorId;

package/src/utils/platform.ts

@@ -3,6 +3,13 @@ export const isMobileDevice = (): boolean => {
   return /android|iphone|ipad|ipod/i.test(navigator.userAgent);
 };
 
+// 인앱 지갑 웹뷰 판별: 모바일 + 호스트가 window.ethereum(EIP-1193) 을 주입한 경우.
+export const hasInjectedMobileProvider = (): boolean => {
+  if (!isMobileDevice()) return false;
+  if (typeof window === 'undefined') return false;
+  return typeof (window as Window & { ethereum?: unknown }).ethereum !== 'undefined';
+};
+
 export const tryOpenDeepLink = (uri: string, deepLinkBase: string): void => {
   const sep = deepLinkBase.endsWith('/') ? '' : '/';
   window.location.replace(`${deepLinkBase}${sep}wc?uri=${encodeURIComponent(uri)}`);

package/src/api/account.ts

@@ -1,21 +0,0 @@
-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/asset.ts

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

package/src/api/balance.ts

@@ -1,10 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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/components/snackbar/index.tsx

@@ -1,25 +0,0 @@
-import { type FC } from 'react';
-import './style.scss';
-import { CloseIcon } from '../../layout/connectDialog/asset/closeIcon';
-import { CheckIcon } from '../../layout/connectDialog/asset/checkIcon';
-
-interface SnackbarProps {
-  message: string;
-  onClose?: () => void;
-}
-
-export const Snackbar: FC<SnackbarProps> = ({ message, onClose }) => {
-  return (
-    <div className="ck-snackbar" role="status" aria-live="polite">
-      <div className="ck-snackbar-content">
-        <CheckIcon className="ck-snackbar-check" />
-        <p className="ck-snackbar-message">{message}</p>
-      </div>
-      {onClose && (
-        <button type="button" className="ck-snackbar-close" onClick={onClose} aria-label="Close">
-          <CloseIcon width={20} height={20} />
-        </button>
-      )}
-    </div>
-  );
-};

package/src/components/snackbar/style.scss

@@ -1,51 +0,0 @@
-@use '../../style/mixin.scss' as *;
-
-.ck-snackbar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 12px 16px;
-  border-radius: 8px;
-  background: var(--semantic-paper-sheet);
-  border: 1px solid var(--semantic-divider-divider-1);
-  width: 100%;
-  max-width: 400px;
-
-  @include tablet {
-    max-width: none;
-  }
-}
-
-.ck-snackbar-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.ck-snackbar-check {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  color: var(--semantic-information-success);
-}
-
-.ck-snackbar-message {
-  @include textToken('body3-l1-medium'); 
-  color: var(--scale-gray-900);
-  flex: 1;
-  min-width: 0;
-}
-
-.ck-root .ck-snackbar-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--scale-gray-700);
-  cursor: pointer;
-}