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

package/src/components/qrArea/index.tsx

@@ -0,0 +1,70 @@
+import { type FC, type CSSProperties } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { CopyLink } from '../copyLink';
+import './style.scss';
+
+export type QrAreaStatus = 'loading' | 'ready' | 'timeout';
+
+interface QrAreaProps {
+  uri?: string | null;
+  status: QrAreaStatus;
+  logoUrl?: string;
+  hasBg?: boolean;
+  label?: string;
+  onCopy?: () => void;
+}
+
+const BG_COLOR = '#ffffff';
+const FG_COLOR = '#000000';
+const FG_GRADIENT = 'url(#ck-qr-gradient)';
+
+export const QrArea: FC<QrAreaProps> = ({ uri, status, logoUrl, hasBg = false, label, onCopy }) => {
+  const bgColor = hasBg ? BG_COLOR : 'transparent';
+  const fgColor = hasBg ? FG_COLOR : FG_GRADIENT;
+
+  return (
+    <div className="ck-qr-area">
+      <div className="ck-qr-group">
+        <figure className={`ck-qr ck-qr-${status}`} aria-label="QR Code">
+          {status === 'loading' && (
+            <div className="ck-qr-skeleton" aria-busy="true" aria-label="Loading QR code" />
+          )}
+          {status === 'ready' && uri && (
+            <div
+              className="ck-qr-frame"
+              style={{ 'background': bgColor, '--ck-qr-bg': bgColor } as CSSProperties}
+            >
+              {!hasBg && (
+                <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
+                  <defs>
+                    <linearGradient id="ck-qr-gradient" x1="67%" y1="11%" x2="45%" y2="99%">
+                      <stop offset="0%" stopColor="#7B91FF" />
+                      <stop offset="100%" stopColor="#61BCFF" />
+                    </linearGradient>
+                  </defs>
+                </svg>
+              )}
+              <QRCodeSVG
+                value={uri}
+                size={288}
+                bgColor={bgColor}
+                fgColor={fgColor}
+                level="M"
+                marginSize={0}
+                imageSettings={
+                  logoUrl ? { src: logoUrl, width: 68, height: 68, excavate: true } : undefined
+                }
+              />
+            </div>
+          )}
+        </figure>
+        {(label || onCopy) && (
+          <div className="ck-qr-text">
+            {label && <p className="ck-qr-label">{label}</p>}
+            {onCopy && <CopyLink onCopy={onCopy} />}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/qrArea/style.scss

@@ -0,0 +1,130 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-qr-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  padding-bottom: 32px;
+}
+
+// .ck-qr-group {
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   gap: 24px;
+// }
+
+// ── Text ──────────────────────────────────────────────────────────────────────
+.ck-qr-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  margin-top: 24px;
+}
+
+.ck-qr-label {
+  @include textToken('subtitle2-bold');
+  color: var(--scale-gray-900);
+  text-align: center;
+}
+
+.ck-qr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  border-radius: 20px;
+  overflow: hidden;
+  outline: none;
+}
+
+.ck-qr-loading {
+  border: 1px solid var(--semantic-divider-divider-1);
+}
+
+.ck-qr-timeout {
+  border: 1px solid var(--semantic-divider-divider-1);
+}
+
+// ── Skeleton ──────────────────────────────────────────────────────────────────
+.ck-qr-skeleton {
+  width: 248px;
+  height: 248px;
+  background: linear-gradient(
+    132deg,
+    var(--scale-gray-100) 36%,
+    var(--scale-gray-200) 51%,
+    var(--scale-gray-100) 66%
+  );
+  background-size: 200% 100%;
+  animation: ck-qr-shimmer 1.5s linear infinite;
+
+  @include tablet {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+@keyframes ck-qr-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+// ── Ready ─────────────────────────────────────────────────────────────────────
+.ck-qr-frame {
+  --ck-qr-bg: transparent;
+  padding: 20px;
+  border-radius: 20px;
+  border: 1px solid var(--semantic-divider-divider-1);
+
+  svg {
+    display: block;
+    width: 246px;
+    height: 246px;
+
+    @include tablet {
+      width: 198px;
+      height: 198px;
+    }
+  }
+}
+
+// ── Timeout ───────────────────────────────────────────────────────────────────
+.ck-qr-timeout {
+  width: 248px;
+  height: 248px;
+  background: var(--scale-gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include tablet {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+.ck-qr-timeout-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.ck-qr-timeout-icon {
+  display: block;
+  width: 32px;
+  height: 32px;
+  background: var(--scale-gray-400);
+  border-radius: 50%;
+}
+
+.ck-qr-timeout-text {
+  @include textToken('label5-regular');
+  color: var(--scale-gray-600);
+  text-align: center;
+}

package/src/components/searchBar/asset/Search.tsx

@@ -0,0 +1,20 @@
+import { type FC, type SVGProps } from 'react';
+
+export const SearchIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="19"
+      viewBox="0 0 20 19"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M14.4688 8.03418C14.4688 4.48066 11.5877 1.59961 8.03418 1.59961C4.48068 1.59963 1.59961 4.48067 1.59961 8.03418C1.59963 11.5877 4.48069 14.4688 8.03418 14.4688C11.5877 14.4688 14.4688 11.5877 14.4688 8.03418ZM16.0577 8.44726C15.9732 10.1146 15.3799 11.6473 14.4307 12.8946L19.0674 17.5108L19.1221 17.5713C19.3788 17.8848 19.3608 18.3474 19.0674 18.6397C18.7738 18.9319 18.3091 18.95 17.9942 18.6944L17.9336 18.6397L13.3389 14.0645C12.0201 15.2255 10.3191 15.9628 8.44726 16.0576L8.03418 16.0684C3.59703 16.0684 1.9e-05 12.4714 0 8.03418L0.010742 7.62109C0.225741 3.3759 3.73556 1.8e-05 8.03418 0L8.44726 0.010742C12.6925 0.225746 16.0684 3.73555 16.0684 8.03418L16.0577 8.44726Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/searchBar/asset/XMarkCircle.tsx

@@ -0,0 +1,24 @@
+import { type FC, type SVGProps } from 'react';
+
+export const XMarkCircleIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <circle cx="10" cy="10" r="10" fill="currentColor" />
+      <path
+        d="M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5"
+        stroke="var(--semantic-paper-sheet)"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};

package/src/components/searchBar/index.tsx

@@ -0,0 +1,44 @@
+import { type FC, type ChangeEvent } from 'react';
+import './style.scss';
+import { SearchIcon } from './asset/Search';
+import { XMarkCircleIcon } from './asset/XMarkCircle';
+
+interface SearchBarProps {
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+  onClear: () => void;
+}
+
+export const SearchBar: FC<SearchBarProps> = ({
+  value,
+  placeholder = 'Search wallet',
+  onChange,
+  onClear,
+}) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
+
+  return (
+    <div className="ck-search">
+      <SearchIcon className="ck-search-icon" />
+      <input
+        className="ck-search-input"
+        type="search"
+        value={value}
+        placeholder={placeholder}
+        onChange={handleChange}
+        aria-label="Search wallet"
+      />
+      <button
+        type="button"
+        className="ck-search-clear"
+        onClick={onClear}
+        aria-label="Clear search"
+        aria-hidden={!value || undefined}
+        tabIndex={value ? 0 : -1}
+      >
+        <XMarkCircleIcon />
+      </button>
+    </div>
+  );
+};

package/src/components/searchBar/style.scss

@@ -0,0 +1,58 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-root .ck-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  padding: 12px 16px;
+  border-radius: 100px;
+  background: var(--scale-gray-100);
+  border: 1px solid transparent;
+  transition: border-color 0.15s ease;
+
+  &:focus-within {
+    border-color: var(--semantic-brand-trugi-primary);
+  }
+}
+
+.ck-search-icon {
+  display: block;
+  flex-shrink: 0;
+  color: var(--scale-gray-500);
+  width: 20px;
+  height: 19px;
+}
+
+.ck-root .ck-search-input {
+  flex: 1;
+  @include textToken('body4-l2-regular');
+  color: var(--scale-gray-900);
+  caret-color: var(--semantic-brand-trugi-primary);
+  background: none;
+  min-width: 0;
+
+  &::placeholder {
+    color: var(--scale-gray-500);
+  }
+
+  &::-webkit-search-cancel-button {
+    display: none;
+  }
+}
+
+.ck-root .ck-search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--scale-gray-500);
+  cursor: pointer;
+  visibility: hidden;
+
+  &:not([aria-hidden]) {
+    visibility: visible;
+  }
+}

package/src/components/snackbar/index.tsx

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

@@ -0,0 +1,51 @@
+@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;
+}

package/src/components/toggle/index.tsx

@@ -0,0 +1,27 @@
+import './style.scss';
+import { type FC } from 'react';
+
+interface ToggleProps {
+  checked: boolean;
+  label: string;
+  onChange: (checked: boolean) => void;
+}
+
+export const Toggle: FC<ToggleProps> = ({ checked, label, onChange }) => {
+  return (
+    <label className="ck-toggle">
+      <input
+        className="ck-toggle-input"
+        type="checkbox"
+        role="switch"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        aria-label={label}
+      />
+      <span className="ck-toggle-track" aria-hidden="true">
+        <span className="ck-toggle-thumb" />
+      </span>
+      <span className="ck-toggle-label">{label}</span>
+    </label>
+  );
+};

package/src/components/toggle/style.scss

@@ -0,0 +1,53 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.ck-toggle-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.ck-toggle-track {
+  position: relative;
+  width: 40px;
+  height: 24px;
+  border-radius: 100px;
+  background: var(--scale-gray-400);
+  transition: background 0.2s;
+  flex-shrink: 0;
+
+  .ck-toggle-input:checked + & {
+    background: var(--semantic-brand-trugi-primary);
+  }
+}
+
+.ck-toggle-thumb {
+  position: absolute;
+  top: 3px;
+  left: 2.4px;
+  width: 19.2px;
+  height: 19.2px;
+  border-radius: 50%;
+  background: var(--static-white-main);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  transition: transform 0.2s;
+
+  .ck-toggle-input:checked ~ .ck-toggle-track & {
+    transform: translateX(16px);
+  }
+}
+
+.ck-toggle-label {
+  @include textToken('body4-l2-regular'); 
+  color: var(--scale-gray-700);
+  white-space: nowrap;
+}

package/src/components/walletGrid/index.tsx

@@ -0,0 +1,64 @@
+import { type FC } from 'react';
+import './style.scss';
+import { type WCWallet } from '../../types';
+import wcBadge from '../../../assets/wc-search.png';
+
+interface WalletGridProps {
+  wallets: WCWallet[];
+  isLoading: boolean;
+  onSelect: (wallet: WCWallet) => void;
+}
+
+export const WalletGrid: FC<WalletGridProps> = ({ wallets, isLoading, onSelect }) => {
+  if (isLoading) {
+    return (
+      <div className="ck-wallet-grid-scroll">
+        <ul className="ck-wallet-grid ck-wallet-grid--loading" role="list" aria-busy="true">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <li key={i} className="ck-wallet-grid-item">
+              <span className="ck-wallet-grid-icon ck-wallet-grid-icon--skeleton" />
+              <span className="ck-wallet-grid-name ck-wallet-grid-name--skeleton" />
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ck-wallet-grid-scroll">
+      <ul className="ck-wallet-grid" role="list">
+        {wallets.map((wallet) => (
+          <li key={wallet.id}>
+            <button type="button" className="ck-wallet-grid-item" onClick={() => onSelect(wallet)}>
+              {wallet.imageUrl ? (
+                <img
+                  className="ck-wallet-grid-icon"
+                  src={wallet.imageUrl}
+                  alt=""
+                  aria-hidden="true"
+                />
+              ) : (
+                <span className="ck-wallet-grid-icon" aria-hidden="true" />
+              )}
+              <span className="ck-wallet-grid-name-wrap">
+                <span className="ck-wallet-grid-name">{wallet.name}</span>
+                {(wallet.mobileNative ||
+                  wallet.mobileUniversal ||
+                  wallet.desktopNative ||
+                  wallet.desktopUniversal) && (
+                  <img
+                    className="ck-wallet-grid-wc-badge"
+                    src={wcBadge}
+                    alt=""
+                    aria-hidden="true"
+                  />
+                )}
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

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