@gluwa/connect-kit 0.2.0-next.1 → 0.2.0-next.11

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

@@ -0,0 +1,31 @@
+import { type FC } from 'react';
+import './style.scss';
+
+interface TimeoutProps {
+  onRetry?: () => void;
+}
+
+export const Timeout: FC<TimeoutProps> = ({ onRetry }) => {
+  return (
+    <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
+      </button>
+      {/* TODO [D]: add help link after url is confirmed */}
+      {/* <p className="ck-timeout-help">
+        Need more help? 
+        <a href="#" className="ck-timeout-help-link">
+          Click here
+        </a>
+      </p> */}
+    </div>
+  );
+};

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

@@ -0,0 +1,64 @@
+@use '../../../style/mixin.scss' as *;
+
+.ck-timeout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 24px;
+  text-align: center;
+}
+
+.ck-timeout-text {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ck-timeout-title {
+  @include textToken('title3-bold');
+  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;
+  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;
+
+  &:hover {
+    background: var(--scale-gray-100);
+  }
+}
+
+.ck-timeout-help {
+  @include textToken('body4-l1-regular');
+  color: var(--scale-gray-500);
+}
+
+.ck-root .ck-timeout-help-link {
+  color: var(--semantic-brand-trugi-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@include tablet {
+  .ck-timeout {
+    min-height: 491px;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { type FC } from 'react';
+import './style.scss';
+import { QrArea } from '../../../components/qrArea';
+import { ActionItem } from '../../../components/actionItem';
+
+interface WalletConnectProps {
+  uri?: string | null;
+  logoUrl?: string;
+  walletCount?: number;
+  onShowAllWallets?: () => void;
+  onCopy?: () => void;
+}
+
+export const WalletConnect: FC<WalletConnectProps> = ({
+  uri,
+  logoUrl,
+  walletCount,
+  onShowAllWallets,
+  onCopy,
+}) => {
+  return (
+    <>
+      <QrArea
+        uri={uri}
+        status={!uri ? 'loading' : 'ready'}
+        logoUrl={logoUrl}
+        hasBg
+        label="Scan this QR Code with your phone"
+        onCopy={onCopy}
+      />
+      <ActionItem
+        as="button"
+        type="button"
+        className="ck-walletconnect-all-btn"
+        onClick={onShowAllWallets}
+      >
+        <span className="ck-walletconnect-all-icon" aria-hidden="true" />
+        <span className="ck-walletconnect-all-label">All Wallets</span>
+        {typeof walletCount === 'number' && walletCount > 0 && (
+          <span className="ck-walletconnect-all-badge">{walletCount}+</span>
+        )}
+      </ActionItem>
+    </>
+  );
+};

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

@@ -0,0 +1,48 @@
+@use '../../../style/mixin.scss' as *;
+
+
+.ck-root .ck-walletconnect-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  @include textToken('body3-l1-regular');
+  color: var(--scale-gray-500);
+  cursor: pointer;
+}
+
+.ck-walletconnect-copy-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
+// ── All Wallets button ─────────────────────────────────────────────────────────
+
+.ck-walletconnect-all-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  background:
+    radial-gradient(circle at 16.5px 16.5px, var(--scale-purple-500) 3px, transparent 4px),
+    radial-gradient(circle at 27.5px 16.5px, var(--scale-purple-500) 3px, transparent 4px),
+    radial-gradient(circle at 16.5px 27.5px, var(--scale-purple-500) 3px, transparent 4px),
+    radial-gradient(circle at 27.5px 27.5px, var(--scale-purple-500) 3px, transparent 4px),
+    var(--scale-gray-300);
+  flex-shrink: 0;
+}
+
+.ck-walletconnect-all-label {
+  flex: 1;
+  @include textToken('subtitle2-bold');
+  color: var(--scale-gray-900);
+  text-align: left;
+}
+
+.ck-walletconnect-all-badge {
+  @include textToken('caption1-bold');
+  color: var(--scale-gray-900);
+  background: var(--scale-gray-300);
+  padding: 4px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,37 @@
+import { type FC } from 'react';
+import { type WCWallet } from '../../../types';
+import { QrArea } from '../../../components/qrArea';
+import { ActionItem } from '../../../components/actionItem';
+
+interface WalletQRProps {
+  wallet: WCWallet;
+  uri?: string | null;
+  onCopy?: () => void;
+}
+
+export const WalletQR: FC<WalletQRProps> = ({ wallet, uri = null, onCopy }) => {
+  const downloadUrl = wallet.appIos || wallet.appAndroid || wallet.homepage;
+
+  return (
+    <>
+      <QrArea
+        uri={uri}
+        status={!uri ? 'loading' : 'ready'}
+        logoUrl={wallet.imageUrl || undefined}
+        hasBg
+        label={`Scan with ${wallet.name}`}
+        onCopy={onCopy}
+      />
+      {downloadUrl && (
+        <ActionItem
+          as="a"
+          href={downloadUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          label={`Don't have ${wallet.name}?`}
+          action="Download"
+        />
+      )}
+    </>
+  );
+};

package/src/layout/detailPanel/index.tsx

@@ -0,0 +1,175 @@
+import { type FC } from 'react';
+import { CloseIcon } from '../connectDialog/asset/closeIcon';
+import { BackIcon } from '../connectDialog/asset/backIcon';
+import './style.scss';
+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';
+import { QR } from '../connectDialog/qr';
+import { Timeout } from '../connectDialog/timeout';
+import { MetaMask } from '../connectDialog/metaMask';
+import { WalletConnect } from '../connectDialog/walletConnect';
+import { AllWallets } from '../allWallets';
+import { WalletQR } from '../connectDialog/walletQR';
+
+export type DetailContent =
+  | 'idle'
+  | 'loading'
+  | 'qr'
+  | 'timeout'
+  | 'metamask-ext'
+  | 'metamask-qr'
+  | 'walletconnect'
+  | 'all-wallets'
+  | 'wallet-qr';
+
+interface DetailPanelProps {
+  connectBanner?: ConnectBanner | null;
+  connectBannerLoading?: boolean;
+  selectedConnector: ConnectorId | null;
+  selectedWallet?: WCWallet | null;
+  content?: DetailContent;
+  /** wagmi connect 가 emit 한 QR code URI (display_uri 이벤트). null = 아직 도착 안 함. */
+  qrUri?: string | null;
+  /** WalletConnect Explorer API 의 walletList (AllWallets 그리드). */
+  wallets?: WCWallet[];
+  walletListLoading?: boolean;
+  /** Selector 의 'WC' 카운트 표시용 — 보통 walletList.length. */
+  walletCount?: number;
+  onBack: () => void;
+  onClose: () => void;
+  onShowAllWallets?: () => void;
+  onSelectWallet?: (wallet: WCWallet) => void;
+  onCopyLink?: () => void;
+  /** timeout 화면의 "Try Again" 버튼 핸들러. */
+  onRetry?: () => void;
+}
+
+const getTitle = (content: DetailContent, connector: ConnectorId | null): string => {
+  switch (content) {
+    case 'idle':
+      return '';
+    case 'loading':
+      return connector ? CONNECTOR_META[connector].detailTitle : '';
+    case 'qr':
+      return connector ? CONNECTOR_META[connector].detailTitle : '';
+    case 'timeout':
+      return connector ? CONNECTOR_META[connector].detailTitle : '';
+    case 'metamask-ext':
+      return 'MetaMask';
+    case 'metamask-qr':
+      return 'Scan with MetaMask';
+    case 'walletconnect':
+      return 'Scan with WalletConnect';
+    case 'all-wallets':
+      return 'All Wallets';
+    case 'wallet-qr':
+      return '';
+  }
+};
+
+export const DetailPanel: FC<DetailPanelProps> = ({
+  connectBanner = null,
+  connectBannerLoading = false,
+  selectedConnector,
+  selectedWallet = null,
+  content = 'idle',
+  qrUri = null,
+  wallets = [],
+  walletListLoading = false,
+  walletCount,
+  onBack,
+  onClose,
+  onShowAllWallets,
+  onSelectWallet,
+  onCopyLink,
+  onRetry,
+}) => {
+  // CONNECTOR_META 에서 활성 connector 의 logo / downloadUrl 가져옴.
+  const connectorMeta = selectedConnector ? CONNECTOR_META[selectedConnector] : null;
+  const connectorLogoUrl = connectorMeta?.logoUrl;
+  const connectorDownloadUrl = connectorMeta?.downloadUrl;
+  const title =
+    selectedWallet && content === 'wallet-qr'
+      ? `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">
+      <header className="ck-detail-header">
+        {showBack && (
+          <button type="button" className="ck-btn-back" onClick={onBack} aria-label="Back">
+            <BackIcon />
+          </button>
+        )}
+        {title ? (
+          <h2 className="ck-detail-title">{title}</h2>
+        ) : (
+          <span className="ck-detail-header-spacer" aria-hidden="true" />
+        )}
+        <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' && !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} />
+        )}
+        {content === 'timeout' && <Timeout onRetry={onRetry} />}
+        {(content === 'metamask-ext' || content === 'metamask-qr') && (
+          <MetaMask
+            variant={content === 'metamask-ext' ? 'extension' : 'qr'}
+            logoUrl={connectorLogoUrl}
+            uri={qrUri}
+            downloadUrl={connectorDownloadUrl}
+            onCopy={onCopyLink}
+          />
+        )}
+        {content === 'walletconnect' && (
+          <WalletConnect
+            uri={qrUri}
+            logoUrl={connectorLogoUrl}
+            walletCount={walletCount}
+            onShowAllWallets={onShowAllWallets}
+            onCopy={onCopyLink}
+          />
+        )}
+        {content === 'all-wallets' && (
+          <AllWallets
+            wallets={wallets}
+            isLoading={walletListLoading}
+            onSelectWallet={onSelectWallet ?? (() => undefined)}
+          />
+        )}
+        {content === 'wallet-qr' && selectedWallet && (
+          <WalletQR wallet={selectedWallet} uri={qrUri} onCopy={onCopyLink} />
+        )}
+      </div>
+    </section>
+  );
+};

package/src/layout/detailPanel/style.scss

@@ -0,0 +1,70 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-detail {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--semantic-paper-dialog);
+  min-height: 0;
+  position: relative;
+}
+
+// ── Header ────────────────────────────────────────────────────────────────────
+.ck-detail-header {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  gap: 10px;
+  height: 60px;
+  padding: 0 20px;
+  flex-shrink: 0;
+}
+
+.ck-btn-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--scale-gray-900);
+}
+
+.ck-detail-title {
+  @include textToken('subtitle1-bold');
+  flex: 1;
+  color: var(--scale-gray-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ck-detail-header-spacer {
+  flex: 1;
+}
+
+.ck-btn-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--scale-gray-900);
+}
+
+// ── Body ──────────────────────────────────────────────────────────────────────
+.ck-detail-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 20px;
+  @include themedScrollbar;
+
+  &:has(.ck-all-wallets) {
+    padding-bottom: 0;
+  }
+}

package/src/layout/selectorPanel/index.tsx

@@ -0,0 +1,100 @@
+import { type FC } from 'react';
+import { CloseIcon } from '../connectDialog/asset/closeIcon';
+import './style.scss';
+import { type ConnectorId } from '../../types';
+import { CONNECTOR_META } from '../../connector-meta';
+import { WalletItem } from '../../components/walletItem';
+import { LinkIcon } from '../connectDialog/asset/linkIcon';
+
+const MAIN_CONNECTORS = new Set<ConnectorId>(['CREDIT_CONNECT']);
+
+interface SelectorPanelProps {
+  connectors: ConnectorId[];
+  selectedConnector: ConnectorId | null;
+  recentConnector?: ConnectorId | null;
+  onSelect: (id: ConnectorId) => void;
+  onClose: () => void;
+}
+
+export const SelectorPanel: FC<SelectorPanelProps> = ({
+  connectors,
+  selectedConnector,
+  recentConnector = null,
+  onSelect,
+  onClose,
+}) => {
+  const mainConnectors = connectors.filter((id) => MAIN_CONNECTORS.has(id));
+  const subConnectors = connectors.filter((id) => !MAIN_CONNECTORS.has(id));
+  const hasDivider = mainConnectors.length > 0 && subConnectors.length > 0;
+
+  return (
+    <section className="ck-selector">
+      <header className="ck-selector-header">
+        <h2 className="ck-selector-title">Connect Wallet</h2>
+        {/* Close button — visible on mobile only via CSS */}
+        <button
+          type="button"
+          className="ck-btn-close ck-selector-close"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <CloseIcon />
+        </button>
+      </header>
+
+      <div className="ck-selector-body">
+        <div className="ck-selector-service">
+          {mainConnectors.length > 0 && (
+            <ul className="ck-selector-main" role="list">
+              {mainConnectors.map((id) => (
+                <li key={id}>
+                  <WalletItem
+                    id={id}
+                    label={CONNECTOR_META[id].label}
+                    logoUrl={CONNECTOR_META[id].logoUrl}
+                    isSelected={selectedConnector === id}
+                    isRecent={recentConnector === id}
+                    onSelect={onSelect}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {hasDivider && (
+            <div className="ck-selector-divider" aria-hidden="true">
+              <span className="ck-selector-divider-label">OR</span>
+            </div>
+          )}
+
+          {subConnectors.length > 0 && (
+            <ul className="ck-selector-sub" role="list">
+              {subConnectors.map((id) => (
+                <li key={id}>
+                  <WalletItem
+                    id={id}
+                    label={CONNECTOR_META[id].label}
+                    logoUrl={CONNECTOR_META[id].logoUrl}
+                    isSelected={selectedConnector === id}
+                    isRecent={recentConnector === id}
+                    onSelect={onSelect}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <a
+          className="ck-no-wallet-btn"
+          href="https://creditcoin.org/Credit-Wallet"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span className="ck-no-wallet-btn-label">I don't have a wallet</span>
+          <LinkIcon className="ck-no-wallet-btn-icon" />
+        </a>
+      </div>
+    </section>
+  );
+};

package/src/layout/selectorPanel/style.scss

@@ -0,0 +1,113 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-selector {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--semantic-paper-sheet);
+  border-right: 1px solid var(--semantic-divider-divider-2);
+
+  @include tablet {
+    border-right: none;
+  }
+}
+
+.ck-selector-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  padding: 0 20px;
+  flex-shrink: 0;
+}
+
+.ck-selector-title {
+  @include textToken('subtitle1-bold');
+  color: var(--scale-gray-900);
+}
+
+.ck-selector-close.ck-btn-close {
+  display: none;
+
+  @include tablet {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.ck-selector-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 20px;
+  gap: 0;
+  @include themedScrollbar;
+}
+
+.ck-selector-service {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.ck-selector-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.ck-selector-sub {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ck-selector-divider {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--semantic-divider-divider-1);
+  }
+}
+
+.ck-selector-divider-label {
+  @include textToken('label4-regular');
+  color: var(--scale-gray-400);
+}
+
+.ck-root .ck-no-wallet-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  padding: 12px 20px;
+  color: var(--scale-gray-600);
+  cursor: pointer;
+
+  @include tablet {
+    margin-top: 20px;
+  }
+}
+
+.ck-no-wallet-btn-label {
+  @include textToken('label4-regular');
+}
+
+.ck-no-wallet-btn-icon {
+  flex-shrink: 0;
+  color: var(--scale-gray-600);
+}