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

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

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