@suilend/sui-fe-next 2.0.15 → 2.0.16

package/contexts/WalletContext.jsx

@@ -67,7 +67,7 @@ import BigNumber from "bignumber.js";
 import { useLDClient } from "launchdarkly-react-client-sdk";
 import { useLocalStorage } from "usehooks-ts";
 import { API_URL, formatAddress, isInMsafeApp } from "@suilend/sui-fe";
-import { WC_SUI_METHODS, getWalletConnectProvider } from "../lib/connector";
+import { WC_SUI_METHODS, getWalletConnectModal, getWalletConnectProvider, } from "../lib/connector";
 import { showErrorToast, showInfoToast } from "../lib/toasts";
 import { useSettingsContext } from "./SettingsContext";
 export var WalletType;
@@ -218,10 +218,10 @@ function Inner(_a) {
     var queryParams = (_b = {},
         _b[WalletContextQueryParams.WALLET] = router.query[WalletContextQueryParams.WALLET],
         _b);
-    var suiClient = useSettingsContext().suiClient;
+    var _f = useSettingsContext(), rpc = _f.rpc, suiClient = _f.suiClient;
     // WalletConnect via @walletconnect/universal-provider
     // Matches the reference implementation: https://github.com/WalletConnect/react-core-up-sui
-    var _f = useState(), wcSession = _f[0], setWcSession = _f[1];
+    var _g = useState(), wcSession = _g[0], setWcSession = _g[1];
     var sessionAddress = useMemo(function () {
         var _a, _b, _c;
         var raw = (_c = (_b = (_a = wcSession === null || wcSession === void 0 ? void 0 : wcSession.namespaces) === null || _a === void 0 ? void 0 : _a.sui) === null || _b === void 0 ? void 0 : _b.accounts) === null || _c === void 0 ? void 0 : _c[0];
@@ -356,7 +356,7 @@ function Inner(_a) {
         wallets__web,
     ]);
     // Wallet
-    var _g = useState(false), isConnectWalletDropdownOpen = _g[0], setIsConnectWalletDropdownOpen = _g[1];
+    var _h = useState(false), isConnectWalletDropdownOpen = _h[0], setIsConnectWalletDropdownOpen = _h[1];
     var rawWallet = useCurrentWallet();
     var wallet = useMemo(function () {
         if (sessionAddress) {
@@ -393,15 +393,22 @@ function Inner(_a) {
         });
     }); }, [sessionAddress]);
     var connectWalletWrapper = useCallback(function (_wallet) { return __awaiter(_this, void 0, void 0, function () {
-        var provider, _a, provider, _b, err_1;
+        var provider, modal, _a, provider, _b, err_1;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
-                    _c.trys.push([0, 14, , 15]);
-                    if (!(_wallet === null || _wallet === void 0 ? void 0 : _wallet.walletConnect)) return [3 /*break*/, 7];
+                    _c.trys.push([0, 17, , 18]);
+                    if (!(_wallet === null || _wallet === void 0 ? void 0 : _wallet.walletConnect)) return [3 /*break*/, 10];
                     return [4 /*yield*/, getWalletConnectProvider()];
                 case 1:
                     provider = _c.sent();
+                    return [4 /*yield*/, getWalletConnectModal(rpc.url)];
+                case 2:
+                    modal = _c.sent();
+                    modal.open();
+                    _c.label = 3;
+                case 3:
+                    _c.trys.push([3, , 5, 6]);
                     return [4 /*yield*/, provider.connect({
                             optionalNamespaces: {
                                 sui: {
@@ -415,54 +422,57 @@ function Inner(_a) {
                                 },
                             },
                         })];
-                case 2:
-                    _c.sent();
-                    _c.label = 3;
-                case 3:
-                    _c.trys.push([3, 5, , 6]);
-                    return [4 /*yield*/, disconnectWallet()];
                 case 4:
                     _c.sent();
                     return [3 /*break*/, 6];
                 case 5:
-                    _a = _c.sent();
-                    return [3 /*break*/, 6];
+                    modal.close();
+                    return [7 /*endfinally*/];
                 case 6:
+                    _c.trys.push([6, 8, , 9]);
+                    return [4 /*yield*/, disconnectWallet()];
+                case 7:
+                    _c.sent();
+                    return [3 /*break*/, 9];
+                case 8:
+                    _a = _c.sent();
+                    return [3 /*break*/, 9];
+                case 9:
                     setWcSession(provider.session);
                     return [2 /*return*/];
-                case 7:
+                case 10:
                     if (!_wallet.raw)
                         throw new Error("Missing wallet");
                     return [4 /*yield*/, connectWallet({ wallet: _wallet.raw })];
-                case 8:
+                case 11:
                     _c.sent();
-                    _c.label = 9;
-                case 9:
-                    _c.trys.push([9, 12, , 13]);
+                    _c.label = 12;
+                case 12:
+                    _c.trys.push([12, 15, , 16]);
                     return [4 /*yield*/, getWalletConnectProvider()];
-                case 10:
+                case 13:
                     provider = _c.sent();
                     return [4 /*yield*/, provider.disconnect()];
-                case 11:
+                case 14:
                     _c.sent();
-                    return [3 /*break*/, 13];
-                case 12:
+                    return [3 /*break*/, 16];
+                case 15:
                     _b = _c.sent();
-                    return [3 /*break*/, 13];
-                case 13:
+                    return [3 /*break*/, 16];
+                case 16:
                     setWcSession(null);
                     showInfoToast("Connected ".concat(_wallet.name));
                     setIsConnectWalletDropdownOpen(false);
-                    return [3 /*break*/, 15];
-                case 14:
+                    return [3 /*break*/, 18];
+                case 17:
                     err_1 = _c.sent();
                     showErrorToast("Failed to connect ".concat(_wallet.name), err_1);
                     console.error(err_1);
-                    return [3 /*break*/, 15];
-                case 15: return [2 /*return*/];
+                    return [3 /*break*/, 18];
+                case 18: return [2 /*return*/];
             }
         });
-    }); }, [connectWallet, disconnectWallet]);
+    }); }, [rpc.url, connectWallet, disconnectWallet]);
     var disconnectWalletWrapper = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
         var provider, err_2;
         return __generator(this, function (_a) {
@@ -803,7 +813,7 @@ function Inner(_a) {
         waitForTransactionWithCheck,
     ]);
     // Using Ledger
-    var _h = useLocalStorage("isUsingLedger-".concat(impersonatedAddress !== null && impersonatedAddress !== void 0 ? impersonatedAddress : account === null || account === void 0 ? void 0 : account.address), false), isUsingLedger = _h[0], setIsUsingLedger = _h[1];
+    var _j = useLocalStorage("isUsingLedger-".concat(impersonatedAddress !== null && impersonatedAddress !== void 0 ? impersonatedAddress : account === null || account === void 0 ? void 0 : account.address), false), isUsingLedger = _j[0], setIsUsingLedger = _j[1];
     // Context
     var contextValue = useMemo(function () {
         return {

package/lib/connector.d.ts

@@ -1,6 +1,8 @@
+import { type AppKit } from "@reown/appkit/core";
 import UniversalProvider from "@walletconnect/universal-provider";
 export declare const projectId = "eebad6a56ec8b3f08b70175934d35a9d";
 export declare function getWalletConnectProvider(): Promise<UniversalProvider>;
+export declare function getWalletConnectModal(rpcUrl: string): Promise<AppKit>;
 export declare const WC_SUI_METHODS: {
     readonly SIGN_TRANSACTION: "sui_signTransaction";
     readonly SIGN_AND_EXECUTE_TRANSACTION: "sui_signAndExecuteTransaction";

package/lib/connector.js

@@ -34,6 +34,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+import { createAppKit } from "@reown/appkit/core";
 import UniversalProvider from "@walletconnect/universal-provider";
 export var projectId = "eebad6a56ec8b3f08b70175934d35a9d";
 var provider;
@@ -60,6 +61,44 @@ export function getWalletConnectProvider() {
         });
     });
 }
+var modal;
+var modalRpcUrl;
+export function getWalletConnectModal(rpcUrl) {
+    return __awaiter(this, void 0, void 0, function () {
+        var universalProvider;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(!modal || modalRpcUrl !== rpcUrl)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getWalletConnectProvider()];
+                case 1:
+                    universalProvider = _a.sent();
+                    modal = createAppKit({
+                        projectId: projectId,
+                        networks: [
+                            {
+                                id: 784,
+                                chainNamespace: "sui",
+                                caipNetworkId: "sui:mainnet",
+                                name: "Sui",
+                                nativeCurrency: { name: "SUI", symbol: "SUI", decimals: 9 },
+                                rpcUrls: {
+                                    default: {
+                                        http: [rpcUrl],
+                                    },
+                                },
+                            },
+                        ],
+                        universalProvider: universalProvider,
+                        manualWCControl: true,
+                    });
+                    modalRpcUrl = rpcUrl;
+                    _a.label = 2;
+                case 2: return [2 /*return*/, modal];
+            }
+        });
+    });
+}
 export var WC_SUI_METHODS = {
     SIGN_TRANSACTION: "sui_signTransaction",
     SIGN_AND_EXECUTE_TRANSACTION: "sui_signAndExecuteTransaction",

package/package.json

@@ -1 +1 @@
-{"name":"@suilend/sui-fe-next","version":"2.0.15","private":false,"description":"A collection of TypeScript frontend components and hooks","author":"Suilend","license":"MIT","main":"./index.js","exports":{".":"./index.js","./contexts/WalletContext":"./contexts/WalletContext.jsx","./contexts/SettingsContext":"./contexts/SettingsContext.jsx","./contexts":"./contexts/index.js","./fetchers":"./fetchers/index.js","./fetchers/useFetchBalances":"./fetchers/useFetchBalances.js","./hooks/useRefreshOnBalancesChange":"./hooks/useRefreshOnBalancesChange.js","./hooks/useLedgerHashDialog":"./hooks/useLedgerHashDialog.js","./hooks/useIsAndroid":"./hooks/useIsAndroid.jsx","./hooks/useCoinMetadataMap":"./hooks/useCoinMetadataMap.js","./hooks":"./hooks/index.js","./hooks/useIsTouchscreen":"./hooks/useIsTouchscreen.jsx","./hooks/useIsiOS":"./hooks/useIsiOS.jsx","./hooks/keypair":"./hooks/keypair.js","./lib/track":"./lib/track.js","./lib":"./lib/index.js","./lib/router":"./lib/router.js","./lib/toasts":"./lib/toasts.jsx","./lib/connector":"./lib/connector.js"},"types":"./index.js","scripts":{"build":"rm -rf ./dist && bun tsc","eslint":"eslint --fix src/","prettier":"prettier --write src/","lint":"bun eslint && bun prettier && bun tsc --noEmit","release":"bun run build && bun ./release.js && cd ./dist && npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/suilend/sui-fe.git"},"bugs":{"url":"https://github.com/suilend/sui-fe/issues"},"dependencies":{"@reown/appkit":"1.8.2","@tanstack/react-query":"^5.60.2","@wallet-standard/app":"^1.1.0","@walletconnect/universal-provider":"2.21.1","bignumber.js":"^9.1.2","launchdarkly-react-client-sdk":"^3.6.0","lodash":"^4.17.21","mixpanel-browser":"^2.72.0","next":"^15.0.3","react":"18.3.1","react-dom":"18.3.1","react-responsive":"^10.0.0","sonner":"1.4.41","swr":"^2.2.5","tailwind-merge":"^2.5.4","usehooks-ts":"^3.1.1"},"devDependencies":{"@tsconfig/next":"^2.0.3","@types/lodash":"^4.17.13","@types/node":"^22.9.0","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@typescript-eslint/eslint-plugin":"^8.14.0","@typescript-eslint/parser":"^8.14.0","eslint":"^9.14.0","eslint-config-next":"^15.0.3","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.31.0","eslint-plugin-prettier":"^5.2.1","prettier":"^3.3.3","ts-node":"^10.9.2","typescript":"^5.6.3"},"peerDependencies":{"@mysten/dapp-kit-core":"1.0.3","@mysten/dapp-kit-react":"1.0.1","@mysten/sui":"2.3.1","@mysten/wallet-standard":"0.20.0","@suilend/sui-fe":"^2.0.10"}}
+{"name":"@suilend/sui-fe-next","version":"2.0.16","private":false,"description":"A collection of TypeScript frontend components and hooks","author":"Suilend","license":"MIT","main":"./index.js","exports":{".":"./index.js","./contexts/WalletContext":"./contexts/WalletContext.jsx","./contexts/SettingsContext":"./contexts/SettingsContext.jsx","./contexts":"./contexts/index.js","./fetchers":"./fetchers/index.js","./fetchers/useFetchBalances":"./fetchers/useFetchBalances.js","./hooks/useRefreshOnBalancesChange":"./hooks/useRefreshOnBalancesChange.js","./hooks/useLedgerHashDialog":"./hooks/useLedgerHashDialog.js","./hooks/useIsAndroid":"./hooks/useIsAndroid.jsx","./hooks/useCoinMetadataMap":"./hooks/useCoinMetadataMap.js","./hooks":"./hooks/index.js","./hooks/useIsTouchscreen":"./hooks/useIsTouchscreen.jsx","./hooks/useIsiOS":"./hooks/useIsiOS.jsx","./hooks/keypair":"./hooks/keypair.js","./lib/track":"./lib/track.js","./lib":"./lib/index.js","./lib/router":"./lib/router.js","./lib/toasts":"./lib/toasts.jsx","./lib/connector":"./lib/connector.js"},"types":"./index.js","scripts":{"build":"rm -rf ./dist && bun tsc","eslint":"eslint --fix src/","prettier":"prettier --write src/","lint":"bun eslint && bun prettier && bun tsc --noEmit","release":"bun run build && bun ./release.js && cd ./dist && npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/suilend/sui-fe.git"},"bugs":{"url":"https://github.com/suilend/sui-fe/issues"},"dependencies":{"@reown/appkit":"1.8.2","@tanstack/react-query":"^5.60.2","@wallet-standard/app":"^1.1.0","@walletconnect/universal-provider":"2.21.1","bignumber.js":"^9.1.2","launchdarkly-react-client-sdk":"^3.6.0","lodash":"^4.17.21","mixpanel-browser":"^2.72.0","next":"^15.0.3","react":"18.3.1","react-dom":"18.3.1","react-responsive":"^10.0.0","sonner":"1.4.41","swr":"^2.2.5","tailwind-merge":"^2.5.4","usehooks-ts":"^3.1.1"},"devDependencies":{"@tsconfig/next":"^2.0.3","@types/lodash":"^4.17.13","@types/node":"^22.9.0","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@typescript-eslint/eslint-plugin":"^8.14.0","@typescript-eslint/parser":"^8.14.0","eslint":"^9.14.0","eslint-config-next":"^15.0.3","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.31.0","eslint-plugin-prettier":"^5.2.1","prettier":"^3.3.3","ts-node":"^10.9.2","typescript":"^5.6.3"},"peerDependencies":{"@mysten/dapp-kit-core":"1.0.3","@mysten/dapp-kit-react":"1.0.1","@mysten/sui":"2.3.1","@mysten/wallet-standard":"0.20.0","@suilend/sui-fe":"^2.0.10"}}