@lifi/widget 1.2.0 → 1.2.1

package/App.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { AppProvider } from './AppProvider';
 import { AppContainer } from './components/AppContainer';
@@ -10,10 +11,16 @@ import { SelectWalletPage } from './pages/SelectWalletPage';
 import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
 import { SwapRoutesPage } from './pages/SwapRoutesPage';
+import { useWallet } from './providers/WalletProvider';
 import { routes } from './utils/routes';
 export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
 export const AppDefault = () => {
+    const { attemptEagerConnect } = useWallet();
+    useEffect(() => {
+        attemptEagerConnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: routes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: routes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: routes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: routes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: routes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: `${routes.swapRoutes}/${routes.swap}`, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: routes.swap, element: _jsx(SwapPage, {}) })] }), _jsx(Initializer, {})] }));
 };

package/components/Header/WalletHeader.js

@@ -1,9 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AccountBalanceWallet as AccountBalanceWalletIcon, Logout as LogoutIcon, } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers/WalletProvider';
+import { useWidgetConfig } from '../../providers/WidgetProvider';
 import { routes } from '../../utils/routes';
 import { HeaderAppBar } from './Header.style';
 export const WalletHeader = () => {
@@ -20,9 +30,15 @@ export const WalletHeader = () => {
 };
 const ConnectButton = () => {
     const { pathname } = useLocation();
+    const config = useWidgetConfig();
+    const { connect: walletConnect } = useWallet();
     const navigate = useNavigate();
-    const connect = () => {
+    const connect = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.disableInternalWalletManagement) {
+            yield walletConnect();
+            return;
+        }
         navigate(routes.selectWallet);
-    };
+    });
     return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(routes.selectWallet) ? connect : undefined }, { children: _jsx(AccountBalanceWalletIcon, {}) })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11.9.3",
     "@ethersproject/experimental": "^5.6.2",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/wallet-management": "^1.0.2",
+    "@lifi/wallet-management": "^1.0.3",
     "@lifinance/sdk": "^1.0.0-beta.11",
     "@mui/icons-material": "^5.8.3",
     "@mui/lab": "^5.0.0-alpha.85",

package/providers/WalletProvider/WalletProvider.js

@@ -20,6 +20,7 @@ const initialContext = {
     switchChain: stub,
     addChain: stub,
     addToken: stub,
+    attemptEagerConnect: stub,
     account: {},
 };
 const WalletContext = createContext(initialContext);
@@ -30,35 +31,58 @@ export const WalletProvider = ({ children }) => {
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
         if (config.disableInternalWalletManagement) {
-            // TODO
+            const signer = yield config.walletCallbacks.connect();
+            const account = yield extractAccountFromSigner(signer);
+            setAccount(account);
             return;
         }
         yield walletManagementConnect(wallet);
-    }), [config.disableInternalWalletManagement, walletManagementConnect]);
+    }), [
+        config.disableInternalWalletManagement,
+        config.walletCallbacks,
+        walletManagementConnect,
+    ]);
     const disconnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (config.disableInternalWalletManagement) {
+            yield config.walletCallbacks.disconnect();
             setAccount({});
+            return;
         }
         yield walletManagementDisconnect();
-    }), [config.disableInternalWalletManagement, walletManagementDisconnect]);
+    }), [
+        config.disableInternalWalletManagement,
+        config.walletCallbacks,
+        walletManagementDisconnect,
+    ]);
     // only for injected wallets
     const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (config.disableInternalWalletManagement) {
-            // TODO
-            return false;
+            const signer = yield config.walletCallbacks.switchChain(chainId);
+            const account = yield extractAccountFromSigner(signer);
+            setAccount(account);
         }
         return walletSwitchChain(chainId);
-    }), [config.disableInternalWalletManagement]);
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
     const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!config.disableInternalWalletManagement) {
-            yield walletAddChain(chainId);
+        if (config.disableInternalWalletManagement) {
+            return config.walletCallbacks.addChain(chainId);
         }
-    }), [config.disableInternalWalletManagement]);
+        return walletAddChain(chainId);
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
     const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!config.disableInternalWalletManagement) {
-            yield switchChainAndAddToken(chainId, token);
+        if (config.disableInternalWalletManagement) {
+            return config.walletCallbacks.addToken(token, chainId);
         }
-    }), [config.disableInternalWalletManagement]);
+        return switchChainAndAddToken(chainId, token);
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
+    const attemptEagerConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.disableInternalWalletManagement) {
+            const signer = yield config.walletCallbacks.provideSigner();
+            const account = yield extractAccountFromSigner(signer);
+            console.log(account);
+            setAccount((oldAccount) => (Object.assign({}, account)));
+        }
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -75,8 +99,17 @@ export const WalletProvider = ({ children }) => {
         switchChain,
         addChain,
         addToken,
+        attemptEagerConnect,
+        account,
+    }), [
         account,
-    }), [account, addChain, addToken, connect, disconnect, switchChain]);
+        addChain,
+        addToken,
+        connect,
+        disconnect,
+        switchChain,
+        attemptEagerConnect,
+    ]);
     return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {

package/providers/WalletProvider/types.d.ts

@@ -3,11 +3,12 @@ import { Token } from '@lifinance/sdk';
 import { Signer } from 'ethers';
 export interface WalletContextProps {
     account: WalletAccount;
-    addChain(chainId: number): Promise<void>;
+    addChain(chainId: number): Promise<boolean>;
     addToken(chainId: number, token: Token): Promise<void>;
     disconnect(): void;
     switchChain(chainId: number): Promise<boolean>;
     connect(wallet?: Wallet | undefined): Promise<void>;
+    attemptEagerConnect(): Promise<void>;
 }
 export interface WalletAccount {
     address?: string;

package/types/widget.d.ts

@@ -1,4 +1,4 @@
-import { ChainKey } from '@lifinance/sdk';
+import { ChainKey, Token } from '@lifinance/sdk';
 import { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
 import { Signer } from 'ethers';
@@ -10,11 +10,12 @@ export declare type ThemeConfig = {
     typography?: TypographyOptions;
 };
 export interface WidgetWalletCallbacks {
-    connect(): Signer;
-    disconnect(): void;
-    provideSigner(): Signer;
-    switchChain(): Signer;
-    addToken(): void;
+    connect(): Promise<Signer>;
+    disconnect(): Promise<void>;
+    provideSigner(): Promise<Signer | undefined>;
+    switchChain(reqChainId: number): Promise<Signer>;
+    addToken(token: Token, chainId: number): Promise<void>;
+    addChain(chainId: number): Promise<boolean>;
 }
 interface WidgetConfigBase {
     fromAmount?: number;