@lifi/widget 1.2.0 → 1.4.0

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/Header.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidgetConfig } from '@lifi/widget/providers/WidgetProvider';
 import { useLocation } from 'react-router-dom';
 import { ElementId } from '../../utils/elements';
 import { routes } from '../../utils/routes';
@@ -14,4 +15,7 @@ const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
     return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
-export const Header = () => (_jsxs(HeaderContainer, { children: [_jsx(WalletHeader, {}), _jsx(NavigationHeader, {})] }));
+export const Header = () => {
+    const { walletManagement } = useWidgetConfig();
+    return (_jsxs(HeaderContainer, { children: [!walletManagement ? _jsx(WalletHeader, {}) : null, _jsx(NavigationHeader, {})] }));
+};

package/components/Header/Header.style.d.ts

@@ -7,9 +7,7 @@ export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omi
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").HTMLAttributes<HTMLElement> | "key"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    pt?: number | undefined;
-}, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;

package/components/Header/Header.style.js

@@ -1,15 +1,16 @@
 import { AppBar, Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-export const HeaderAppBar = styled(AppBar, {
-    shouldForwardProp: (prop) => prop !== 'pt',
-})(({ theme, pt }) => ({
+export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
     flexDirection: 'row',
     alignItems: 'center',
     position: 'relative',
     minHeight: 48,
-    padding: theme.spacing(pt !== null && pt !== void 0 ? pt : 0, 3, 0, 3),
+    padding: theme.spacing(0, 3, 0, 3),
+    '&:first-of-type': {
+        paddingTop: theme.spacing(1.5),
+    },
 }));
 export const Container = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'sticky',

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 = () => {
@@ -12,7 +22,7 @@ export const WalletHeader = () => {
     const walletAddress = account.address
         ? `${account.address.substring(0, 7)}...${account.address.substring(account.address.length - 7)}`
         : null;
-    return (_jsx(HeaderAppBar, Object.assign({ elevation: 0, pt: 1.5 }, { children: walletAddress ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ sx: {
+    return (_jsx(HeaderAppBar, Object.assign({ elevation: 0 }, { children: walletAddress ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ sx: {
                         display: 'flex',
                         flex: 1,
                         flexDirection: 'column',
@@ -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.walletManagement) {
+            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/components/SwapButton/SwapButton.js

@@ -15,6 +15,7 @@ import { useNavigate } from 'react-router-dom';
 import { useChains, useHasSufficientBalance, useSwapRoutes } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
+import { useWidgetConfig } from '../../providers/WidgetProvider';
 import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { ButtonTooltip } from './ButtonTooltip';
@@ -24,7 +25,8 @@ export const SwapButton = () => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    const { account, switchChain } = useWallet();
+    const config = useWidgetConfig();
+    const { account, switchChain, connect: walletConnect } = useWallet();
     const [currentRoute] = useCurrentRoute();
     const setExecutableRoute = useSetExecutableRoute();
     const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
@@ -35,7 +37,12 @@ export const SwapButton = () => {
     const isCurrentChainMatch = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) === account.chainId;
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
-            navigate(routes.selectWallet);
+            if (config.walletManagement) {
+                yield walletConnect();
+            }
+            else {
+                navigate(routes.selectWallet);
+            }
         }
         else if (!isCurrentChainMatch) {
             yield switchChain(chainId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "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",
@@ -39,22 +39,22 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@ethersproject/experimental": "^5.6.2",
+    "@ethersproject/experimental": "^5.6.3",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/wallet-management": "^1.0.2",
+    "@lifi/wallet-management": "^1.0.4",
     "@lifinance/sdk": "^1.0.0-beta.11",
-    "@mui/icons-material": "^5.8.3",
-    "@mui/lab": "^5.0.0-alpha.85",
-    "@mui/material": "^5.8.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.87",
+    "@mui/material": "^5.8.5",
     "big.js": "^6.2.0",
-    "i18next": "^21.8.9",
-    "immer": "^9.0.14",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-hook-form": "^7.32.0",
-    "react-i18next": "^11.17.1",
+    "i18next": "^21.8.11",
+    "immer": "^9.0.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.33.0",
+    "react-i18next": "^11.17.3",
     "react-query": "^4.0.0-beta.23",
-    "react-resize-detector": "^7.1.1",
+    "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
     "react-virtual": "^2.10.4",

package/providers/WalletProvider/WalletProvider.js

@@ -20,63 +20,104 @@ const initialContext = {
     switchChain: stub,
     addChain: stub,
     addToken: stub,
+    attemptEagerConnect: stub,
     account: {},
 };
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
 export const WalletProvider = ({ children }) => {
+    var _a;
     const config = useWidgetConfig();
     const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLifiWalletManagement();
     const [account, setAccount] = useState({});
+    useEffect(() => {
+        var _a;
+        console.log('WalletProvider: signer changed.', (_a = config.walletManagement) === null || _a === void 0 ? void 0 : _a.signer);
+        const updateSigner = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _b;
+            const account = yield extractAccountFromSigner((_b = config.walletManagement) === null || _b === void 0 ? void 0 : _b.signer);
+            setAccount(account);
+            console.log('WalletProvider: signer changed account.', account);
+        });
+        updateSigner();
+    }, [(_a = config.walletManagement) === null || _a === void 0 ? void 0 : _a.signer]);
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
-            // TODO
+        if (config.walletManagement) {
+            const signer = yield config.walletManagement.connect();
+            const account = yield extractAccountFromSigner(signer);
+            setAccount(account);
             return;
         }
         yield walletManagementConnect(wallet);
-    }), [config.disableInternalWalletManagement, walletManagementConnect]);
+    }), [config.walletManagement, walletManagementConnect]);
     const disconnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
+        if (config.walletManagement) {
+            yield config.walletManagement.disconnect();
             setAccount({});
+            return;
         }
         yield walletManagementDisconnect();
-    }), [config.disableInternalWalletManagement, walletManagementDisconnect]);
+    }), [config.walletManagement, walletManagementDisconnect]);
     // only for injected wallets
     const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
-            // TODO
-            return false;
+        if (config.walletManagement) {
+            const signer = yield config.walletManagement.switchChain(chainId);
+            const account = yield extractAccountFromSigner(signer);
+            setAccount(account);
         }
         return walletSwitchChain(chainId);
-    }), [config.disableInternalWalletManagement]);
+    }), [config.walletManagement]);
     const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!config.disableInternalWalletManagement) {
-            yield walletAddChain(chainId);
+        if (config.walletManagement) {
+            return config.walletManagement.addChain(chainId);
         }
-    }), [config.disableInternalWalletManagement]);
+        return walletAddChain(chainId);
+    }), [config.walletManagement]);
     const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!config.disableInternalWalletManagement) {
-            yield switchChainAndAddToken(chainId, token);
+        if (config.walletManagement) {
+            return config.walletManagement.addToken(token, chainId);
+        }
+        return switchChainAndAddToken(chainId, token);
+    }), [config.walletManagement]);
+    const attemptEagerConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.walletManagement) {
+            try {
+                const signer = yield config.walletManagement.getSigner();
+                const account = yield extractAccountFromSigner(signer);
+                setAccount(() => (Object.assign({}, account)));
+            }
+            catch (e) {
+                console.warn('WalletProvider: attempted eager connect.', e);
+            }
         }
-    }), [config.disableInternalWalletManagement]);
+    }), [config.walletManagement]);
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (!config.disableInternalWalletManagement) {
+            if (!config.walletManagement) {
                 const account = yield extractAccountFromSigner(signer);
                 setAccount(account);
             }
         });
         updateAccount();
-    }, [signer, config.disableInternalWalletManagement]);
+    }, [signer, config.walletManagement]);
     const value = useMemo(() => ({
         connect,
         disconnect,
         switchChain,
         addChain,
         addToken,
+        attemptEagerConnect,
         account,
-    }), [account, addChain, addToken, connect, disconnect, switchChain]);
+    }), [
+        account,
+        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';
@@ -9,12 +9,14 @@ export declare type ThemeConfig = {
     shape?: Shape;
     typography?: TypographyOptions;
 };
-export interface WidgetWalletCallbacks {
-    connect(): Signer;
-    disconnect(): void;
-    provideSigner(): Signer;
-    switchChain(): Signer;
-    addToken(): void;
+export interface WidgetWalletManagement {
+    connect(): Promise<Signer>;
+    disconnect(): Promise<void>;
+    getSigner(): Promise<Signer | undefined>;
+    switchChain(reqChainId: number): Promise<Signer>;
+    addToken(token: Token, chainId: number): Promise<void>;
+    addChain(chainId: number): Promise<boolean>;
+    signer?: Signer;
 }
 interface WidgetConfigBase {
     fromAmount?: number;
@@ -23,6 +25,7 @@ interface WidgetConfigBase {
     theme?: ThemeConfig;
     appearance?: Appearance;
     disableAppearance?: boolean;
+    walletManagement?: WidgetWalletManagement;
 }
 declare type WidgetFromTokenConfig = {
     fromChain: `${ChainKey}` | number;
@@ -38,12 +41,5 @@ declare type WidgetToTokenConfig = {
     toChain?: never;
     toToken?: never;
 };
-declare type WidgetWalletManagementConfig = {
-    disableInternalWalletManagement: true;
-    walletCallbacks: WidgetWalletCallbacks;
-} | {
-    disableInternalWalletManagement?: false;
-    walletCallbacks?: never;
-};
-export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig & WidgetWalletManagementConfig;
+export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig;
 export {};