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

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

@@ -0,0 +1,65 @@
+@use '../../../style/mixin.scss' as *;
+
+// ── Extension ─────────────────────────────────────────────────────────────────
+.ck-metamask-extension {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.ck-metamask-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ck-metamask-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  text-align: center;
+}
+
+.ck-metamask-title {
+  @include textToken('subtitle2-bold');
+  color: var(--scale-gray-900);
+}
+
+.ck-metamask-desc {
+  @include textToken('body3-l1-regular'); 
+  color: var(--scale-gray-600);
+}
+
+.ck-metamask-spinner {
+  display: flex;
+  color: var(--scale-gray-400);
+  animation: ck-spin 2.5s linear infinite;
+}
+
+@keyframes ck-spin {
+  to { transform: rotate(360deg); }
+}
+
+
+
+.ck-root .ck-metamask-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  @include textToken('body3-l1-regular');
+  color: var(--scale-gray-500);
+  cursor: pointer;
+}
+
+.ck-metamask-copy-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  // Icon SVG will be added later
+}

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

@@ -0,0 +1,33 @@
+import { type FC } from 'react';
+import { QrArea } from '../../../components/qrArea';
+import { ActionItem } from '../../../components/actionItem';
+
+interface QRProps {
+  uri?: string | null;
+  logoUrl?: string;
+  downloadUrl?: string;
+}
+
+export const QR: FC<QRProps> = ({ uri, logoUrl, downloadUrl }) => {
+  const status = !uri ? 'loading' : 'ready';
+
+  return (
+    <>
+      <QrArea
+        uri={uri}
+        status={status}
+        logoUrl={logoUrl}
+        label="Open the PenguinWallet app and scan the QR"
+      />
+      <ActionItem
+        as="a"
+        href={downloadUrl ?? '#'}
+        target="_blank"
+        rel="noopener noreferrer"
+        label="Get PenguinWallet app"
+        description="Once connected, you can log in with it next time"
+        action="Download"
+      />
+    </>
+  );
+};

package/src/layout/connectDialog/style.scss

@@ -0,0 +1,48 @@
+@use '../../style/index.scss';
+@use '../../style/mixin.scss' as *;
+
+.ck-root {
+  display: contents;
+}
+
+.ck-dialog::backdrop {
+  background: var(--dialog-backdrop-color);
+}
+
+.ck-root .ck-dialog:not([open]) {
+  display: none;
+}
+
+.ck-root .ck-dialog {
+  --dialog-backdrop-color: var(--semantic-overlay-overlay-dim);
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: calc(100% - 40px);
+  max-width: 1120px;
+  height: min(620px, calc(100dvh - 40px));
+
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--semantic-paper-dialog);
+  border: none;
+  padding: 0;
+
+  @include tablet {
+    position: fixed;
+    inset: auto 0 0 0;
+    margin: 0;
+    width: 100%;
+    max-width: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr);
+    max-height: 82dvh;
+    height: auto;
+    border-radius: 12px 12px 0 0;
+
+    &[data-step='selector'] .ck-detail { display: none !important; }
+    &[data-step='detail'] .ck-selector { display: none !important; }
+  }
+}

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