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

package/src/index.ts

@@ -3,9 +3,9 @@ import { getBalance } from './api/balance';
 import { switchChain, getPublicClient } from './api/chain';
 import { waitForTransactionReceipt } from './api/transaction';
 import { getAccount, signMessage, signTypedData } from './api/account';
+import { watchAsset } from './api/asset';
 import { watchAccount, watchConnections, reconnect, disconnectAll } from './events/account';
 
-export { ConnectModal } from './ConnectModal';
 export { ConnectKitProvider, useConnectKit } from './ConnectKitProvider';
 export type { ConnectKitContextValue, ConnectKitProviderProps } from './ConnectKitProvider';
 
@@ -14,12 +14,14 @@ export { initConfig } from './core/config';
 export type {
   ConnectErrorContext,
   ConnectErrorReason,
+  ConnectBannerSiteKey,
   ConnectModalProps,
   ConnectKitConfig,
+  ConnectKitTheme,
   Connectors,
+  ConnectorKey,
   ConnectResult,
   ConnectorId,
-  CreditWalletStrategy,
   WCSubView,
   WCWallet,
 } from './types';
@@ -35,6 +37,7 @@ export const connectKit = {
     getAccount,
     signMessage,
     signTypedData,
+    watchAsset,
   },
   events: {
     watchAccount,

package/src/layout/allWallets/index.tsx

@@ -0,0 +1,52 @@
+import { type FC, useState, useMemo } from 'react';
+import './style.scss';
+import { type WCWallet } from '../../types';
+import { SearchBar } from '../../components/searchBar';
+import { Toggle } from '../../components/toggle';
+import { WalletGrid } from '../../components/walletGrid';
+import wcLogo from '../../../assets/wc-search.png';
+
+interface AllWalletsProps {
+  /** Credit Wallet 이 최상단에 오도록 정렬된 상태로 전달됨 — useWCState 의 loadWalletList 에서 처리. */
+  wallets: WCWallet[];
+  isLoading: boolean;
+  onSelectWallet: (wallet: WCWallet) => void;
+}
+
+export const AllWallets: FC<AllWalletsProps> = ({ wallets, isLoading, onSelectWallet }) => {
+  const [search, setSearch] = useState('');
+  const [filterInstalled, setFilterInstalled] = useState(false);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    let list = wallets;
+    if (filterInstalled) {
+      list = list.filter(
+        (w) => w.mobileNative || w.mobileUniversal || w.desktopNative || w.desktopUniversal,
+      );
+    }
+    if (q) {
+      list = list.filter((w) => w.name.toLowerCase().includes(q));
+    }
+    return list;
+  }, [wallets, search, filterInstalled]);
+
+  return (
+    <div className="ck-all-wallets">
+      <div className="ck-all-wallets-controls">
+        <SearchBar value={search} onChange={setSearch} onClear={() => setSearch('')} />
+        <div className="ck-wc-filter-btn">
+          <img className="ck-wc-filter-logo" src={wcLogo} alt="" aria-hidden="true" />
+          <Toggle checked={filterInstalled} label="" onChange={setFilterInstalled} />
+        </div>
+      </div>
+      {!isLoading && filtered.length === 0 ? (
+        <div className="ck-all-wallets-empty" role="status">
+          <p>No Wallet found</p>
+        </div>
+      ) : (
+        <WalletGrid wallets={filtered} isLoading={isLoading} onSelect={onSelectWallet} />
+      )}
+    </div>
+  );
+};

package/src/layout/allWallets/style.scss

@@ -0,0 +1,57 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-all-wallets {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  gap: 12px;
+
+  @include tablet {
+    min-height: min(420px, 55dvh);
+    max-height: calc(100dvh - 60px);
+  }
+}
+
+.ck-all-wallets-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+
+  .ck-search {
+    min-width: 0;
+  }
+}
+
+.ck-wc-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 100px;
+  background: var(--scale-gray-100);
+  flex-shrink: 0;
+}
+
+.ck-wc-filter-logo {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  object-fit: cover;
+  background: var(--static-white-main);
+}
+
+.ck-all-wallets-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+
+  p {
+    @include textToken('body4-l2-regular');
+    color: var(--scale-gray-600);
+    text-align: center;
+  }
+}

package/src/layout/connectDialog/asset/backIcon.tsx

@@ -0,0 +1,24 @@
+import { type FC, type SVGProps } from 'react';
+
+export const BackIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={14}
+      height={20}
+      viewBox="0 0 14 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M10 4L4 10L10 16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/checkIcon.tsx

@@ -0,0 +1,28 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CheckIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <g clipPath="url(#clip0_check)">
+        <path
+          d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM10.4512 15.6953C10.7879 15.973 11.2866 15.9546 11.6016 15.6396L16.7529 10.4883C17.0877 10.1536 17.0877 9.61013 16.7529 9.27539C16.4182 8.94114 15.8756 8.94091 15.541 9.27539L10.9961 13.8223L8.56836 11.3936C8.23374 11.0591 7.69116 11.0593 7.35645 11.3936C7.02171 11.7283 7.02171 12.2717 7.35645 12.6064L10.3867 15.6367C10.4075 15.6575 10.4289 15.6771 10.4512 15.6953Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_check">
+          <rect width="20" height="20" fill="white" transform="translate(2 2)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/closeIcon.tsx

@@ -0,0 +1,21 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CloseIcon: 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}
+    >
+      <path
+        d="M15.7785 3.2787C16.0389 3.01835 16.4614 3.01835 16.7217 3.2787C16.9819 3.53899 16.9819 3.96077 16.7217 4.22108L10.9421 9.99989L16.7209 15.7787L16.7673 15.8292C16.9809 16.091 16.9658 16.4778 16.7217 16.7219C16.4776 16.9658 16.0908 16.981 15.829 16.7675L15.7785 16.7211L9.99971 10.9422L4.22172 16.7211L4.17126 16.7675C3.90947 16.981 3.52261 16.9658 3.27852 16.7219C3.03445 16.4778 3.0194 16.091 3.23295 15.8292L3.27934 15.7787L9.05733 9.99989L3.27852 4.22108C3.01842 3.96077 3.01839 3.53899 3.27852 3.2787C3.53887 3.01835 3.96137 3.01835 4.22172 3.2787L9.99971 9.05669L15.7785 3.2787Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/copyIcon.tsx

@@ -0,0 +1,28 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CopyIcon: 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}
+    >
+      <g clipPath="url(#clip0_copy)">
+        <path
+          d="M16.2247 6.89437C17.1245 6.89437 17.8539 7.6238 17.854 8.5236V16.2246C17.854 17.1244 17.1245 17.8538 16.2247 17.8538H8.52373C7.62388 17.8538 6.89449 17.1244 6.89449 16.2246V8.5236C6.89454 7.6238 7.62391 6.89437 8.52373 6.89437H16.2247ZM8.52373 8.22738C8.36029 8.22738 8.22755 8.36019 8.2275 8.5236V16.2246C8.2275 16.3881 8.36026 16.5208 8.52373 16.5208H16.2247C16.3882 16.5208 16.521 16.3881 16.521 16.2246V8.5236C16.5209 8.36019 16.3881 8.22738 16.2247 8.22738H8.52373ZM13.0225 2.57064C13.8439 2.65419 14.4848 3.34822 14.4848 4.19173V4.91357C14.4848 5.28173 14.1865 5.58002 13.8183 5.58008C13.4501 5.58008 13.1518 5.28176 13.1518 4.91357V4.19173C13.1518 4.04865 13.05 3.92956 12.915 3.90202L12.8556 3.8955H4.19185C4.02839 3.8955 3.89563 4.02827 3.89563 4.19173V12.8555L3.90214 12.9148C3.92968 13.0498 4.04878 13.1517 4.19185 13.1517H4.91369L4.98206 13.1549C5.31816 13.1892 5.5802 13.4731 5.5802 13.8182C5.58014 14.1633 5.31813 14.4473 4.98206 14.4814L4.91369 14.4847H4.19185C3.34833 14.4847 2.65432 13.8438 2.57076 13.0223L2.56262 12.8555V4.19173C2.56262 3.29189 3.29201 2.5625 4.19185 2.5625H12.8556L13.0225 2.57064Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_copy">
+          <rect width="15.8333" height="15.8333" fill="white" transform="translate(2.5 2.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/linkIcon.tsx

@@ -0,0 +1,24 @@
+import { type FC, type SVGProps } from 'react';
+
+export const LinkIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M6 3L11 8L6 13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/spinner.tsx

@@ -0,0 +1,21 @@
+import { type FC, type SVGProps } from 'react';
+
+export const Spinner: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={40}
+      height={40}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M19.995 3.34375C20.9155 3.34375 21.6617 4.08995 21.6617 5.01042V10.0104C21.6617 10.9309 20.9155 11.6771 19.995 11.6771C19.0745 11.6771 18.3284 10.9309 18.3284 10.0104V5.01042C18.3284 4.08995 19.0745 3.34375 19.995 3.34375ZM19.995 28.3438C20.9155 28.3438 21.6617 29.0899 21.6617 30.0104V35.0104C21.6617 35.9309 20.9155 36.6771 19.995 36.6771C19.0745 36.6771 18.3284 35.9309 18.3284 35.0104V30.0104C18.3284 29.0899 19.0745 28.3438 19.995 28.3438ZM36.6617 20.0104C36.6617 20.9309 35.9155 21.6771 34.995 21.6771H29.995C29.0745 21.6771 28.3284 20.9309 28.3284 20.0104C28.3284 19.0899 29.0745 18.3438 29.995 18.3438H34.995C35.9155 18.3438 36.6617 19.0899 36.6617 20.0104ZM11.6617 20.0104C11.6617 20.9309 10.9155 21.6771 9.99504 21.6771H4.99504C4.07457 21.6771 3.32837 20.9309 3.32837 20.0104C3.32837 19.0899 4.07457 18.3438 4.99504 18.3438H9.99504C10.9155 18.3438 11.6617 19.0899 11.6617 20.0104ZM31.7802 31.7956C31.1292 32.4464 30.074 32.4464 29.4232 31.7956L25.8875 28.2599C25.2367 27.6091 25.2367 26.5539 25.8875 25.9029C26.5385 25.2521 27.5937 25.2521 28.2445 25.9029L31.7802 29.4386C32.431 30.0894 32.431 31.1446 31.7802 31.7956ZM14.1025 14.1179C13.4516 14.7687 12.3963 14.7687 11.7455 14.1179L8.20992 10.5823C7.55905 9.93145 7.55905 8.87618 8.20992 8.2253C8.8608 7.57443 9.91607 7.57443 10.567 8.2253L14.1025 11.7608C14.7534 12.4117 14.7534 13.467 14.1025 14.1179ZM8.20992 31.7956C7.55905 31.1446 7.55905 30.0894 8.20992 29.4386L11.7455 25.9029C12.3963 25.2521 13.4516 25.2521 14.1025 25.9029C14.7534 26.5539 14.7534 27.6091 14.1025 28.2599L10.567 31.7956C9.91607 32.4464 8.8608 32.4464 8.20992 31.7956ZM25.8875 14.1179C25.2367 13.467 25.2367 12.4117 25.8875 11.7608L29.4232 8.2253C30.074 7.57443 31.1292 7.57443 31.7802 8.2253C32.431 8.87618 32.431 9.93145 31.7802 10.5823L28.2445 14.1179C27.5937 14.7687 26.5385 14.7687 25.8875 14.1179Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/layout/connectDialog/asset/warningIcon.tsx

@@ -0,0 +1,21 @@
+import { type FC, type SVGProps } from 'react';
+
+export const WarningIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={20}
+      height={18}
+      viewBox="0 0 20 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M9.05688 0.833252C9.47596 0.107398 10.5234 0.107541 10.9426 0.833252L19.6663 15.9417C20.0852 16.6675 19.561 17.5744 18.7229 17.5745H1.27759C0.43938 17.5745 -0.0848319 16.6676 0.334229 15.9417L9.05688 0.833252ZM9.26685 13.0491V14.5149H10.7327V13.0491H9.26685ZM9.26685 6.65747V12.1018H10.7327V6.65747H9.26685Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { type FC } from 'react';
+import { LinkIcon } from '../asset/linkIcon';
+import placeholderImage from './assets/banner-placeholder.png';
+import './style.scss';
+
+interface IdleProps {
+  title?: string;
+  description?: string;
+  linkText?: string;
+  linkUrl?: string;
+  imageUrl?: string;
+  titleColor?: string;
+  descriptionColor?: string;
+  linkTextColor?: string;
+}
+
+export const Idle: FC<IdleProps> = ({
+  title = 'PenguinWallet',
+  description = `Your non-custodial gateway to the Creditcoin network.
+    Hold tokens, swap, and play ecosystem games in one app.`,
+  linkText = 'Download',
+  linkUrl = 'https://creditcoin.org/Penguin-Wallet',
+  imageUrl = placeholderImage,
+  titleColor = '#FFFFFF',
+  descriptionColor = '#888A8C',
+  linkTextColor = '#3374FF',
+}) => {
+  return (
+    <div className="ck-idle">
+      <img className="ck-idle-bg" src={imageUrl} alt="" />
+      {title && (
+        <h3 className="ck-idle-title" style={{ color: titleColor }}>
+          {title}
+        </h3>
+      )}
+      {description && (
+        <p className="ck-idle-desc" style={{ color: descriptionColor }}>
+          {description}
+        </p>
+      )}
+      {linkText && linkUrl && (
+        <a
+          className="ck-idle-link"
+          href={linkUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: linkTextColor }}
+        >
+          <span>{linkText}</span>
+          <LinkIcon />
+        </a>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,52 @@
+@use '../../../style/mixin.scss' as *;
+.ck-root {
+  .ck-idle {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    padding: 60px;
+    box-sizing: border-box;
+  }
+
+  .ck-idle-bg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+  }
+
+  .ck-idle-title {
+    @include textToken('title1-bold'); 
+    color: var(--scale-gray-900);
+  }
+
+  .ck-idle-desc {
+    color: var(--scale-gray-600);
+    margin-top: 6px;
+    white-space: pre-line;
+    @include textToken('body4-l1-regular');
+  }
+
+  .ck-idle-link {
+    display: flex;
+    align-items: center;
+    margin: -2px -8px -8px -8px;
+    padding: 8px;
+
+    span {
+      @include textToken('body4-l1-bold');
+      color: inherit;
+    }
+
+    svg {
+      flex-shrink: 0;
+      color: inherit;
+    }
+  }
+}