@gluwa/connect-kit 0.1.0-next.0

package/src/views/IdleView.tsx

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import graphic from '../../assets/graphic.png';
+
+export const IdleView: FC = () => (
+  <div className="ck-view ck-view--idle">
+    <img className="ck-view__illustration" src={graphic} alt="" aria-hidden="true" />
+    <h4 className="ck-view__title">Connect anytime, anywhere</h4>
+    <p className="ck-view__description">Choose a wallet on the left to start connecting.</p>
+  </div>
+);

package/src/views/MetaMaskView.tsx

@@ -0,0 +1,89 @@
+import { type FC, useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
+import { CONNECTOR_META } from '../connector-meta';
+
+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 = isMobileDevice();
+
+  useEffect(() => {
+    if (isMobile && qrUri && deepLinkBase) {
+      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">
+      <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
+        {qrUri ? (
+          <QRCodeSVG
+            value={qrUri}
+            size={196}
+            level="H"
+            imageSettings={
+              logoUrl ? { src: logoUrl, width: 40, height: 40, excavate: true } : undefined
+            }
+          />
+        ) : (
+          <div className="ck-qr-spinner" aria-label="Loading QR code" />
+        )}
+      </div>
+
+      {qrUri && (
+        <button
+          type="button"
+          className="ck-copy-link"
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            navigator.clipboard.writeText(qrUri);
+          }}
+        >
+          Copy link
+        </button>
+      )}
+
+      {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/WalletConnectView.tsx

@@ -0,0 +1,266 @@
+import { type FC, useMemo } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
+import { type WCWallet, type WCSubView } from '../types';
+import deeplink from '../../assets/deeplink.png';
+
+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">
+    <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
+      {qrUri ? (
+        <QRCodeSVG
+          value={qrUri}
+          size={196}
+          level="H"
+          imageSettings={
+            logoUrl
+              ? {
+                  src: logoUrl,
+                  width: 40,
+                  height: 40,
+                  excavate: true,
+                }
+              : undefined
+          }
+        />
+      ) : (
+        <div className="ck-qr-spinner" aria-label="Loading QR code" />
+      )}
+    </div>
+
+    <p className="ck-view__caption">Scan this QR Code with your phone</p>
+
+    {qrUri && (
+      <button
+        type="button"
+        className="ck-copy-link"
+        onClick={() => {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          navigator.clipboard.writeText(qrUri);
+        }}
+      >
+        Copy link
+      </button>
+    )}
+
+    <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 = 'Credit Wallet';
+
+const WalletListView: FC<WalletConnectViewProps> = ({
+  walletList,
+  walletListLoading,
+  walletListSearch,
+  walletListFilterActive,
+  logoUrl,
+  qrUri,
+  onSelectWallet,
+  onSearchChange,
+  onFilterToggle,
+}) => {
+  const isMobile = 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 => {
+    const uri = qrUri;
+    if (isMobile && uri) {
+      const target = wallet.mobileNative || wallet.mobileUniversal;
+      if (target) {
+        tryOpenDeepLink(uri, 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">
+      <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
+        {qrUri ? (
+          <QRCodeSVG
+            value={qrUri}
+            size={196}
+            level="H"
+            {...(logoSrc && {
+              imageSettings: {
+                src: logoSrc,
+                width: 40,
+                height: 40,
+                excavate: true,
+              },
+            })}
+          />
+        ) : (
+          <div className="ck-qr-spinner" aria-label="Loading QR code" />
+        )}
+      </div>
+
+      <p className="ck-view__caption">Scan this QR Code with your phone</p>
+
+      {qrUri && (
+        <button
+          type="button"
+          className="ck-copy-link"
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            navigator.clipboard.writeText(qrUri);
+          }}
+        >
+          Copy link
+        </button>
+      )}
+
+      {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>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "./"
+  },
+  "include": ["src/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'tsup';
+import { sassPlugin } from 'esbuild-sass-plugin';
+
+export default defineConfig({
+  entry: { index: 'src/index.ts' },
+  format: ['esm'],
+  dts: true,
+  clean: true,
+  target: 'es2019',
+  external: ['react', 'react-native'],
+  banner: {
+    js: 'import React from "react";',
+  },
+  esbuildPlugins: [sassPlugin({ type: 'style' })],
+  esbuildOptions(options) {
+    options.loader = { ...options.loader, '.png': 'dataurl' };
+  },
+});