@gluwa/connect-kit 0.2.0-next.8 → 0.2.1-next.1

package/src/layout/detailPanel/style.scss

@@ -3,6 +3,7 @@
 .ck-detail {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   background: var(--semantic-paper-dialog);
   min-height: 0;
   position: relative;
@@ -12,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 {
@@ -61,4 +63,8 @@
   overflow-y: auto;
   padding: 20px;
   @include themedScrollbar;
+
+  &:has(.ck-all-wallets) {
+    padding-bottom: 0;
+  }
 }

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)}`);
@@ -13,7 +20,3 @@ export const tryOpenDeepLink = (uri: string, deepLinkBase: string): void => {
 export const tryOpenCreditWalletDeeplink = (payloadUrl: string): void => {
   window.location.replace(`creditwallet://?uri=${encodeURIComponent(payloadUrl)}`);
 };
-
-export const detectMetaMaskExtension = (): boolean =>
-  typeof window !== 'undefined' &&
-  Boolean((window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum?.isMetaMask);

package/src/wallet-display-override.ts

@@ -0,0 +1,15 @@
+import penguinWalletIcon from '../assets/penguinwallet.png';
+import type { WCWallet } from './types';
+
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 삭제
+export const CREDIT_WALLET_LISTING_ID =
+  'ce02f1ae74686234eabfa7d31876c442779b730dfe7924a3ca0e6559a7afa30f';
+
+export const overrideWalletDisplay = (wallet: WCWallet): WCWallet =>
+  wallet.id === CREDIT_WALLET_LISTING_ID
+    ? {
+        ...wallet,
+        name: 'PenguinWallet',
+        imageUrl: penguinWalletIcon,
+      }
+    : wallet;

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;
-}