@lifi/widget 1.1.1 → 1.2.0

package/hooks/useSwapRoutes.js

@@ -14,23 +14,25 @@ import { useDebouncedWatch, useToken } from '.';
 import { LiFi } from '../lifi';
 import { SwapFormKey } from '../providers/SwapFormProvider';
 import { useWallet } from '../providers/WalletProvider';
-import { useCurrentRoute } from './useRouteExecution';
+import { useCurrentRoute, useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
     var _a;
     const { account } = useWallet();
     const queryClient = useQueryClient();
     const [currentRoute, setCurrentRoute] = useCurrentRoute();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,] = useWatch({
+    const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
+        'slippage',
+        'routePriority',
+        'enabledBridges',
+        'enabledExchanges',
+    ]);
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] = useWatch({
         name: [
             SwapFormKey.FromChain,
             SwapFormKey.FromToken,
             SwapFormKey.ToChain,
             SwapFormKey.ToToken,
-            SwapFormKey.Slippage,
-            SwapFormKey.EnabledBridges,
-            SwapFormKey.EnabledExchanges,
-            SwapFormKey.RoutePriority,
         ],
     });
     const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 500);
@@ -42,7 +44,7 @@ export const useSwapRoutes = () => {
         Boolean(toTokenAddress) &&
         Boolean(fromTokenAmount) &&
         !isNaN(fromTokenAmount) &&
-        !isNaN(slippage);
+        !Number.isNaN(slippage);
     const queryKey = [
         'routes',
         account.address,

package/hooks/useTools.d.ts

@@ -0,0 +1 @@
+export declare const useTools: () => import("@lifinance/types").ToolsResponse | undefined;

package/hooks/useTools.js

@@ -0,0 +1,14 @@
+/* eslint-disable no-underscore-dangle */
+import { useQuery } from 'react-query';
+import { LiFi } from '../lifi';
+import { useSettingsStore } from '../stores';
+export const useTools = () => {
+    const initializeTools = useSettingsStore((state) => state.initializeTools);
+    const { data } = useQuery(['tools'], ({ signal }) => LiFi.getTools(undefined, { signal }), {
+        onSuccess(data) {
+            initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
+            initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));
+        },
+    });
+    return data;
+};

package/i18n/en/translation.json

@@ -1,142 +1,140 @@
 {
-    "header": {
-        "walletConnected": "Wallet connected",
-        "connectWallet": "Connect wallet",
-        "selectWallet": "Select your wallet",
-        "swap": "Swap",
-        "from": "Swap from",
-        "to": "Swap to",
-        "settings": "Settings",
-        "routes": "You get"
+  "header": {
+    "walletConnected": "Wallet connected",
+    "connectWallet": "Connect wallet",
+    "selectWallet": "Select your wallet",
+    "swap": "Swap",
+    "from": "Swap from",
+    "to": "Swap to",
+    "settings": "Settings",
+    "routes": "You get"
+  },
+  "button": {
+    "swap": "Swap",
+    "connectWallet": "Connect wallet",
+    "switchChain": "Switch chain",
+    "startSwap": "Start the swap",
+    "restartSwap": "Restart swap",
+    "removeSwap": "Remove swap",
+    "done": "Done",
+    "okay": "Okay",
+    "seeDetails": "See details",
+    "tryAgain": "Try again",
+    "light": "Light",
+    "dark": "Dark",
+    "auto": "Auto",
+    "ok": "Ok",
+    "hide": "Hide",
+    "max": "max",
+    "lifiSwap": "LI.FI Swap"
+  },
+  "swap": {
+    "from": "From",
+    "to": "To",
+    "amount": "You pay",
+    "maxAmount": "/ {{amount}}",
+    "routes": "You get",
+    "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
+    "currency": "{{value, currency(currency: USD)}}",
+    "sendToRecipient": "Send to recipient",
+    "addressConfirmation": "I confirm that the address above is correct",
+    "gas": "gas fee",
+    "minutes": "minutes",
+    "tokenSearch": "Search your token",
+    "selectChain": "Chain",
+    "selectToken": "Token",
+    "selectChainAndToken": "Select chain and token",
+    "inProgress": "In progress",
+    "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
+    "insufficientFunds": "Insufficient funds",
+    "insufficientGasOnStartChain": "Insufficient gas on start chain",
+    "insufficientGasOnDestinationChain": "Insufficient gas on destination chain",
+    "insufficientGasOnDestinationChainTooltip": "The selected route requires a swap on the chain you are transferring to. You need to have gas on that chain to pay for the transaction there.",
+    "stepSwap": "Swap",
+    "stepBridge": "Bridge",
+    "stepSwapAndBridge": "Swap and bridge",
+    "estimatedTime": "~{{value}} min.",
+    "networkIsBusy": "Network is busy...",
+    "crossStepDetails": "Bridge {{from}} to {{to}} via {{tool}}",
+    "swapStepDetails": "Swap on {{value}}",
+    "tags": {
+      "recommended": "Recommended",
+      "fastest": "Fast",
+      "cheapest": "Cheap",
+      "safest": "Safe",
+      "general": "General"
     },
-    "button": {
-        "swap": "Swap",
-        "connectWallet": "Connect wallet",
-        "switchChain": "Switch chain",
-        "startSwap": "Start the swap",
-        "restartSwap": "Restart swap",
-        "removeSwap": "Remove swap",
-        "done": "Done",
-        "okay": "Okay",
-        "seeDetails": "See details",
-        "tryAgain": "Try again",
-        "light": "Light",
-        "dark": "Dark",
-        "auto": "Auto",
-        "ok": "Ok",
-        "hide": "Hide",
-        "max": "max",
-        "lifiSwap": "LI.FI Swap"
+    "success": {
+      "title": {
+        "fundsReceived": "Funds received"
+      },
+      "message": {
+        "fundsReceived": "You now have {{amount}} {{tokenSymbol}} in your wallet on {{chainName}} chain."
+      }
     },
-    "swap": {
-        "from": "From",
-        "to": "To",
-        "amount": "You pay",
-        "maxAmount": "/ {{amount}}",
-        "routes": "You get",
-        "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
-        "currency": "{{value, currency(currency: USD)}}",
-        "sendToRecipient": "Send to recipient",
-        "recipientsAddress": "Recipient's {{chain}} address",
-        "addressConfirmation": "I confirm that the address above is correct",
-        "gas": "gas fee",
-        "minutes": "minutes",
-        "tokenSearch": "Search your token",
-        "selectChain": "Chain",
-        "selectToken": "Token",
-        "selectChainAndToken": "Select chain and token",
-        "inProgress": "In progress",
-        "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
-        "insufficientFunds": "Insufficient funds",
-        "insufficientGasOnStartChain": "Insufficient gas on start chain",
-        "insufficientGasOnDestinationChain": "Insufficient gas on destination chain",
-        "insufficientGasOnDestinationChainTooltip": "The selected route requires a swap on the chain you are transferring to. You need to have gas on that chain to pay for the transaction there.",
-        "stepSwap": "Swap",
-        "stepBridge": "Bridge",
-        "stepSwapAndBridge": "Swap and bridge",
-        "estimatedTime": "~{{value}} min.",
-        "networkIsBusy": "Network is busy...",
-        "crossStepDetails": "Bridge {{from}} to {{to}} via {{tool}}",
-        "swapStepDetails": "Swap on {{value}}",
-        "tags": {
-            "recommended": "Recommended",
-            "fastest": "Fast",
-            "cheapest": "Cheap",
-            "safest": "Safe",
-            "general": "General"
-        },
-        "success": {
-            "title": {
-                "fundsReceived": "Funds received"
-            },
-            "message": {
-                "fundsReceived": "You now have {{amount}} {{tokenSymbol}} in your wallet on {{chainName}} chain."
-            }
-        },
-        "error": {
-            "title": {
-                "chainSwitch": "Chain switch required.",
-                "transactionFailed": "Transaction has failed.",
-                "transactionUnderpriced": "Transaction is underpriced.",
-                "transactionUnprepared": "Unable to prepare transaction.",
-                "unknown": "Something went wrong.",
-                "userRejectedSignatureRequest": "Signature required."
-            },
-            "message": {
-                "signatureRequired": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
-                "transactionFailed": "Please check the block explorer for more information.",
-                "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount}} {{tokenSymbol}} on {{chainName}})."
-            }
-        },
-        "process": {
-            "tokenAllowance": {
-                "started": "Setting token allowance.",
-                "pending": "Waiting for token allowance approval.",
-                "done": "Token allowance approved."
-            },
-            "switchChain": {
-                "pending": "Chain switch required.",
-                "done": "Chain switched successfully."
-            },
-            "swap": {
-                "started": "Preparing swap.",
-                "actionRequired": "Please sign the transaction.",
-                "pending": "Swapping.",
-                "done": "Swap completed."
-            },
-            "crossChain": {
-                "started": "Preparing transaction.",
-                "actionRequired": "Please sign the transaction.",
-                "pending": "Waiting for transaction.",
-                "done": "Transaction approved."
-            },
-            "receivingChain": {
-                "pending": "Waiting for receiving chain.",
-                "done": "Funds received."
-            }
-        }
+    "error": {
+      "title": {
+        "chainSwitch": "Chain switch required.",
+        "transactionFailed": "Transaction has failed.",
+        "transactionUnderpriced": "Transaction is underpriced.",
+        "transactionUnprepared": "Unable to prepare transaction.",
+        "unknown": "Something went wrong.",
+        "userRejectedSignatureRequest": "Signature required."
+      },
+      "message": {
+        "signatureRequired": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+        "transactionFailed": "Please check the block explorer for more information.",
+        "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount}} {{tokenSymbol}} on {{chainName}})."
+      }
     },
-    "settings": {
-        "routePriority": "Route priority",
-        "slippage": "Slippage",
-        "gasPrice": {
-            "title": "Gas price",
-            "slow": "Slow",
-            "normal": "Normal",
-            "fast": "Fast"
-        },
-        "advancedPreferences": "Advanced preferences",
-        "bridgePrioritization": "Bridge prioritization",
-        "enabledBridges": "Enabled bridges",
-        "selectEnabledBridges": "Select enabled bridges",
-        "enabledExchanges": "Enabled exchanges",
-        "selectEnabledExchanges": "Select enabled exchanges",
-        "resetToDefault": "Reset to default"
-    },
-    "wallet": {
-        "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
-    },
-    "tooltip": {
-        "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
+    "process": {
+      "tokenAllowance": {
+        "started": "Setting token allowance.",
+        "pending": "Waiting for token allowance approval.",
+        "done": "Token allowance approved."
+      },
+      "switchChain": {
+        "pending": "Chain switch required.",
+        "done": "Chain switched successfully."
+      },
+      "swap": {
+        "started": "Preparing swap.",
+        "actionRequired": "Please sign the transaction.",
+        "pending": "Swapping.",
+        "done": "Swap completed."
+      },
+      "crossChain": {
+        "started": "Preparing transaction.",
+        "actionRequired": "Please sign the transaction.",
+        "pending": "Waiting for transaction.",
+        "done": "Transaction approved."
+      },
+      "receivingChain": {
+        "pending": "Waiting for receiving chain.",
+        "done": "Funds received."
+      }
     }
+  },
+  "settings": {
+    "routePriority": "Route priority",
+    "slippage": "Slippage",
+    "gasPrice": {
+      "title": "Gas price",
+      "slow": "Slow",
+      "normal": "Normal",
+      "fast": "Fast"
+    },
+    "advancedPreferences": "Advanced preferences",
+    "enabledBridges": "Enabled bridges",
+    "selectEnabledBridges": "Select enabled bridges",
+    "enabledExchanges": "Enabled exchanges",
+    "selectEnabledExchanges": "Select enabled exchanges",
+    "resetToDefault": "Reset to default"
+  },
+  "wallet": {
+    "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
+  },
+  "tooltip": {
+    "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
+  }
 }

package/i18n/index.d.ts

@@ -40,7 +40,6 @@ export declare const resources: {
                 approximateCurrency: string;
                 currency: string;
                 sendToRecipient: string;
-                recipientsAddress: string;
                 addressConfirmation: string;
                 gas: string;
                 minutes: string;
@@ -129,7 +128,6 @@ export declare const resources: {
                     fast: string;
                 };
                 advancedPreferences: string;
-                bridgePrioritization: string;
                 enabledBridges: string;
                 selectEnabledBridges: string;
                 enabledExchanges: string;

package/icons/LiFiFullLogo.svg

@@ -0,0 +1,10 @@
+<svg width="84" height="32" viewBox="0 0 84 32" fill="inherit"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M50.6689 20.5714H42.6849V8H39V24H50.6689V20.5714Z" />
+  <path d="M53.0717 24H56.7566V8H53.0717V24Z" />
+  <path d="M59.5088 24H63.0117V20.48H59.5088V24Z" />
+  <path d="M69.4396 17.76H77.1506V14.6057H69.4396V11.2457H77.8103V8H65.7547V24H69.4396V17.76Z" />
+  <path d="M80.3151 24H84V8H80.3151V24Z" />
+  <path d="M14.6163 21.6947L5.1336 23.89C4.78772 23.9766 4.52832 24.3232 4.52832 24.6698V31.1978C4.52832 31.7467 4.96066 32.0933 5.50829 31.9777L18.7379 28.9159C19.2856 28.8004 19.5162 28.2805 19.2856 27.7894L16.8933 22.8501C16.5186 22.0702 16.8933 21.2614 17.7291 21.0881L26.376 19.0084C26.9813 18.864 27.5001 18.2285 27.5001 17.593V11.5561C27.5001 11.0073 27.0677 10.6318 26.5201 10.7762L14.0398 13.7514C13.2616 13.9247 12.9157 14.6757 13.2616 15.3978L15.4521 19.9327C15.8268 20.7126 15.4521 21.4925 14.6163 21.6947Z" />
+  <path d="M8.36225 5.3748L10.841 10.4585C11.1581 11.1229 10.841 11.8161 10.1204 11.9606L5.53762 13.0293C4.96116 13.1737 4.5 13.7514 4.5 14.3291V19.7884C4.5 20.7127 5.24939 21.2904 6.1429 21.0882L10.4087 20.1061C10.9851 19.9906 11.4463 19.384 11.4463 18.8063L11.4751 13.2026C11.4751 12.4227 12.1092 11.6428 12.8586 11.4695L26.8376 8.11886C27.1835 8.03221 27.4429 7.68559 27.4429 7.33897V0.810981C27.4429 0.262168 27.0106 -0.113336 26.4629 0.0310883L8.90988 4.24829C8.36225 4.36383 8.13167 4.88375 8.36225 5.3748Z" />
+</svg>

package/icons/LiFiLogo.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="inherit"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.6163 21.6947L5.1336 23.89C4.78772 23.9766 4.52832 24.3232 4.52832 24.6698V31.1978C4.52832 31.7467 4.96066 32.0933 5.50829 31.9777L18.7379 28.9159C19.2856 28.8004 19.5162 28.2805 19.2856 27.7894L16.8933 22.8501C16.5186 22.0702 16.8933 21.2614 17.7291 21.0881L26.376 19.0084C26.9813 18.864 27.5001 18.2285 27.5001 17.593V11.5561C27.5001 11.0073 27.0677 10.6318 26.5201 10.7762L14.0398 13.7514C13.2616 13.9247 12.9157 14.6757 13.2616 15.3978L15.4521 19.9327C15.8268 20.7126 15.4521 21.4925 14.6163 21.6947Z" />
+  <path d="M8.36225 5.3748L10.841 10.4585C11.1581 11.1229 10.841 11.8161 10.1204 11.9606L5.53762 13.0293C4.96116 13.1737 4.5 13.7514 4.5 14.3291V19.7884C4.5 20.7127 5.24939 21.2904 6.1429 21.0882L10.4087 20.1061C10.9851 19.9906 11.4463 19.384 11.4463 18.8063L11.4751 13.2026C11.4751 12.4227 12.1092 11.6428 12.8586 11.4695L26.8376 8.11886C27.1835 8.03221 27.4429 7.68559 27.4429 7.33897V0.810981C27.4429 0.262168 27.0106 -0.113336 26.4629 0.0310883L8.90988 4.24829C8.36225 4.36383 8.13167 4.88375 8.36225 5.3748Z" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.1.1",
+  "version": "1.2.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",
@@ -23,6 +23,7 @@
   "bugs": {
     "url": "https://github.com/lifinance/widget/issues"
   },
+  "license": "MIT",
   "keywords": [
     "widget",
     "lifi-widget",
@@ -36,11 +37,11 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@ethersproject/experimental": "^5.6.2",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/wallet-management": "^1.0.1",
+    "@lifi/wallet-management": "^1.0.2",
     "@lifinance/sdk": "^1.0.0-beta.11",
     "@mui/icons-material": "^5.8.3",
     "@mui/lab": "^5.0.0-alpha.85",
@@ -50,8 +51,8 @@
     "immer": "^9.0.14",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-hook-form": "^7.31.3",
-    "react-i18next": "^11.16.10",
+    "react-hook-form": "^7.32.0",
+    "react-i18next": "^11.17.1",
     "react-query": "^4.0.0-beta.23",
     "react-resize-detector": "^7.1.1",
     "react-router-dom": "^6.3.0",

package/pages/SelectTokenPage/ChainSelect.js

@@ -21,5 +21,5 @@ export const ChainSelect = ({ formType }) => {
         setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
     };
-    return !isLoading ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ labelId: "label", MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 89, sx: { borderRadius: 1 } }));
+    return !isLoading ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ labelId: "label", MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/AdvancedPreferences.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
+import { useSetSettings, useSettings } from '../../stores';
 import { EnabledBridgesSelect } from './EnabledBridgesSelect';
 import { EnabledExchangesSelect } from './EnabledExchangesSelect';
 export const AdvancedPreferences = () => {
     const { t } = useTranslation();
-    const [advancedPreferences, setAdvancedPreferences] = useState(false);
+    const [setValue] = useSetSettings();
+    const { advancedPreferences } = useSettings(['advancedPreferences']);
     const handleAdvancedPreferences = (_, checked) => {
-        setAdvancedPreferences(checked);
+        setValue('advancedPreferences', checked);
     };
     return (_jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { value: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
+                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
 };

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Brightness4 as Brightness4Icon, DarkMode as DarkModeIcon, LightMode as LightModeIcon, } from '@mui/icons-material';
 import { Box, ToggleButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useAppearance } from '../../hooks';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { useAppearance } from '../../stores';
 import { ToggleButton } from './ColorSchemeButtonGroup.style';
 export const ColorSchemeButtonGroup = () => {
     const { t } = useTranslation();

package/pages/SettingsPage/EnabledBridgesSelect.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useBridges } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
 export const EnabledBridgesSelect = () => {
+    var _a;
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    const bridges = useBridges();
-    return bridges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), defaultValue: bridges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledBridges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: bridges.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge }, { children: bridge }), bridge))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+    const tools = useTools();
+    const [enabledBridges, setTools] = useSettingsStore((state) => [state.enabledBridges, state.setTools], shallow);
+    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
+                        if (tools === null || tools === void 0 ? void 0 : tools.bridges) {
+                            setTools('Bridges', event.target.value, tools.bridges);
+                        }
+                    }, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: (_a = tools === null || tools === void 0 ? void 0 : tools.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge.key }, { children: bridge.key }), bridge.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/EnabledExchangesSelect.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useExchanges } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
 export const EnabledExchangesSelect = () => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    const exchanges = useExchanges();
-    return exchanges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), defaultValue: exchanges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledExchanges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange }, { children: exchange }), exchange))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+    const tools = useTools();
+    const [enabledExchanges, setTools] = useSettingsStore((state) => [state.enabledExchanges, state.setTools], shallow);
+    return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), value: enabledExchanges !== null && enabledExchanges !== void 0 ? enabledExchanges : [], onChange: (event) => {
+                        if (tools === null || tools === void 0 ? void 0 : tools.exchanges) {
+                            setTools('Exchanges', event.target.value, tools.exchanges);
+                        }
+                    }, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: tools === null || tools === void 0 ? void 0 : tools.exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange.key }, { children: exchange.key }), exchange.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/GasPriceSelect.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { FormControl, MenuItem } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { formDefaultValues, SwapFormKey, } from '../../providers/SwapFormProvider';
+import { useSetSettings, useSettings } from '../../stores';
 export const GasPriceSelect = () => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    return (_jsxs(CardContainer, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ defaultValue: formDefaultValues.gasPrice, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.GasPrice)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
+    const [setValue] = useSetSettings();
+    const { gasPrice } = useSettings(['gasPrice']);
+    return (_jsxs(CardContainer, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
 };

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Orders } from '@lifinance/sdk';
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { FormControl, MenuItem } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { formDefaultValues, SwapFormKey, } from '../../providers/SwapFormProvider';
+import { useSetSettings, useSettings } from '../../stores';
 export const RoutePrioritySelect = () => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ defaultValue: formDefaultValues.routePriority, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.RoutePriority)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => (_jsx(MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
+    const [setValue] = useSetSettings();
+    const { routePriority } = useSettings(['routePriority']);
+    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => (_jsx(MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
 };

package/pages/SettingsPage/SlippageInput.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, InputAdornment } from '@mui/material';
 import { useRef } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Input } from '../../components/Input';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useSetSettings, useSettings } from '../../stores';
 import { formatSlippage } from '../../utils/format';
 export const SlippageInput = () => {
     const { t } = useTranslation();
-    const { setValue } = useFormContext();
-    const value = useWatch({
-        name: SwapFormKey.Slippage,
-    });
-    const defaultValue = useRef(value);
+    const [setValue] = useSetSettings();
+    const { slippage } = useSettings(['slippage']);
+    const defaultValue = useRef(slippage);
     const handleChange = (event) => {
         const { value } = event.target;
-        setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current, true));
+        setValue('slippage', formatSlippage(value, defaultValue.current, true));
     };
     const handleBlur = (event) => {
         const { value } = event.target;
-        setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current));
+        setValue('slippage', formatSlippage(value, defaultValue.current));
     };
     return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.slippage`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`settings.slippage`), endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: "%" })), autoComplete: "off", inputProps: {
                         inputMode: 'decimal',
-                    }, onChange: handleChange, onBlur: handleBlur, value: value, name: SwapFormKey.Slippage }) }))] }));
+                    }, onChange: handleChange, onBlur: handleBlur, value: slippage }) }))] }));
 };

package/pages/SwapPage/ExecutionItem.js

@@ -13,7 +13,7 @@ export const ExecutionItem = ({ step, process }) => {
     return (_jsxs(Box, Object.assign({ px: 2, py: 1 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',
-                } }, { children: [_jsx(CircularProgress, { status: process.status }), _jsx(Typography, Object.assign({ ml: 2, fontWeight: process.error ? 700 : 500 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
+                } }, { children: [_jsx(CircularProgress, { status: process.status }), _jsx(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',

package/pages/SwapPage/StatusBottomSheet.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { RouteExecution } from '../../hooks';
+import { RouteExecution } from '../../stores';
 export declare const StatusBottomSheet: React.FC<RouteExecution>;