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

package/src/components/walletGrid/style.scss

@@ -0,0 +1,108 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-wallet-grid-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  @include themedScrollbar;
+}
+
+.ck-wallet-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-auto-rows: auto;
+  column-gap: 16px;
+  row-gap: 16px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+
+  @include small-mobile {
+    row-gap: 3px;
+  }
+  @include max-width(392px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.ck-root .ck-wallet-grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 20px 12px;
+  width: 100%;
+  cursor: pointer;
+}
+
+.ck-wallet-grid-icon {
+  width: 54px;
+  height: 54px;
+  max-width: none;
+  border-radius: 12px;
+  flex-shrink: 0;
+  background: var(--scale-gray-200);
+  overflow: hidden;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.ck-wallet-grid-name-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ck-wallet-grid-name {
+  @include textToken('label6-bold'); 
+  color: var(--scale-gray-900);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+.ck-wallet-grid-wc-badge {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+// ── Skeleton ──────────────────────────────────────────────────────────────────
+.ck-wallet-grid-loading .ck-wallet-grid-item {
+  cursor: default;
+}
+
+.ck-wallet-grid-icon-skeleton {
+  background: var(--scale-gray-100);
+  animation: ck-grid-pulse 1.5s ease-in-out infinite;
+}
+
+.ck-wallet-grid-name-skeleton {
+  height: 12px;
+  border-radius: 4px;
+  background: var(--scale-gray-100);
+  width: 60%;
+  margin: 0 auto;
+  animation: ck-grid-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes ck-grid-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}

package/src/components/walletItem/index.tsx

@@ -0,0 +1,49 @@
+import { type FC } from 'react';
+import './style.scss';
+import { type ConnectorId } from '../../types';
+
+interface WalletItemProps {
+  id: ConnectorId;
+  label: string;
+  logoUrl?: string;
+  isSelected: boolean;
+  isRecent?: boolean;
+  onSelect: (id: ConnectorId) => void;
+}
+
+export const WalletItem: FC<WalletItemProps> = ({
+  id,
+  label,
+  logoUrl,
+  isSelected,
+  isRecent = false,
+  onSelect,
+}) => {
+  return (
+    <button
+      type="button"
+      className={`ck-wallet-item${isSelected ? ' is-selected' : ''}`}
+      onClick={() => onSelect(id)}
+      aria-pressed={isSelected}
+    >
+      {logoUrl ? (
+        <img
+          className={`ck-wallet-item-icon${id === 'METAMASK' ? ' has-bg' : ''}`}
+          src={logoUrl}
+          alt=""
+          aria-hidden="true"
+        />
+      ) : (
+        <span className="ck-wallet-item-icon" aria-hidden="true" />
+      )}
+      <span className="ck-wallet-item-txt">
+        <span className="ck-wallet-item-label">{label}</span>
+        {isRecent && (
+          <span className="ck-wallet-item-badge" aria-label="Recently used">
+            Recent
+          </span>
+        )}
+      </span>
+    </button>
+  );
+};

package/src/components/walletItem/style.scss

@@ -0,0 +1,70 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-root .ck-wallet-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 20px;
+  border-radius: 12px;
+  background: var(--scale-gray-100);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: var(--scale-gray-200);
+  }
+
+  &.is-selected {
+    background: var(--semantic-brand-trugi-primary);
+
+    .ck-wallet-item-label {
+      color: var(--static-white-main);
+    }
+
+    .ck-wallet-item-badge {
+      background: var(--static-white-alpha-200);
+      color: var(--static-white-main);
+    }
+  }
+}
+
+.ck-wallet-item-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  overflow: hidden;
+  object-fit: cover;
+
+  &.has-bg {
+    background: var(--static-white-main);
+    padding: 2px;
+  }
+}
+
+.ck-wallet-item-txt {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ck-wallet-item-label {
+  @include textToken('label3-bold');
+  color: var(--scale-gray-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+}
+
+.ck-wallet-item-badge {
+  @include textToken('caption3-bold');
+  color: var(--semantic-brand-trugi-primary);
+  background: var(--scale-blue2-alpha-100);
+  padding: 4px 8px;
+  border-radius: 500px;
+  flex-shrink: 0;
+}

package/src/connector-meta.ts

@@ -1,5 +1,5 @@
 import { type ConnectorId } from './types';
-import creditWalletIcon from '../assets/creditwallet.png';
+import penguinWalletIcon from '../assets/penguinwallet.png';
 import metaMaskIcon from '../assets/metamask.png';
 import wcIcon from '../assets/wc.png';
 
@@ -13,17 +13,10 @@ export interface ConnectorMeta {
 
 export const CONNECTOR_META: Record<ConnectorId, ConnectorMeta> = {
   CREDIT_CONNECT: {
-    label: 'Continue with Credit Wallet',
-    detailTitle: 'Scan with Credit Wallet',
+    label: 'Continue with PenguinWallet',
+    detailTitle: 'Scan with PenguinWallet',
     downloadUrl: 'https://creditwallet.onelink.me/Jv54',
-    logoUrl: creditWalletIcon,
-    // deepLinkBase: TODO — 앱 측 CC 딥링크 스킴 확정 후 추가
-  },
-  CREDIT_WALLET: {
-    label: 'Credit Wallet',
-    detailTitle: 'Scan with Credit Wallet',
-    downloadUrl: 'https://creditwallet.onelink.me/Jv54',
-    logoUrl: creditWalletIcon,
+    logoUrl: penguinWalletIcon,
     deepLinkBase: 'creditwallet://',
   },
   METAMASK: {
@@ -39,3 +32,15 @@ export const CONNECTOR_META: Record<ConnectorId, ConnectorMeta> = {
     logoUrl: wcIcon,
   },
 };
+
+// wagmi connector id (예: 'credit-connect' · 'metaMaskSDK' · 'walletConnect') → kit ConnectorId.
+// wagmi storage 의 recentConnectorId 복원 · account.connector 식별에 공용 사용.
+export 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;
+};

package/src/core/config.ts

@@ -0,0 +1,102 @@
+import { createConfig, createStorage } from 'wagmi';
+import { metaMask, walletConnect, injected } from 'wagmi/connectors';
+import type { Config } from 'wagmi';
+import type { ConnectKitConfig } from '../types';
+import { creditConnectConnector } from '../creditConnectConnector';
+import { LocalStorageProvider } from '@gluwa/credit-connect-storage-local';
+import { tweetNaclE2EE } from '@gluwa/credit-connect-e2ee-tweetnacl';
+import { wsHubFactory } from '@gluwa/credit-connect-hub-node-ws';
+
+type KitSlot = {
+  config: Config | null;
+  kitConfig: ConnectKitConfig | null;
+};
+
+const SLOT_KEY = Symbol.for('@gluwa/connect-kit:slot');
+
+type GlobalWithSlot = typeof globalThis & {
+  [SLOT_KEY]?: KitSlot;
+};
+
+const getSlot = (): KitSlot => {
+  const g = globalThis as GlobalWithSlot;
+  if (!g[SLOT_KEY]) {
+    g[SLOT_KEY] = { config: null, kitConfig: null };
+  }
+  return g[SLOT_KEY];
+};
+
+export const initConfig = (kitConfig: ConnectKitConfig): Config => {
+  const slot = getSlot();
+  if (slot.config) {
+    if (slot.kitConfig !== kitConfig) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[connect-kit] initConfig called again with a different kitConfig — new chains/transports ignored. Call resetConfig() first to re-init.',
+      );
+    }
+    return slot.config;
+  }
+
+  const connectors = [];
+
+  if (kitConfig.wcProjectId) {
+    connectors.push(walletConnect({ projectId: kitConfig.wcProjectId, showQrModal: false }));
+  }
+
+  connectors.push(
+    metaMask({ headless: true, storage: { enabled: true } }),
+    injected({ shimDisconnect: false }),
+  );
+
+  if (kitConfig.creditConnect) {
+    connectors.push(
+      creditConnectConnector({
+        projectKey: kitConfig.creditConnect.projectId,
+        serverUrl: kitConfig.creditConnect.serverUrl,
+        storage: new LocalStorageProvider(),
+        e2ee: tweetNaclE2EE,
+        createHub: wsHubFactory.createHubFromDapp,
+      }),
+    );
+  }
+
+  if (kitConfig.extraConnectors?.length) {
+    connectors.push(...kitConfig.extraConnectors);
+  }
+
+  const isBrowser = typeof window !== 'undefined';
+
+  slot.config = createConfig({
+    ssr: true,
+    chains: kitConfig.chains,
+    connectors,
+    transports: kitConfig.transports,
+    storage: isBrowser ? createStorage({ storage: window.localStorage }) : undefined,
+  });
+  slot.kitConfig = kitConfig;
+
+  return slot.config;
+};
+
+export const getConfig = (): Config => {
+  const slot = getSlot();
+  if (!slot.config) {
+    throw new Error('ConnectKit config not initialized. Make sure ConnectKitProvider is mounted.');
+  }
+  return slot.config;
+};
+
+export const getKitConfig = (): ConnectKitConfig => {
+  const slot = getSlot();
+  if (!slot.kitConfig) {
+    throw new Error('ConnectKit config not initialized. Make sure ConnectKitProvider is mounted.');
+  }
+  return slot.kitConfig;
+};
+
+export const resetConfig = (): void => {
+  const slot = getSlot();
+  slot.config = null;
+  slot.kitConfig = null;
+};