@lifi/widget 1.0.0

package/i18n/en/translation.json

@@ -0,0 +1,138 @@
+{
+    "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",
+        "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}}",
+        "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."
+            }
+        }
+    },
+    "settings": {
+        "routePriority": {
+            "title": "Route priority",
+            "recommended": "Recommended"
+        },
+        "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."
+    }
+}

package/i18n/index.d.ts

@@ -0,0 +1,144 @@
+export declare const defaultNS = "translation";
+export declare const resources: {
+    readonly en: {
+        readonly translation: {
+            header: {
+                walletConnected: string;
+                connectWallet: string;
+                selectWallet: string;
+                swap: string;
+                from: string;
+                to: string;
+                settings: string;
+                routes: string;
+            };
+            button: {
+                swap: string;
+                connectWallet: string;
+                switchChain: string;
+                startSwap: string;
+                restartSwap: string;
+                removeSwap: string;
+                done: string;
+                okay: string;
+                seeDetails: string;
+                tryAgain: string;
+                light: string;
+                dark: string;
+                auto: string;
+                ok: string;
+                hide: string;
+                max: string;
+                lifiSwap: string;
+            };
+            swap: {
+                from: string;
+                to: string;
+                amount: string;
+                maxAmount: string;
+                routes: string;
+                approximateCurrency: string;
+                currency: string;
+                sendToRecipient: string;
+                recipientsAddress: string;
+                addressConfirmation: string;
+                gas: string;
+                minutes: string;
+                tokenSearch: string;
+                selectChain: string;
+                selectToken: string;
+                selectChainAndToken: string;
+                inProgress: string;
+                couldntFindTokens: string;
+                insufficientFunds: string;
+                insufficientGasOnStartChain: string;
+                insufficientGasOnDestinationChain: string;
+                insufficientGasOnDestinationChainTooltip: string;
+                stepSwap: string;
+                stepBridge: string;
+                stepSwapAndBridge: string;
+                estimatedTime: string;
+                networkIsBusy: string;
+                crossStepDetails: string;
+                swapStepDetails: string;
+                success: {
+                    title: {
+                        fundsReceived: string;
+                    };
+                    message: {
+                        fundsReceived: string;
+                    };
+                };
+                error: {
+                    title: {
+                        chainSwitch: string;
+                        transactionFailed: string;
+                        transactionUnderpriced: string;
+                        transactionUnprepared: string;
+                        unknown: string;
+                        userRejectedSignatureRequest: string;
+                    };
+                    message: {
+                        signatureRequired: string;
+                        transactionFailed: string;
+                        transactionNotSent: string;
+                    };
+                };
+                process: {
+                    tokenAllowance: {
+                        started: string;
+                        pending: string;
+                        done: string;
+                    };
+                    switchChain: {
+                        pending: string;
+                        done: string;
+                    };
+                    swap: {
+                        started: string;
+                        actionRequired: string;
+                        pending: string;
+                        done: string;
+                    };
+                    crossChain: {
+                        started: string;
+                        actionRequired: string;
+                        pending: string;
+                        done: string;
+                    };
+                    receivingChain: {
+                        pending: string;
+                        done: string;
+                    };
+                };
+            };
+            settings: {
+                routePriority: {
+                    title: string;
+                    recommended: string;
+                };
+                slippage: string;
+                gasPrice: {
+                    title: string;
+                    slow: string;
+                    normal: string;
+                    fast: string;
+                };
+                advancedPreferences: string;
+                bridgePrioritization: string;
+                enabledBridges: string;
+                selectEnabledBridges: string;
+                enabledExchanges: string;
+                selectEnabledExchanges: string;
+                resetToDefault: string;
+            };
+            wallet: {
+                extensionNotFound: string;
+            };
+            tooltip: {
+                progressToNextUpdate: string;
+            };
+        };
+    };
+};
+export declare function configureReactI18next(): void;

package/i18n/index.js

@@ -0,0 +1,20 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import translation from './en/translation.json';
+export const defaultNS = 'translation';
+export const resources = {
+    en: {
+        translation,
+    },
+};
+export function configureReactI18next() {
+    i18n.use(initReactI18next).init({
+        lng: 'en',
+        fallbackLng: 'en',
+        lowerCaseLng: true,
+        interpolation: {
+            escapeValue: false,
+        },
+        resources,
+    });
+}

package/i18n/react-i18next.d.ts

@@ -0,0 +1,9 @@
+import 'react-i18next';
+import { defaultNS, resources } from '.';
+
+declare module 'react-i18next' {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: typeof resources['en'];
+  }
+}

package/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import './fonts/inter.css';
+export * from './types';
+export declare const LiFiWidget: import("react").FC<import("./AppProvider").AppProps>;
+export declare const LiFiWidgetDrawer: import("react").ForwardRefExoticComponent<Pick<import("./AppDrawer").AppDrawerProps, "className" | "style" | "classes" | "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" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<import("./AppDrawer").AppDrawerBase>>;

package/index.js

@@ -0,0 +1,9 @@
+import { App } from './App';
+import { AppDrawer } from './AppDrawer';
+import './fonts/inter.css';
+import { configureReactI18next } from './i18n';
+export * from './types';
+configureReactI18next();
+// ClassNameGenerator.configure((componentName) => componentName.replace('Mui', ''));
+export const LiFiWidget = App;
+export const LiFiWidgetDrawer = AppDrawer;

package/lifi.d.ts

@@ -0,0 +1,2 @@
+import LIFI from '@lifinance/sdk';
+export declare const LiFi: LIFI;

package/lifi.js

@@ -0,0 +1,10 @@
+import LIFI from '@lifinance/sdk';
+import { env } from './config/env';
+import { getRpcs } from './config/rpcs';
+export const LiFi = new LIFI({
+    apiUrl: env.LIFI_API_URL,
+    rpcs: getRpcs(),
+    defaultRouteOptions: {
+        integrator: 'li.fi',
+    },
+});

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@lifi/widget",
+  "version": "1.0.0",
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "./index.js",
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "yarn run lint:fix",
+      "yarn run prettier:fix"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Eugene Chybisov <eugene@li.finance>",
+  "license": "UNLICENSED",
+  "homepage": "https://github.com/lifinance/widget",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/lifinance/widget.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lifinance/widget/issues"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@ethersproject/experimental": "^5.6.2",
+    "@ethersproject/providers": "^5.6.8",
+    "@lifi/wallet-management": "^1.0.0",
+    "@lifinance/sdk": "^1.0.0-beta.8",
+    "@mui/icons-material": "^5.8.2",
+    "@mui/lab": "^5.0.0-alpha.84",
+    "@mui/material": "^5.8.2",
+    "big.js": "^6.2.0",
+    "i18next": "^21.8.7",
+    "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-query": "^4.0.0-beta.23",
+    "react-resize-detector": "^7.1.1",
+    "react-router-dom": "^6.3.0",
+    "react-timer-hook": "^3.0.5",
+    "react-virtual": "^2.10.4",
+    "zustand": "^4.0.0-rc.1"
+  },
+  "eslintConfig": {
+    "extends": "../../.eslintrc"
+  },
+  "private": false,
+  "types": "./index.d.ts"
+}

package/pages/MainPage/MainPage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MainPage: React.FC;

package/pages/MainPage/MainPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SelectChainAndToken } from '../../components/SelectChainAndToken';
+import { SwapButton } from '../../components/SwapButton';
+import { SwapInProgress } from '../../components/SwapInProgress';
+import { SwapInput } from '../../components/SwapInput';
+import { SwapRoutes } from '../../components/SwapRoutes';
+import { FormContainer } from './MainPage.style';
+export const MainPage = () => {
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 2, mb: 1 }), _jsx(SelectChainAndToken, { mt: 2, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(SwapButton, {}) }))] })));
+};

package/pages/MainPage/MainPage.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const FormContainer: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material").Breakpoint | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;

package/pages/MainPage/MainPage.style.js

@@ -0,0 +1,8 @@
+import { Container } from '@mui/material';
+import { styled } from '@mui/system';
+export const FormContainer = styled(Container)({
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    position: 'relative',
+});

package/pages/MainPage/SendToRecipientForm.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SendToRecipientForm: React.FC;

package/pages/MainPage/SendToRecipientForm.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material';
+import { Box, Checkbox, FormControl, FormControlLabel, Typography, } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../components/Input';
+import { Switch } from '../../components/Switch';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+export const SendToRecipientForm = () => {
+    const { t } = useTranslation();
+    const { register } = useFormContext();
+    const sendToRecipientChecked = useWatch({
+        name: SwapFormKey.IsSendToRecipient,
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ mb: 2, sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                } }, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(HelpOutlineIcon, { sx: { color: 'grey.500' } }), _jsx(Typography, Object.assign({ lineHeight: "normal", variant: "subtitle1", color: "text.primary", ml: 1 }, { children: t(`swap.sendToRecipient`) }))] })), _jsx(Switch, Object.assign({}, register(SwapFormKey.IsSendToRecipient)))] })), sendToRecipientChecked ? (_jsxs(_Fragment, { children: [_jsx(FormControl, Object.assign({ variant: "standard", fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.recipientsAddress`, { chain: 'ETH' }), required: true, inputProps: Object.assign({}, register(SwapFormKey.RecipientsAddress)) }) })), _jsx(Box, Object.assign({ mt: 0.5, mb: 1 }, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, Object.assign({ required: true }, register(SwapFormKey.IsAddressConfirmed))), label: t(`swap.addressConfirmation`), componentsProps: { typography: { variant: 'body2' } } }) }))] })) : null] }));
+};

package/pages/MainPage/index.d.ts

@@ -0,0 +1 @@
+export * from './MainPage';

package/pages/MainPage/index.js

@@ -0,0 +1 @@
+export * from './MainPage';

package/pages/SelectTokenPage/ChainSelect.d.ts

@@ -0,0 +1,2 @@
+import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/pages/SelectTokenPage/ChainSelect.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import { Avatar, FormControl, ListItemAvatar, MenuItem, Skeleton, } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { Select } from '../../components/Select';
+import { useChains } from '../../hooks';
+import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { useWidgetConfig } from '../../providers/WidgetProvider';
+export const ChainSelect = ({ formType }) => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const { fromChain, toChain } = useWidgetConfig();
+    const { chains, isLoading } = useChains();
+    const [chainId] = useWatch({
+        name: [SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const handleChain = (event) => {
+        setValue(SwapFormKeyHelper.getChainKey(formType), event.target.value);
+        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 } }));
+};

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -0,0 +1 @@
+export declare const SearchTokenInput: () => JSX.Element;

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Search as SearchIcon } from '@mui/icons-material';
+import { FormControl, InputAdornment } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { CardContainer } from '../../components/Card';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { Input } from './SearchTokenInput.style';
+export const SearchTokenInput = () => {
+    const { t } = useTranslation();
+    const { register, setValue } = useFormContext();
+    useEffect(() => () => {
+        setValue(SwapFormKey.SearchTokensFilter, '');
+    }, [setValue]);
+    return (_jsx(CardContainer, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(SearchIcon, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormKey.SearchTokensFilter)), autoComplete: "off" }) })) }));
+};

package/pages/SelectTokenPage/SearchTokenInput.style.d.ts

@@ -0,0 +1 @@
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/pages/SelectTokenPage/SearchTokenInput.style.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+import { Input as InputBase } from '../../components/Input';
+export const Input = styled(InputBase)(({ theme }) => ({
+    paddingRight: theme.spacing(1.5),
+}));

package/pages/SelectTokenPage/SelectTokenPage.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { SwapFormDirection } from '../../providers/SwapFormProvider';
+export declare const SelectTokenPage: FC<{
+    formType: SwapFormDirection;
+}>;

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { TokenList } from '../../components/TokenList';
+import { useContentHeight, useScrollableOverflowHidden } from '../../hooks';
+import { ChainSelect } from './ChainSelect';
+import { SearchTokenInput } from './SearchTokenInput';
+export const SelectTokenPage = ({ formType, }) => {
+    const navigate = useNavigate();
+    useScrollableOverflowHidden();
+    const contentHeight = useContentHeight();
+    const handleTokenClick = () => {
+        navigate(-1);
+    };
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3 }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: contentHeight - 184, onClick: handleTokenClick, formType: formType })] })));
+};

package/pages/SelectTokenPage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectTokenPage';
+export * from './types';

package/pages/SelectTokenPage/index.js

@@ -0,0 +1,2 @@
+export * from './SelectTokenPage';
+export * from './types';

package/pages/SelectTokenPage/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum TokenFilterType {
+    My = 0,
+    All = 1
+}

package/pages/SelectTokenPage/types.js

@@ -0,0 +1,5 @@
+export var TokenFilterType;
+(function (TokenFilterType) {
+    TokenFilterType[TokenFilterType["My"] = 0] = "My";
+    TokenFilterType[TokenFilterType["All"] = 1] = "All";
+})(TokenFilterType || (TokenFilterType = {}));

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -0,0 +1 @@
+export declare const SelectWalletPage: () => JSX.Element;