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

package/src/views/MetaMaskView.tsx

@@ -1,66 +0,0 @@
-import { type FC, useEffect, useMemo, useRef } from 'react';
-import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
-import { CONNECTOR_META } from '../connector-meta';
-import { QRFrame, CopyLinkButton } from '../components/QRFrame';
-
-const { downloadUrl, deepLinkBase } = CONNECTOR_META.METAMASK;
-
-interface MetaMaskViewProps {
-  qrUri: string | null;
-  hasExtension: boolean;
-  logoUrl?: string;
-}
-
-export const MetaMaskView: FC<MetaMaskViewProps> = ({ qrUri, hasExtension, logoUrl }) => {
-  const isMobile = useMemo(() => isMobileDevice(), []);
-  const hasRedirectedRef = useRef(false);
-
-  useEffect(() => {
-    if (isMobile && qrUri && deepLinkBase && !hasRedirectedRef.current) {
-      hasRedirectedRef.current = true;
-      tryOpenDeepLink(qrUri, deepLinkBase);
-    }
-  }, [isMobile, qrUri]);
-
-  if (isMobile && deepLinkBase) {
-    return (
-      <div className="ck-view ck-view--mobile-redirect">
-        <p>Opening MetaMask...</p>
-      </div>
-    );
-  }
-
-  if (hasExtension) {
-    return (
-      <div className="ck-view ck-view--extension">
-        <span className="ck-view__wallet-icon ck-view__wallet-icon--metamask" aria-hidden="true" />
-        <h4 className="ck-view__title">Open MetaMask</h4>
-        <p className="ck-view__description">Check the connection in your extension</p>
-        <span className="ck-spinner" aria-label="Connecting" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="ck-view ck-view--qr">
-      <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
-      <CopyLinkButton qrUri={qrUri} />
-
-      {downloadUrl && (
-        <div className="ck-download-card">
-          <div className="ck-download-card__text">
-            <p className="ck-download-card__title">Don&apos;t have MetaMask Wallet?</p>
-          </div>
-          <a
-            href={downloadUrl}
-            target="_blank"
-            rel="nofollow noopener noreferrer"
-            className="ck-btn-primary"
-          >
-            Download
-          </a>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/views/SwitchChainView.tsx

@@ -1,72 +0,0 @@
-import { useEffect, useRef, useState, type FC } from 'react';
-import { useSwitchChain } from 'wagmi';
-
-interface SwitchChainViewProps {
-  currentChainId: number | undefined;
-  requiredChainId: number;
-  requiredChainName?: string;
-  onDisconnect: () => void;
-  onLog?: (message: string, error?: Error) => void;
-}
-
-export const SwitchChainView: FC<SwitchChainViewProps> = ({
-  currentChainId,
-  requiredChainId,
-  requiredChainName,
-  onDisconnect,
-  onLog,
-}) => {
-  const { switchChainAsync, isPending } = useSwitchChain();
-  const [error, setError] = useState<Error | null>(null);
-  const isMountedRef = useRef(true);
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  const targetLabel = requiredChainName ?? `chain ${requiredChainId}`;
-
-  const handleSwitch = (): void => {
-    setError(null);
-    switchChainAsync({ chainId: requiredChainId }).catch((err: unknown) => {
-      const normalized = err instanceof Error ? err : new Error(String(err));
-      const code =
-        typeof err === 'object' && err !== null && 'code' in err
-          ? (err as { code: unknown }).code
-          : undefined;
-      if (code === 4902) {
-        onLog?.('[connect-kit] chain not registered in wallet (4902)', normalized);
-      } else {
-        onLog?.(`[connect-kit] switch chain failed: ${normalized.message}`, normalized);
-      }
-      if (isMountedRef.current) setError(normalized);
-    });
-  };
-
-  return (
-    <div className="ck-view ck-view--switch-chain">
-      <h4 className="ck-view__title">Wrong network</h4>
-      <p className="ck-view__description">
-        {currentChainId != null
-          ? `Connected to chain ${currentChainId}. Please switch to ${targetLabel} to continue.`
-          : `Please switch to ${targetLabel} to continue.`}
-      </p>
-      <div className="ck-view__actions">
-        <button
-          type="button"
-          className="ck-btn-primary"
-          onClick={handleSwitch}
-          disabled={isPending}
-        >
-          {isPending ? 'Waiting for wallet…' : `Switch to ${targetLabel}`}
-        </button>
-        <button type="button" className="ck-btn-secondary" onClick={onDisconnect}>
-          Disconnect
-        </button>
-      </div>
-      {error && <p className="ck-view__caption ck-view__caption--error">{error.message}</p>}
-    </div>
-  );
-};

package/src/views/WalletConnectView.tsx

@@ -1,206 +0,0 @@
-import { type FC, useMemo } from 'react';
-import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
-import { type WCWallet, type WCSubView } from '../types';
-import deeplink from '../../assets/deeplink.png';
-import { QRFrame, CopyLinkButton } from '../components/QRFrame';
-import { CONNECTOR_META } from '../connector-meta';
-
-interface WalletConnectViewProps {
-  subView: WCSubView;
-  qrUri: string | null;
-  logoUrl?: string;
-  walletList: WCWallet[];
-  walletListLoading: boolean;
-  walletListSearch: string;
-  walletListFilterActive: boolean;
-  selectedWallet: WCWallet | null;
-  onShowList: () => void;
-  onSelectWallet: (wallet: WCWallet) => void;
-  onSearchChange: (q: string) => void;
-  onFilterToggle: () => void;
-}
-
-export const WalletConnectView: FC<WalletConnectViewProps> = (props) => {
-  const { subView, selectedWallet } = props;
-
-  if (subView === 'list') return <WalletListView {...props} />;
-  if (subView === 'wallet' && selectedWallet)
-    return <WalletQRView wallet={selectedWallet} qrUri={props.qrUri} />;
-  return <WCQRView {...props} />;
-};
-
-const WCQRView: FC<WalletConnectViewProps> = ({ qrUri, logoUrl, walletList, onShowList }) => (
-  <div className="ck-view ck-view--qr">
-    <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
-
-    <p className="ck-view__caption">Scan this QR Code with your phone</p>
-
-    <CopyLinkButton qrUri={qrUri} />
-
-    <button type="button" className="ck-all-wallets-btn" onClick={onShowList}>
-      <span className="ck-all-wallets-btn__icon" aria-hidden="true" />
-      <span className="ck-all-wallets-btn__label">All Wallets</span>
-      {walletList.length > 0 && (
-        <span className="ck-all-wallets-btn__count">{walletList.length}+</span>
-      )}
-    </button>
-  </div>
-);
-
-const CREDIT_WALLET_NAME = CONNECTOR_META.CREDIT_WALLET.label;
-
-const WalletListView: FC<WalletConnectViewProps> = ({
-  walletList,
-  walletListLoading,
-  walletListSearch,
-  walletListFilterActive,
-  logoUrl,
-  qrUri,
-  onSelectWallet,
-  onSearchChange,
-  onFilterToggle,
-}) => {
-  const isMobile = useMemo(() => isMobileDevice(), []);
-
-  const filtered = useMemo(() => {
-    const q = walletListSearch.trim().toLowerCase();
-    let list = walletList;
-    if (walletListFilterActive) {
-      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].sort((a, b) => {
-      if (a.name === CREDIT_WALLET_NAME) return -1;
-      if (b.name === CREDIT_WALLET_NAME) return 1;
-      return 0;
-    });
-  }, [walletList, walletListSearch, walletListFilterActive]);
-
-  const handleClickWallet = (wallet: WCWallet): void => {
-    if (isMobile && qrUri) {
-      const target = wallet.mobileNative || wallet.mobileUniversal;
-      if (target) {
-        tryOpenDeepLink(qrUri, target);
-        return;
-      }
-    }
-    onSelectWallet(wallet);
-  };
-
-  return (
-    <div className="ck-view ck-view--wallet-list">
-      <div className="ck-wallet-search">
-        <input
-          type="text"
-          className="ck-wallet-search__input"
-          placeholder="Search wallet"
-          value={walletListSearch}
-          onChange={(e) => {
-            onSearchChange(e.target.value);
-          }}
-        />
-        <button
-          type="button"
-          className={`ck-wc-filter${walletListFilterActive ? ' is-active' : ''}`}
-          onClick={onFilterToggle}
-          aria-pressed={walletListFilterActive}
-          aria-label="Show WalletConnect wallets only"
-          title="WalletConnect wallets only"
-        >
-          {logoUrl && (
-            <img src={logoUrl} alt="" className="ck-wc-filter__icon" aria-hidden="true" />
-          )}
-          <span className="ck-wc-filter__track">
-            <span className="ck-wc-filter__thumb" />
-          </span>
-        </button>
-      </div>
-
-      {walletListLoading && walletList.length === 0 && (
-        <div className="ck-wallet-list-loading">
-          <span className="ck-spinner" aria-label="Loading wallets" />
-        </div>
-      )}
-
-      {!walletListLoading && filtered.length === 0 && walletList.length > 0 && (
-        <p className="ck-wallet-list-empty">No wallets found.</p>
-      )}
-
-      <div className="ck-wallet-grid-scroll">
-        <ul className="ck-wallet-grid">
-          {filtered.map((wallet) => {
-            const hasDeeplink = !!(
-              wallet.mobileNative ||
-              wallet.mobileUniversal ||
-              wallet.desktopNative ||
-              wallet.desktopUniversal
-            );
-            return (
-              <li key={wallet.id}>
-                <button
-                  type="button"
-                  className="ck-wallet-grid__item"
-                  onClick={() => {
-                    handleClickWallet(wallet);
-                  }}
-                >
-                  {wallet.imageUrl ? (
-                    <img className="ck-wallet-grid__icon" src={wallet.imageUrl} alt="" />
-                  ) : (
-                    <span className="ck-wallet-grid__icon-placeholder" aria-hidden="true" />
-                  )}
-                  <span className="ck-wallet-grid__name">
-                    <span className="ck-wallet-grid__name-text">{wallet.name}</span>
-                    {hasDeeplink && (
-                      <img
-                        src={deeplink}
-                        alt=""
-                        className="ck-wallet-grid__wc-badge"
-                        aria-hidden="true"
-                      />
-                    )}
-                  </span>
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-const WalletQRView: FC<{ wallet: WCWallet; qrUri: string | null }> = ({ wallet, qrUri }) => {
-  const downloadUrl = wallet.appIos || wallet.appAndroid || wallet.homepage;
-  const logoSrc = wallet.imageUrl;
-
-  return (
-    <div className="ck-view ck-view--qr">
-      <QRFrame qrUri={qrUri} logoUrl={logoSrc} />
-
-      <p className="ck-view__caption">Scan this QR Code with your phone</p>
-
-      <CopyLinkButton qrUri={qrUri} />
-
-      {downloadUrl && (
-        <div className="ck-download-card">
-          <div className="ck-download-card__text">
-            <p className="ck-download-card__title">Don&apos;t have {wallet.name}?</p>
-          </div>
-          <a
-            href={downloadUrl}
-            target="_blank"
-            rel="nofollow noopener noreferrer"
-            className="ck-btn-primary"
-          >
-            Download
-          </a>
-        </div>
-      )}
-    </div>
-  );
-};