@gluwa/connect-kit 0.2.0-next.8 → 0.2.0-next.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluwa/wallet-kit
 
+## 0.2.0-next.9
+
+### Patch Changes
+
+- 18e631a: fix bugs
+
 ## 0.2.0-next.8
 
 ### Patch Changes

package/dist/index.css

@@ -564,8 +564,9 @@
     width: 100%;
     max-width: none;
     grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr);
     max-height: 82dvh;
-    height: 100%;
+    height: auto;
     border-radius: 12px 12px 0 0;
   }
   .ck-root .ck-dialog[data-step=selector] .ck-detail {
@@ -877,6 +878,7 @@
 .ck-detail {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   background: var(--semantic-paper-dialog);
   min-height: 0;
   position: relative;
@@ -959,6 +961,9 @@
 .ck-detail-body::-webkit-scrollbar-thumb:hover {
   background-color: var(--scale-gray-400);
 }
+.ck-detail-body:has(.ck-all-wallets) {
+  padding-bottom: 0;
+}
 
 /* src/layout/connectDialog/idle/style.scss */
 .ck-idle {
@@ -1158,15 +1163,15 @@
   overflow: hidden;
   outline: none;
 }
-.ck-qr-loading {
-  border: 1px solid var(--semantic-divider-divider-1);
-}
-.ck-qr-timeout {
+.ck-qr-skeleton {
+  padding: 20px;
   border: 1px solid var(--semantic-divider-divider-1);
+  border-radius: 20px;
 }
-.ck-qr-skeleton {
-  width: 248px;
-  height: 248px;
+.ck-qr-skeleton-inner {
+  display: block;
+  width: 246px;
+  height: 246px;
   background:
     linear-gradient(
       132deg,
@@ -1177,9 +1182,24 @@
   animation: ck-qr-shimmer 1.5s linear infinite;
 }
 @media (max-width: 767px) {
-  .ck-qr-skeleton {
-    width: 200px;
-    height: 200px;
+  .ck-qr-skeleton-inner {
+    width: 198px;
+    height: 198px;
+  }
+}
+.ck-qr-timeout {
+  width: 288px;
+  height: 288px;
+  border: 1px solid var(--semantic-divider-divider-1);
+  background: var(--scale-gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (max-width: 767px) {
+  .ck-qr-timeout {
+    width: 240px;
+    height: 240px;
   }
 }
 @keyframes ck-qr-shimmer {
@@ -1207,20 +1227,6 @@
     height: 198px;
   }
 }
-.ck-qr-timeout {
-  width: 248px;
-  height: 248px;
-  background: var(--scale-gray-100);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-@media (max-width: 767px) {
-  .ck-qr-timeout {
-    width: 200px;
-    height: 200px;
-  }
-}
 .ck-qr-timeout-inner {
   display: flex;
   flex-direction: column;
@@ -1690,15 +1696,8 @@
   gap: 8px;
   flex-shrink: 0;
 }
-@media (max-width: 392px) {
-  .ck-all-wallets-controls {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 12px;
-  }
-  .ck-all-wallets-controls .ck-search {
-    width: 100%;
-  }
+.ck-all-wallets-controls .ck-search {
+  min-width: 0;
 }
 .ck-wc-filter-btn {
   display: inline-flex;

package/dist/index.js

@@ -194,13 +194,13 @@ var disconnectAll = /* @__PURE__ */ __name(async (onLog) => {
 }, "disconnectAll");
 
 // src/ConnectKitProvider.tsx
-import { createContext, useCallback as useCallback4, useContext, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef5, useState as useState5 } from "react";
+import { createContext, useCallback as useCallback4, useContext, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef5, useState as useState6 } from "react";
 import { WagmiProvider, useAccount, useConfig as useConfig3, useDisconnect, useSwitchChain } from "wagmi";
 import { getAccount as getAccount2 } from "@wagmi/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // src/layout/connectDialog/index.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import { useConfig as useConfig2 } from "wagmi";
 
 // src/layout/connectDialog/asset/closeIcon.tsx
@@ -504,7 +504,9 @@ var QrArea = /* @__PURE__ */ __name(({ uri, status, logoUrl, hasBg = false, labe
     className: "ck-qr-skeleton",
     "aria-busy": "true",
     "aria-label": "Loading QR code"
-  }), status === "ready" && uri && /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "ck-qr-skeleton-inner"
+  })), status === "ready" && uri && /* @__PURE__ */ React.createElement("div", {
     className: "ck-qr-frame",
     style: {
       "background": bgColor,
@@ -869,7 +871,7 @@ var AllWallets = /* @__PURE__ */ __name(({ wallets, isLoading, onSelectWallet })
   }))), !isLoading && filtered.length === 0 ? /* @__PURE__ */ React.createElement("div", {
     className: "ck-all-wallets-empty",
     role: "status"
-  }, /* @__PURE__ */ React.createElement("p", null, "No wallets found")) : /* @__PURE__ */ React.createElement(WalletGrid, {
+  }, /* @__PURE__ */ React.createElement("p", null, "No Wallet found")) : /* @__PURE__ */ React.createElement(WalletGrid, {
     wallets: filtered,
     isLoading,
     onSelect: onSelectWallet
@@ -1024,18 +1026,36 @@ var Snackbar = /* @__PURE__ */ __name(({ message, onClose }) => {
   })));
 }, "Snackbar");
 
+// src/hooks/useMetaMaskExtension.ts
+import { useEffect, useState as useState2 } from "react";
+var METAMASK_RDNS = "io.metamask";
+var isMetaMaskAnnouncement = /* @__PURE__ */ __name((event) => {
+  var _a, _b;
+  const detail = event.detail;
+  return ((_b = (_a = detail == null ? void 0 : detail.info) == null ? void 0 : _a.rdns) == null ? void 0 : _b.toLowerCase()) === METAMASK_RDNS && detail.provider != null;
+}, "isMetaMaskAnnouncement");
+var useMetaMaskExtension = /* @__PURE__ */ __name(() => {
+  const [isInstalled, setIsInstalled] = useState2(false);
+  useEffect(() => {
+    const handleAnnouncement = /* @__PURE__ */ __name((event) => {
+      if (isMetaMaskAnnouncement(event)) setIsInstalled(true);
+    }, "handleAnnouncement");
+    window.addEventListener("eip6963:announceProvider", handleAnnouncement);
+    window.dispatchEvent(new Event("eip6963:requestProvider"));
+    return () => {
+      window.removeEventListener("eip6963:announceProvider", handleAnnouncement);
+    };
+  }, []);
+  return isInstalled;
+}, "useMetaMaskExtension");
+
 // src/hooks/useWagmiConnect.ts
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect as useEffect2, useRef, useCallback } from "react";
 import { useConnect, useConfig } from "wagmi";
 var hasMetaMaskKeyword = /* @__PURE__ */ __name((value) => value.toLowerCase().includes("metamask"), "hasMetaMaskKeyword");
 var hasWalletConnectKeyword = /* @__PURE__ */ __name((value) => value.toLowerCase().includes("walletconnect"), "hasWalletConnectKeyword");
 var isMetaMaskConnector = /* @__PURE__ */ __name((connector) => {
   if (connector.id === "metaMaskSDK") return true;
-  if (connector.id === "injected") {
-    if (typeof window === "undefined") return false;
-    const eth = window.ethereum;
-    return (eth == null ? void 0 : eth.isMetaMask) === true;
-  }
   if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
   if (connector.rdns) {
     const rdnsList = Array.isArray(connector.rdns) ? connector.rdns : [
@@ -1070,7 +1090,7 @@ var useWagmiConnect = /* @__PURE__ */ __name(({ onConnect, onError, onQrUri, onS
   const onErrorRef = useRef(onError);
   const onQrUriRef = useRef(onQrUri);
   const onSessionExpiredRef = useRef(onSessionExpired);
-  useEffect(() => {
+  useEffect2(() => {
     onConnectRef.current = onConnect;
     onErrorRef.current = onError;
     onQrUriRef.current = onQrUri;
@@ -1082,7 +1102,7 @@ var useWagmiConnect = /* @__PURE__ */ __name(({ onConnect, onError, onQrUri, onS
     onSessionExpired
   ]);
   const { connectAsync, reset, isPending } = useConnect();
-  useEffect(() => {
+  useEffect2(() => {
     const handler = /* @__PURE__ */ __name((data) => {
       var _a;
       const msg = data;
@@ -1155,19 +1175,19 @@ var useWagmiConnect = /* @__PURE__ */ __name(({ onConnect, onError, onQrUri, onS
 }, "useWagmiConnect");
 
 // src/hooks/useConnectTimeout.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 var DEFAULT_CONNECT_TIMEOUT_MS = 6e5;
 var useConnectTimeout = /* @__PURE__ */ __name(({ connectorId, active, expiredSignal = 0, onRetry }) => {
-  const [timedOut, setTimedOut] = useState2(false);
+  const [timedOut, setTimedOut] = useState3(false);
   const fire = useCallback2(() => {
     setTimedOut(true);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     setTimedOut(false);
   }, [
     connectorId
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!active || connectorId !== "METAMASK") return;
     const timer = setTimeout(fire, DEFAULT_CONNECT_TIMEOUT_MS);
     return () => clearTimeout(timer);
@@ -1177,7 +1197,7 @@ var useConnectTimeout = /* @__PURE__ */ __name(({ connectorId, active, expiredSi
     fire
   ]);
   const prevSignal = useRef2(expiredSignal);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!active || connectorId === "METAMASK" || !connectorId) {
       prevSignal.current = expiredSignal;
       return;
@@ -1205,13 +1225,22 @@ var useConnectTimeout = /* @__PURE__ */ __name(({ connectorId, active, expiredSi
 }, "useConnectTimeout");
 
 // src/hooks/useWCState.ts
-import { useState as useState3, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect3 } from "react";
-var WC_EXPLORER_CREDIT_WALLET_NAME = "Credit Wallet";
+import { useState as useState4, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect4 } from "react";
+
+// src/wallet-display-override.ts
+var CREDIT_WALLET_LISTING_ID = "ce02f1ae74686234eabfa7d31876c442779b730dfe7924a3ca0e6559a7afa30f";
+var overrideWalletDisplay = /* @__PURE__ */ __name((wallet) => wallet.id === CREDIT_WALLET_LISTING_ID ? {
+  ...wallet,
+  name: "PenguinWallet",
+  imageUrl: penguinwallet_default
+} : wallet, "overrideWalletDisplay");
+
+// src/hooks/useWCState.ts
 var sortCreditWalletFirst = /* @__PURE__ */ __name((list) => [
   ...list
 ].sort((a, b) => {
-  if (a.name === WC_EXPLORER_CREDIT_WALLET_NAME) return -1;
-  if (b.name === WC_EXPLORER_CREDIT_WALLET_NAME) return 1;
+  if (a.id === CREDIT_WALLET_LISTING_ID) return -1;
+  if (b.id === CREDIT_WALLET_LISTING_ID) return 1;
   return 0;
 }), "sortCreditWalletFirst");
 var fetchWCWalletList = /* @__PURE__ */ __name(async (projectId, signal) => {
@@ -1252,16 +1281,16 @@ var fetchWCWalletList = /* @__PURE__ */ __name(async (projectId, signal) => {
   return Array.from(byId.values());
 }, "fetchWCWalletList");
 var useWCState = /* @__PURE__ */ __name(() => {
-  const [subView, setSubView] = useState3("qr");
-  const [walletList, setWalletList] = useState3([]);
-  const [walletListLoading, setWalletListLoading] = useState3(false);
-  const [walletListSearch, setWalletListSearch] = useState3("");
-  const [filterActive, setFilterActive] = useState3(false);
-  const [selectedWallet, setSelectedWallet] = useState3(null);
+  const [subView, setSubView] = useState4("qr");
+  const [walletList, setWalletList] = useState4([]);
+  const [walletListLoading, setWalletListLoading] = useState4(false);
+  const [walletListSearch, setWalletListSearch] = useState4("");
+  const [filterActive, setFilterActive] = useState4(false);
+  const [selectedWallet, setSelectedWallet] = useState4(null);
   const loadedRef = useRef3(false);
   const abortControllerRef = useRef3(null);
   const isMountedRef = useRef3(true);
-  useEffect3(() => {
+  useEffect4(() => {
     isMountedRef.current = true;
     return () => {
       var _a;
@@ -1278,7 +1307,7 @@ var useWCState = /* @__PURE__ */ __name(() => {
     setWalletListLoading(true);
     try {
       const list = await fetchWCWalletList(projectId, controller.signal);
-      const sorted = sortCreditWalletFirst(list);
+      const sorted = sortCreditWalletFirst(list).map(overrideWalletDisplay);
       if (isMountedRef.current) setWalletList(sorted);
     } catch (err) {
       const isAbort = err instanceof DOMException && err.name === "AbortError";
@@ -1349,10 +1378,6 @@ var tryOpenDeepLink = /* @__PURE__ */ __name((uri, deepLinkBase) => {
 var tryOpenCreditWalletDeeplink = /* @__PURE__ */ __name((payloadUrl) => {
   window.location.replace(`creditwallet://?uri=${encodeURIComponent(payloadUrl)}`);
 }, "tryOpenCreditWalletDeeplink");
-var detectMetaMaskExtension = /* @__PURE__ */ __name(() => {
-  var _a;
-  return typeof window !== "undefined" && Boolean((_a = window.ethereum) == null ? void 0 : _a.isMetaMask);
-}, "detectMetaMaskExtension");
 
 // src/layout/connectDialog/index.tsx
 var getContentForConnector = /* @__PURE__ */ __name((id) => {
@@ -1361,7 +1386,7 @@ var getContentForConnector = /* @__PURE__ */ __name((id) => {
   if (id === "WALLET_CONNECT") return "walletconnect";
   return "idle";
 }, "getContentForConnector");
-var getInitialContentForConnector = /* @__PURE__ */ __name((id) => id === "METAMASK" && !detectMetaMaskExtension() ? "metamask-qr" : getContentForConnector(id), "getInitialContentForConnector");
+var getInitialContentForConnector = /* @__PURE__ */ __name((id, isMetaMaskExtensionInstalled) => id === "METAMASK" && !isMetaMaskExtensionInstalled ? "metamask-qr" : getContentForConnector(id), "getInitialContentForConnector");
 var ConnectDialog = /* @__PURE__ */ __name(({
   open,
   theme = "dark",
@@ -1381,14 +1406,15 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   onError
 }) => {
   const dialogRef = useRef4(null);
-  const [selectedConnector, setSelectedConnector] = useState4(selectedConnectorProp);
-  const [recentConnector, setRecentConnector] = useState4(null);
-  const [selectedWallet, setSelectedWallet] = useState4(null);
-  const [step, setStep] = useState4(stepProp);
-  const [content, setContent] = useState4("idle");
-  const [showCopySnackbar, setShowCopySnackbar] = useState4(false);
-  const [qrUri, setQrUri] = useState4(null);
-  const [expiredSignal, setExpiredSignal] = useState4(0);
+  const [selectedConnector, setSelectedConnector] = useState5(selectedConnectorProp);
+  const [recentConnector, setRecentConnector] = useState5(null);
+  const [selectedWallet, setSelectedWallet] = useState5(null);
+  const [step, setStep] = useState5(stepProp);
+  const [content, setContent] = useState5("idle");
+  const [showCopySnackbar, setShowCopySnackbar] = useState5(false);
+  const [qrUri, setQrUri] = useState5(null);
+  const [expiredSignal, setExpiredSignal] = useState5(0);
+  const isMetaMaskExtensionInstalled = useMetaMaskExtension();
   const contentRef = useRef4(content);
   contentRef.current = content;
   const preTimeoutContentRef = useRef4("idle");
@@ -1418,12 +1444,12 @@ var ConnectDialog = /* @__PURE__ */ __name(({
       cancelConnect();
       setQrUri(null);
       const restore = preTimeoutContentRef.current;
-      const nextContent = restore !== "idle" && restore !== "timeout" ? restore : getInitialContentForConnector(selectedConnector);
+      const nextContent = restore !== "idle" && restore !== "timeout" ? restore : getInitialContentForConnector(selectedConnector, isMetaMaskExtensionInstalled);
       setContent(nextContent);
       triggerConnect(selectedConnector);
     }, "onRetry")
   });
-  useEffect4(() => {
+  useEffect5(() => {
     if (!timedOut) return;
     preTimeoutContentRef.current = contentRef.current;
     cancelConnect();
@@ -1432,7 +1458,16 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     timedOut,
     cancelConnect
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
+    if (isMetaMaskExtensionInstalled && selectedConnector === "METAMASK" && content === "metamask-qr") {
+      setContent("metamask-ext");
+    }
+  }, [
+    isMetaMaskExtensionInstalled,
+    selectedConnector,
+    content
+  ]);
+  useEffect5(() => {
     const restoreRecent = /* @__PURE__ */ __name(async () => {
       var _a;
       const wagmiId = await ((_a = config.storage) == null ? void 0 : _a.getItem("recentConnectorId"));
@@ -1446,7 +1481,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   const wc = useWCState();
   const handleSelect = /* @__PURE__ */ __name((id) => {
     setSelectedConnector(id);
-    setContent(getInitialContentForConnector(id));
+    setContent(getInitialContentForConnector(id, isMetaMaskExtensionInstalled));
     setStep("detail");
     triggerConnect(id);
     onSelectConnector == null ? void 0 : onSelectConnector(id);
@@ -1478,7 +1513,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
       wc.loadWalletList(wcProjectId).catch(() => void 0);
     }
   }, "handleShowAllWallets");
-  useEffect4(() => {
+  useEffect5(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (open && !dialog.open) dialog.showModal();
@@ -1487,12 +1522,12 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     open
   ]);
   const deeplinkTriedRef = useRef4(false);
-  useEffect4(() => {
+  useEffect5(() => {
     deeplinkTriedRef.current = false;
   }, [
     selectedWallet
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (deeplinkTriedRef.current) return;
     if (!selectedWallet || !qrUri || content !== "wallet-qr") return;
     if (!isMobileDevice()) return;
@@ -1506,12 +1541,12 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     content
   ]);
   const creditConnectDeeplinkTriedRef = useRef4(false);
-  useEffect4(() => {
+  useEffect5(() => {
     creditConnectDeeplinkTriedRef.current = false;
   }, [
     selectedConnector
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (creditConnectDeeplinkTriedRef.current) return;
     if (content !== "qr" || !qrUri) return;
     if (selectedConnector !== "CREDIT_CONNECT") return;
@@ -1523,7 +1558,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     qrUri,
     selectedConnector
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     const prev = document.body.style.overflow;
     if (open) document.body.style.overflow = "hidden";
     return () => {
@@ -1532,7 +1567,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   }, [
     open
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!open) {
       cancelConnect();
       setQrUri(null);
@@ -1545,7 +1580,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     open,
     cancelConnect
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     const dialog = dialogRef.current;
     if (!dialog) return void 0;
     const handleCancel = /* @__PURE__ */ __name((e) => {
@@ -1633,27 +1668,27 @@ var ConnectKitProvider = /* @__PURE__ */ __name((props) => {
 }, "ConnectKitProvider");
 var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, kitConfig, requiredChainId, theme, onConnect, onLog }) => {
   var _a;
-  const [isOpen, setIsOpen] = useState5(false);
-  const [pendingResult, setPendingResult] = useState5(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [pendingResult, setPendingResult] = useState6(null);
   const account = useAccount();
   const wagmiConfig = useConfig3();
   const { disconnectAsync } = useDisconnect();
   const { switchChainAsync } = useSwitchChain();
   const onConnectRef = useRef5(onConnect);
-  useEffect5(() => {
+  useEffect6(() => {
     onConnectRef.current = onConnect;
   }, [
     onConnect
   ]);
   const isMountedRef = useRef5(true);
-  useEffect5(() => {
+  useEffect6(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
   const needsChainSwitch = requiredChainId != null && account.status === "connected" && account.chainId != null && account.chainId !== requiredChainId;
-  const [isSwitchingChain, setIsSwitchingChain] = useState5(false);
+  const [isSwitchingChain, setIsSwitchingChain] = useState6(false);
   const effectiveOpen = isOpen;
   const open = useCallback4(() => {
     setIsOpen(true);
@@ -1695,7 +1730,7 @@ var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, ki
   }, [
     onLog
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!effectiveOpen) return;
     if (account.status !== "connected") return;
     setIsOpen(false);
@@ -1703,7 +1738,7 @@ var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, ki
     effectiveOpen,
     account.status
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     var _a2;
     if (!pendingResult) return;
     if (account.status !== "connected") {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.8",
+  "version": "0.2.0-next.9",
   "type": "module",
   "exports": {
     ".": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.8",
+  "version": "0.2.0-next.9",
   "type": "module",
   "exports": {
     ".": {
@@ -26,10 +26,10 @@
     "qrcode.react": "^4.2.0",
     "wagmi": "^2.15.6",
     "@wagmi/core": "^2.16.7",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.4",
-    "@gluwa/credit-connect-storage-local": "0.2.0-next.4",
     "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.4",
-    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.4"
+    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.4",
+    "@gluwa/credit-connect-sdk": "0.2.0-next.4",
+    "@gluwa/credit-connect-storage-local": "0.2.0-next.4"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.0",

package/src/components/qrArea/index.tsx

@@ -27,7 +27,9 @@ export const QrArea: FC<QrAreaProps> = ({ uri, status, logoUrl, hasBg = false, l
       <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" />
+            <div className="ck-qr-skeleton" aria-busy="true" aria-label="Loading QR code">
+              <div className="ck-qr-skeleton-inner" />
+            </div>
           )}
           {status === 'ready' && uri && (
             <div

package/src/components/qrArea/style.scss

@@ -9,13 +9,6 @@
   padding-bottom: 32px;
 }
 
-// .ck-qr-group {
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   gap: 24px;
-// }
-
 // ── Text ──────────────────────────────────────────────────────────────────────
 .ck-qr-text {
   display: flex;
@@ -42,18 +35,16 @@
   outline: none;
 }
 
-.ck-qr-loading {
-  border: 1px solid var(--semantic-divider-divider-1);
-}
-
-.ck-qr-timeout {
+.ck-qr-skeleton {
+  padding: 20px;
   border: 1px solid var(--semantic-divider-divider-1);
+  border-radius: 20px;
 }
 
-// ── Skeleton ──────────────────────────────────────────────────────────────────
-.ck-qr-skeleton {
-  width: 248px;
-  height: 248px;
+.ck-qr-skeleton-inner {
+  display: block;
+  width: 246px;
+  height: 246px;
   background: linear-gradient(
     132deg,
     var(--scale-gray-100) 36%,
@@ -64,8 +55,24 @@
   animation: ck-qr-shimmer 1.5s linear infinite;
 
   @include tablet {
-    width: 200px;
-    height: 200px;
+    width: 198px;
+    height: 198px;
+  }
+}
+
+// ── Timeout ───────────────────────────────────────────────────────────────────
+.ck-qr-timeout {
+  width: 288px;
+  height: 288px;
+  border: 1px solid var(--semantic-divider-divider-1);
+  background: var(--scale-gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include tablet {
+    width: 240px;
+    height: 240px;
   }
 }
 
@@ -93,21 +100,6 @@
   }
 }
 
-// ── 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;

package/src/hooks/useMetaMaskExtension.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+const METAMASK_RDNS = 'io.metamask';
+
+// EIP-6963 응답의 rdns 로 MetaMask 확장을 식별.
+const isMetaMaskAnnouncement = (event: Event): boolean => {
+  const detail = (event as CustomEvent<{ info?: { rdns?: string }; provider?: unknown }>).detail;
+  return detail?.info?.rdns?.toLowerCase() === METAMASK_RDNS && detail.provider != null;
+};
+
+export const useMetaMaskExtension = (): boolean => {
+  const [isInstalled, setIsInstalled] = useState(false);
+
+  useEffect(() => {
+    const handleAnnouncement = (event: Event): void => {
+      if (isMetaMaskAnnouncement(event)) setIsInstalled(true);
+    };
+
+    // 응답 listener를 먼저 등록한 뒤 설치된 provider 목록을 요청.
+    window.addEventListener('eip6963:announceProvider', handleAnnouncement);
+    window.dispatchEvent(new Event('eip6963:requestProvider'));
+
+    return () => {
+      window.removeEventListener('eip6963:announceProvider', handleAnnouncement);
+    };
+  }, []);
+
+  return isInstalled;
+};

package/src/hooks/useWCState.ts

@@ -1,15 +1,13 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import type { WCWallet, WCSubView } from '../types';
-
-// WalletConnect Explorer 에 등록된 Credit Wallet 의 정식 wallet name (API 응답 그대로).
-// CONNECTOR_META.CREDIT_CONNECT.label 은 selector button 표시용 ('Continue with Credit Wallet')
-// 이라 다름 — 별도 상수로 분리.
-const WC_EXPLORER_CREDIT_WALLET_NAME = 'Credit Wallet';
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+import { CREDIT_WALLET_LISTING_ID, overrideWalletDisplay } from '../wallet-display-override';
 
 const sortCreditWalletFirst = (list: WCWallet[]): WCWallet[] =>
   [...list].sort((a, b) => {
-    if (a.name === WC_EXPLORER_CREDIT_WALLET_NAME) return -1;
-    if (b.name === WC_EXPLORER_CREDIT_WALLET_NAME) return 1;
+    // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+    if (a.id === CREDIT_WALLET_LISTING_ID) return -1;
+    if (b.id === CREDIT_WALLET_LISTING_ID) return 1;
     return 0;
   });
 
@@ -115,7 +113,8 @@ export const useWCState = (): WCState => {
     setWalletListLoading(true);
     try {
       const list = await fetchWCWalletList(projectId, controller.signal);
-      const sorted = sortCreditWalletFirst(list);
+      // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+      const sorted = sortCreditWalletFirst(list).map(overrideWalletDisplay);
       // Credit Wallet 을 최상단으로 정렬한 상태로 state 저장 — view 측은 정렬 신경 X.
       if (isMountedRef.current) setWalletList(sorted);
     } catch (err) {

package/src/hooks/useWagmiConnect.ts

@@ -13,15 +13,10 @@ const hasMetaMaskKeyword = (value: string): boolean => value.toLowerCase().inclu
 const hasWalletConnectKeyword = (value: string): boolean =>
   value.toLowerCase().includes('walletconnect');
 
+// 전역 provider 대신 wagmi connector 메타데이터로 MetaMask를 판별.
 const isMetaMaskConnector = (connector: WagmiConnectorLike): boolean => {
   if (connector.id === 'metaMaskSDK') return true;
 
-  if (connector.id === 'injected') {
-    if (typeof window === 'undefined') return false;
-    const eth = (window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum;
-    return eth?.isMetaMask === true;
-  }
-
   if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
 
   if (connector.rdns) {

package/src/layout/allWallets/index.tsx

@@ -42,7 +42,7 @@ export const AllWallets: FC<AllWalletsProps> = ({ wallets, isLoading, onSelectWa
       </div>
       {!isLoading && filtered.length === 0 ? (
         <div className="ck-all-wallets-empty" role="status">
-          <p>No wallets found</p>
+          <p>No Wallet found</p>
         </div>
       ) : (
         <WalletGrid wallets={filtered} isLoading={isLoading} onSelect={onSelectWallet} />

package/src/layout/allWallets/style.scss

@@ -19,13 +19,8 @@
   gap: 8px;
   flex-shrink: 0;
 
-  @include max-width(392px) {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 12px;
-    .ck-search {
-      width: 100%;
-    }
+  .ck-search {
+    min-width: 0;
   }
 }
 

package/src/layout/connectDialog/index.tsx

@@ -12,15 +12,11 @@ import { SelectorPanel } from '../selectorPanel';
 import { DetailPanel } from '../detailPanel';
 import { Snackbar } from '../../components/snackbar';
 import { resolveConnectorId } from '../../connector-meta';
+import { useMetaMaskExtension } from '../../hooks/useMetaMaskExtension';
 import { useWagmiConnect } from '../../hooks/useWagmiConnect';
 import { useConnectTimeout } from '../../hooks/useConnectTimeout';
 import { useWCState } from '../../hooks/useWCState';
-import {
-  detectMetaMaskExtension,
-  isMobileDevice,
-  tryOpenDeepLink,
-  tryOpenCreditWalletDeeplink,
-} from '../../utils/platform';
+import { isMobileDevice, tryOpenDeepLink, tryOpenCreditWalletDeeplink } from '../../utils/platform';
 
 export type DialogStep = 'selector' | 'detail';
 
@@ -49,8 +45,11 @@ const getContentForConnector = (id: ConnectorId): DetailContent => {
 };
 
 // MM 은 확장 감지 시 즉시 extension 연결, 아니면 QR. (select / retry 공통)
-const getInitialContentForConnector = (id: ConnectorId): DetailContent =>
-  id === 'METAMASK' && !detectMetaMaskExtension() ? 'metamask-qr' : getContentForConnector(id);
+const getInitialContentForConnector = (
+  id: ConnectorId,
+  isMetaMaskExtensionInstalled: boolean,
+): DetailContent =>
+  id === 'METAMASK' && !isMetaMaskExtensionInstalled ? 'metamask-qr' : getContentForConnector(id);
 
 export const ConnectDialog: FC<ConnectDialogProps> = ({
   open,
@@ -90,6 +89,8 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
   const [qrUri, setQrUri] = useState<string | null>(null);
   // 외부 만료 신호 카운터 — CC(서버 push session_expired) / WC(connect reject) 수신 시 증가.
   const [expiredSignal, setExpiredSignal] = useState(0);
+  // EIP-6963 기반 MetaMask 확장 설치 상태.
+  const isMetaMaskExtensionInstalled = useMetaMaskExtension();
 
   // 현재 content 를 ref 로 추적 (effect deps 없이 최신값 참조용).
   const contentRef = useRef<DetailContent>(content);
@@ -137,7 +138,7 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
       const nextContent: DetailContent =
         restore !== 'idle' && restore !== 'timeout'
           ? restore
-          : getInitialContentForConnector(selectedConnector);
+          : getInitialContentForConnector(selectedConnector, isMetaMaskExtensionInstalled);
       setContent(nextContent);
       triggerConnect(selectedConnector);
     },
@@ -152,6 +153,17 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
     setContent('timeout');
   }, [timedOut, cancelConnect]);
 
+  // provider 응답이 늦게 도착하면 QR에서 확장 연결 화면으로 전환.
+  useEffect(() => {
+    if (
+      isMetaMaskExtensionInstalled &&
+      selectedConnector === 'METAMASK' &&
+      content === 'metamask-qr'
+    ) {
+      setContent('metamask-ext');
+    }
+  }, [isMetaMaskExtensionInstalled, selectedConnector, content]);
+
   // 마운트 시 wagmi storage 의 recentConnectorId(연결 성공 시 wagmi 가 저장) 복원.
   useEffect(() => {
     const restoreRecent = async (): Promise<void> => {
@@ -168,7 +180,7 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
   const handleSelect = (id: ConnectorId) => {
     setSelectedConnector(id);
     // recent 는 클릭이 아니라 연결 성공(onConnect) 시점에 기록 — 위 useWagmiConnect onConnect 참조.
-    setContent(getInitialContentForConnector(id));
+    setContent(getInitialContentForConnector(id, isMetaMaskExtensionInstalled));
     setStep('detail');
     // wagmi connect 시작 (display_uri 도착 시 setQrUri 자동 호출)
     triggerConnect(id);

package/src/layout/connectDialog/style.scss

@@ -37,8 +37,9 @@
     width: 100%;
     max-width: none;
     grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr);
     max-height: 82dvh;
-    height: 100%;
+    height: auto;
     border-radius: 12px 12px 0 0;
 
     &[data-step='selector'] .ck-detail { display: none !important; }

package/src/layout/detailPanel/style.scss

@@ -3,6 +3,7 @@
 .ck-detail {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   background: var(--semantic-paper-dialog);
   min-height: 0;
   position: relative;
@@ -61,4 +62,8 @@
   overflow-y: auto;
   padding: 20px;
   @include themedScrollbar;
+
+  &:has(.ck-all-wallets) {
+    padding-bottom: 0;
+  }
 }

package/src/utils/platform.ts

@@ -13,7 +13,3 @@ export const tryOpenDeepLink = (uri: string, deepLinkBase: string): void => {
 export const tryOpenCreditWalletDeeplink = (payloadUrl: string): void => {
   window.location.replace(`creditwallet://?uri=${encodeURIComponent(payloadUrl)}`);
 };
-
-export const detectMetaMaskExtension = (): boolean =>
-  typeof window !== 'undefined' &&
-  Boolean((window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum?.isMetaMask);

package/src/wallet-display-override.ts

@@ -0,0 +1,15 @@
+import penguinWalletIcon from '../assets/penguinwallet.png';
+import type { WCWallet } from './types';
+
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 삭제
+export const CREDIT_WALLET_LISTING_ID =
+  'ce02f1ae74686234eabfa7d31876c442779b730dfe7924a3ca0e6559a7afa30f';
+
+export const overrideWalletDisplay = (wallet: WCWallet): WCWallet =>
+  wallet.id === CREDIT_WALLET_LISTING_ID
+    ? {
+        ...wallet,
+        name: 'PenguinWallet',
+        imageUrl: penguinWalletIcon,
+      }
+    : wallet;