@lifi/widget 3.26.0 → 3.26.2-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.js +2 -1
- package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.js.map +1 -1
- package/dist/esm/components/BottomSheet/BottomSheet.js +13 -5
- package/dist/esm/components/BottomSheet/BottomSheet.js.map +1 -1
- package/dist/esm/components/Chains/ChainsExpanded.d.ts +1 -1
- package/dist/esm/components/Chains/ChainsExpanded.js +3 -2
- package/dist/esm/components/Chains/ChainsExpanded.js.map +1 -1
- package/dist/esm/components/Chains/ChainsExpanded.style.js +1 -2
- package/dist/esm/components/Chains/ChainsExpanded.style.js.map +1 -1
- package/dist/esm/components/Chains/SelectChainContent.d.ts +1 -1
- package/dist/esm/components/Chains/SelectChainContent.js +3 -2
- package/dist/esm/components/Chains/SelectChainContent.js.map +1 -1
- package/dist/esm/components/Expansion/Expansion.js +5 -16
- package/dist/esm/components/Expansion/Expansion.js.map +1 -1
- package/dist/esm/components/Expansion/Expansion.style.d.ts +32 -0
- package/dist/esm/components/Expansion/Expansion.style.js +40 -0
- package/dist/esm/components/Expansion/Expansion.style.js.map +1 -0
- package/dist/esm/components/Expansion/ExpansionTransition.d.ts +0 -1
- package/dist/esm/components/Expansion/ExpansionTransition.js +1 -30
- package/dist/esm/components/Expansion/ExpansionTransition.js.map +1 -1
- package/dist/esm/components/Header/CloseDrawerButton.js +2 -5
- package/dist/esm/components/Header/CloseDrawerButton.js.map +1 -1
- package/dist/esm/components/Header/Header.style.d.ts +1 -2
- package/dist/esm/components/Header/Header.style.js +3 -4
- package/dist/esm/components/Header/Header.style.js.map +1 -1
- package/dist/esm/components/Header/NavigationHeader.js +17 -21
- package/dist/esm/components/Header/NavigationHeader.js.map +1 -1
- package/dist/esm/components/Header/SplitNavigationTabs.d.ts +1 -0
- package/dist/esm/components/Header/{NavigationTabs.js → SplitNavigationTabs.js} +4 -5
- package/dist/esm/components/Header/SplitNavigationTabs.js.map +1 -0
- package/dist/esm/components/Header/WalletHeader.d.ts +0 -1
- package/dist/esm/components/Header/WalletHeader.js +10 -14
- package/dist/esm/components/Header/WalletHeader.js.map +1 -1
- package/dist/esm/components/Routes/RoutesContent.d.ts +2 -3
- package/dist/esm/components/Routes/RoutesContent.js +5 -21
- package/dist/esm/components/Routes/RoutesContent.js.map +1 -1
- package/dist/esm/components/Routes/RoutesExpanded.d.ts +2 -3
- package/dist/esm/components/Routes/RoutesExpanded.js +24 -8
- package/dist/esm/components/Routes/RoutesExpanded.js.map +1 -1
- package/dist/esm/components/Routes/RoutesExpanded.style.js +1 -2
- package/dist/esm/components/Routes/RoutesExpanded.style.js.map +1 -1
- package/dist/esm/components/Step/StepProcess.js +8 -3
- package/dist/esm/components/Step/StepProcess.js.map +1 -1
- package/dist/esm/components/Tabs/NavigationTabs.d.ts +4 -0
- package/dist/esm/components/Tabs/NavigationTabs.js +39 -0
- package/dist/esm/components/Tabs/NavigationTabs.js.map +1 -0
- package/dist/esm/components/TokenList/TokenListItem.js +1 -0
- package/dist/esm/components/TokenList/TokenListItem.js.map +1 -1
- package/dist/esm/components/TokenList/useTokenSelect.js +9 -2
- package/dist/esm/components/TokenList/useTokenSelect.js.map +1 -1
- package/dist/esm/config/version.d.ts +1 -1
- package/dist/esm/config/version.js +1 -1
- package/dist/esm/config/version.js.map +1 -1
- package/dist/esm/hooks/useRoutes.js +32 -4
- package/dist/esm/hooks/useRoutes.js.map +1 -1
- package/dist/esm/pages/MainPage/MainPage.js +8 -1
- package/dist/esm/pages/MainPage/MainPage.js.map +1 -1
- package/dist/esm/pages/SettingsPage/RoutePrioritySettings.js +1 -1
- package/dist/esm/pages/SettingsPage/RoutePrioritySettings.js.map +1 -1
- package/dist/esm/themes/azureLight.js +2 -3
- package/dist/esm/themes/azureLight.js.map +1 -1
- package/dist/esm/themes/createTheme.js +6 -0
- package/dist/esm/themes/createTheme.js.map +1 -1
- package/dist/esm/themes/types.d.ts +15 -1
- package/dist/esm/themes/watermelonLight.js +12 -0
- package/dist/esm/themes/watermelonLight.js.map +1 -1
- package/dist/esm/themes/windows95.js +11 -0
- package/dist/esm/themes/windows95.js.map +1 -1
- package/dist/esm/types/widget.d.ts +1 -1
- package/dist/esm/types/widget.js.map +1 -1
- package/package.json +7 -7
- package/package.json.tmp +6 -6
- package/src/components/BaseTransactionButton/BaseTransactionButton.tsx +2 -1
- package/src/components/BottomSheet/BottomSheet.tsx +14 -3
- package/src/components/Chains/ChainsExpanded.style.tsx +1 -2
- package/src/components/Chains/ChainsExpanded.tsx +6 -2
- package/src/components/Chains/SelectChainContent.tsx +81 -82
- package/src/components/Expansion/Expansion.style.tsx +43 -0
- package/src/components/Expansion/Expansion.tsx +8 -23
- package/src/components/Expansion/ExpansionTransition.tsx +5 -33
- package/src/components/Header/CloseDrawerButton.tsx +2 -5
- package/src/components/Header/Header.style.ts +3 -5
- package/src/components/Header/NavigationHeader.tsx +66 -73
- package/src/components/Header/{NavigationTabs.tsx → SplitNavigationTabs.tsx} +10 -14
- package/src/components/Header/WalletHeader.tsx +13 -19
- package/src/components/Routes/RoutesContent.tsx +8 -29
- package/src/components/Routes/RoutesExpanded.style.ts +1 -2
- package/src/components/Routes/RoutesExpanded.tsx +33 -13
- package/src/components/Step/StepProcess.tsx +8 -3
- package/src/components/Tabs/NavigationTabs.tsx +40 -0
- package/src/components/TokenList/TokenListItem.tsx +1 -0
- package/src/components/TokenList/useTokenSelect.ts +14 -2
- package/src/config/version.ts +1 -1
- package/src/hooks/useRoutes.ts +68 -33
- package/src/pages/MainPage/MainPage.tsx +9 -1
- package/src/pages/SettingsPage/RoutePrioritySettings.tsx +0 -1
- package/src/themes/azureLight.ts +2 -3
- package/src/themes/createTheme.ts +6 -0
- package/src/themes/types.ts +20 -0
- package/src/themes/watermelonLight.ts +12 -0
- package/src/themes/windows95.ts +12 -0
- package/src/types/widget.ts +2 -0
- package/dist/esm/components/Header/NavigationTabs.d.ts +0 -1
- package/dist/esm/components/Header/NavigationTabs.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [3.26.1](https://github.com/lifinance/widget/compare/v3.26.0...v3.26.1) (2025-08-06)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* revert container fallbacks ([#501](https://github.com/lifinance/widget/issues/501)) ([147647b](https://github.com/lifinance/widget/commit/147647be64910b920d45e0e000f30fa3eaf6c82e))
|
|
11
|
+
|
|
5
12
|
## [3.26.0](https://github.com/lifinance/widget/compare/v3.25.0...v3.26.0) (2025-08-05)
|
|
6
13
|
|
|
7
14
|
|
|
@@ -13,7 +13,7 @@ export const BaseTransactionButton = ({ onClick, text, disabled, loading, route,
|
|
|
13
13
|
const [fromChainId] = useFieldValues('fromChain');
|
|
14
14
|
const { chain } = useChain(fromChainId);
|
|
15
15
|
const { connected, missingChain } = useRouteRequiredAccountConnection(route, chain);
|
|
16
|
-
const handleClick = async () => {
|
|
16
|
+
const handleClick = async (e) => {
|
|
17
17
|
if (connected) {
|
|
18
18
|
onClick?.();
|
|
19
19
|
return;
|
|
@@ -24,6 +24,7 @@ export const BaseTransactionButton = ({ onClick, text, disabled, loading, route,
|
|
|
24
24
|
}
|
|
25
25
|
else {
|
|
26
26
|
openWalletMenu(connectionOptions);
|
|
27
|
+
e.currentTarget.blur(); // Remove focus to prevent accessibility issues when opening drawer
|
|
27
28
|
}
|
|
28
29
|
};
|
|
29
30
|
const getButtonText = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTransactionButton.js","sourceRoot":"","sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,iCAAiC,EAAE,MAAM,kDAAkD,CAAA;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAGpE,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAA;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,EAAE,CAAA;IAC1C,MAAM,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IACjD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IACvC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,iCAAiC,CACnE,KAAK,EACL,KAAK,CACN,CAAA;IAED,MAAM,WAAW,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"BaseTransactionButton.js","sourceRoot":"","sources":["../../../../src/components/BaseTransactionButton/BaseTransactionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,iCAAiC,EAAE,MAAM,kDAAkD,CAAA;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAGpE,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAA;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,EAAE,CAAA;IAC1C,MAAM,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IACjD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IACvC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,iCAAiC,CACnE,KAAK,EACL,KAAK,CACN,CAAA;IAED,MAAM,WAAW,GAAG,KAAK,EAAE,CAAgC,EAAE,EAAE;QAC7D,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,EAAE,EAAE,CAAA;YACX,OAAM;QACR,CAAC;QACD,MAAM,iBAAiB,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;QAC5E,IAAI,YAAY,EAAE,SAAS,EAAE,CAAC;YAC5B,YAAY,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;QAC3C,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,iBAAiB,CAAC,CAAA;YACjC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA,CAAC,mEAAmE;QAC5F,CAAC;IACH,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,SAAS,EAAE,CAAC;YACd,IAAI,IAAI,EAAE,CAAC;gBACT,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC;QACD,OAAO,YAAY;YACjB,CAAC,CAAC,CAAC,CAAC,2BAA2B,EAAE;gBAC7B,KAAK,EAAE,YAAY,CAAC,IAAI;aACzB,CAAC;YACJ,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,SAAS,IAAI,QAAQ,EAC/B,OAAO,EAAE,OAAO,EAChB,eAAe,EAAC,QAAQ,EACxB,SAAS,kBAER,aAAa,EAAE,GACT,CACV,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,25 +1,33 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Drawer } from '@mui/material';
|
|
3
|
-
import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
|
|
3
|
+
import { forwardRef, startTransition, useCallback, useImperativeHandle, useRef, useState, } from 'react';
|
|
4
4
|
import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js';
|
|
5
5
|
import { modalProps, slotProps } from '../Dialog.js';
|
|
6
6
|
export const BottomSheet = forwardRef(({ elementRef, children, open, onClose }, ref) => {
|
|
7
7
|
const getContainer = useGetScrollableContainer();
|
|
8
8
|
const openRef = useRef(open);
|
|
9
9
|
const [drawerOpen, setDrawerOpen] = useState(open);
|
|
10
|
+
const [isInert, setIsInert] = useState(!open);
|
|
10
11
|
const close = useCallback(() => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
// Set inert first to prevent focus issues
|
|
13
|
+
setIsInert(true);
|
|
14
|
+
// Push the state update to the next event loop tick
|
|
15
|
+
// to ensure the inert is applied to before the drawer is closed
|
|
16
|
+
startTransition(() => {
|
|
17
|
+
setDrawerOpen(false);
|
|
18
|
+
openRef.current = false;
|
|
19
|
+
onClose?.();
|
|
20
|
+
});
|
|
14
21
|
}, [onClose]);
|
|
15
22
|
useImperativeHandle(ref, () => ({
|
|
16
23
|
isOpen: () => openRef.current,
|
|
17
24
|
open: () => {
|
|
25
|
+
setIsInert(false);
|
|
18
26
|
setDrawerOpen(true);
|
|
19
27
|
openRef.current = true;
|
|
20
28
|
},
|
|
21
29
|
close,
|
|
22
30
|
}), [close]);
|
|
23
|
-
return (_jsx(Drawer, { container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, slotProps: slotProps, disableAutoFocus: true, children: children }));
|
|
31
|
+
return (_jsx(Drawer, { container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, slotProps: slotProps, disableAutoFocus: true, keepMounted: true, inert: isInert, children: children }));
|
|
24
32
|
});
|
|
25
33
|
//# sourceMappingURL=BottomSheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EACL,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AACjF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGpD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,YAAY,GAAG,yBAAyB,EAAE,CAAA;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["../../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AACjF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGpD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,YAAY,GAAG,yBAAyB,EAAE,CAAA;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAA;IAE7C,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,0CAA0C;QAC1C,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,oDAAoD;QACpD,gEAAgE;QAChE,eAAe,CAAC,GAAG,EAAE;YACnB,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,OAAO,CAAC,OAAO,GAAG,KAAK,CAAA;YACvB,OAAO,EAAE,EAAE,CAAA;QACb,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO;QAC7B,IAAI,EAAE,GAAG,EAAE;YACT,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACxB,CAAC;QACD,KAAK;KACN,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,UAAU,EACf,MAAM,EAAC,QAAQ,EACf,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,QAChB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,OAAO,YAEb,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CACF,CAAA"}
|
|
@@ -3,5 +3,5 @@ interface ChainsExpandedProps {
|
|
|
3
3
|
formType: FormType;
|
|
4
4
|
open: boolean;
|
|
5
5
|
}
|
|
6
|
-
export declare const ChainsExpanded:
|
|
6
|
+
export declare const ChainsExpanded: import("react").NamedExoticComponent<ChainsExpandedProps>;
|
|
7
7
|
export {};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from 'react';
|
|
2
3
|
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider';
|
|
3
4
|
import { getWidgetMaxHeight } from '../../utils/widgetSize';
|
|
4
5
|
import { ExpansionTransition } from '../Expansion/ExpansionTransition';
|
|
5
6
|
import { chainExpansionWidth, SelectChainExpansionContainer, } from './ChainsExpanded.style';
|
|
6
7
|
import { SelectChainContent } from './SelectChainContent';
|
|
7
|
-
export const ChainsExpanded = ({ formType, open })
|
|
8
|
+
export const ChainsExpanded = memo(function ChainsExpanded({ formType, open, }) {
|
|
8
9
|
const { theme } = useWidgetConfig();
|
|
9
10
|
return (_jsx(ExpansionTransition, { in: open, width: chainExpansionWidth, children: _jsx(SelectChainExpansionContainer, { expansionHeight: getWidgetMaxHeight(theme), children: _jsx(SelectChainContent, { inExpansion: true, formType: formType }) }) }));
|
|
10
|
-
};
|
|
11
|
+
});
|
|
11
12
|
//# sourceMappingURL=ChainsExpanded.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChainsExpanded.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAA;AAE/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EACL,mBAAmB,EACnB,6BAA6B,GAC9B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAOzD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"ChainsExpanded.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAA;AAE/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EACL,mBAAmB,EACnB,6BAA6B,GAC9B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAOzD,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,cAAc,CAAC,EACzD,QAAQ,EACR,IAAI,GACgB;IACpB,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAA;IAEnC,OAAO,CACL,KAAC,mBAAmB,IAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,mBAAmB,YACvD,KAAC,6BAA6B,IAC5B,eAAe,EAAE,kBAAkB,CAAC,KAAK,CAAC,YAE1C,KAAC,kBAAkB,IAAC,WAAW,QAAC,QAAQ,EAAE,QAAQ,GAAI,GACxB,GACZ,CACvB,CAAA;AACH,CAAC,CAAC,CAAA"}
|
|
@@ -3,14 +3,13 @@ export const chainExpansionWidth = '256px';
|
|
|
3
3
|
export const SelectChainExpansionContainer = styled(Box, {
|
|
4
4
|
shouldForwardProp: (prop) => prop !== 'expansionHeight',
|
|
5
5
|
})(({ theme, expansionHeight }) => ({
|
|
6
|
+
...theme.container,
|
|
6
7
|
position: 'relative',
|
|
7
8
|
boxSizing: 'content-box',
|
|
8
9
|
width: chainExpansionWidth,
|
|
9
10
|
background: theme.vars.palette.background.default,
|
|
10
11
|
overflow: 'hidden',
|
|
11
12
|
flex: 1,
|
|
12
|
-
borderRadius: theme.container?.borderRadius ?? 0,
|
|
13
|
-
boxShadow: theme.container?.boxShadow ?? 'none',
|
|
14
13
|
zIndex: 0,
|
|
15
14
|
height: expansionHeight,
|
|
16
15
|
...theme.chainSidebarContainer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChainsExpanded.style.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainsExpanded.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAA;AAM1C,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,EAAE;IACvD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,iBAAiB;CACxD,CAAC,CAAqC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;IACjD,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,
|
|
1
|
+
{"version":3,"file":"ChainsExpanded.style.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainsExpanded.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAA;AAM1C,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,EAAE;IACvD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,iBAAiB;CACxD,CAAC,CAAqC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,GAAG,KAAK,CAAC,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;IACjD,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,eAAe;IACvB,GAAG,KAAK,CAAC,qBAAqB;CAC/B,CAAC,CAAC,CAAA"}
|
|
@@ -5,5 +5,5 @@ interface SelectChainContentProps {
|
|
|
5
5
|
onSelect?: (chain: ExtendedChain) => void;
|
|
6
6
|
inExpansion: boolean;
|
|
7
7
|
}
|
|
8
|
-
export declare const SelectChainContent:
|
|
8
|
+
export declare const SelectChainContent: import("react").NamedExoticComponent<SelectChainContentProps>;
|
|
9
9
|
export {};
|
|
@@ -11,7 +11,7 @@ import { FullPageContainer } from '../FullPageContainer';
|
|
|
11
11
|
import { ChainList } from './ChainList';
|
|
12
12
|
import { ChainSearchInput } from './ChainSearchInput';
|
|
13
13
|
const searchHeaderHeight = '80px';
|
|
14
|
-
export const SelectChainContent = memo(({ formType, onSelect, inExpansion })
|
|
14
|
+
export const SelectChainContent = memo(function SelectChainContent({ formType, onSelect, inExpansion, }) {
|
|
15
15
|
const theme = useTheme();
|
|
16
16
|
const { chains, isLoading, setCurrentChain } = useChainSelect(formType);
|
|
17
17
|
const elementId = useDefaultElementId();
|
|
@@ -23,7 +23,8 @@ export const SelectChainContent = memo(({ formType, onSelect, inExpansion }) =>
|
|
|
23
23
|
const filteredChains = useMemo(() => {
|
|
24
24
|
const value = debouncedSearchValue.toLowerCase();
|
|
25
25
|
return value
|
|
26
|
-
? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
|
|
26
|
+
? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
|
|
27
|
+
[])
|
|
27
28
|
: (chains ?? []);
|
|
28
29
|
}, [chains, debouncedSearchValue]);
|
|
29
30
|
const scrollToTop = useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectChainContent.js","sourceRoot":"","sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAiB,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAQrD,MAAM,kBAAkB,GAAG,MAAM,CAAA;AAEjC,MAAM,CAAC,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"SelectChainContent.js","sourceRoot":"","sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,40 +1,29 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import { useMemo, useRef, useState } from 'react';
|
|
4
3
|
import { useHasChainExpansion } from '../../hooks/useHasChainExpansion';
|
|
5
4
|
import { ExpansionType } from '../../types/widget';
|
|
6
5
|
import { ChainsExpanded } from '../Chains/ChainsExpanded';
|
|
7
6
|
import { chainExpansionWidth } from '../Chains/ChainsExpanded.style';
|
|
8
7
|
import { RoutesExpanded } from '../Routes/RoutesExpanded';
|
|
9
8
|
import { routesExpansionWidth } from '../Routes/RoutesExpanded.style';
|
|
10
|
-
import {
|
|
9
|
+
import { ExpansionContainer } from './Expansion.style';
|
|
11
10
|
export function Expansion() {
|
|
12
11
|
const [withChainExpansion, expansionType] = useHasChainExpansion();
|
|
13
12
|
const chainExpansionTypeRef = useRef(expansionType);
|
|
14
13
|
const [routesOpen, setRoutesOpen] = useState(false);
|
|
15
|
-
const handleSetRoutesOpen = useCallback((open) => {
|
|
16
|
-
setRoutesOpen(open);
|
|
17
|
-
}, []);
|
|
18
14
|
// Track the previous chain expansion type to avoid re-renders when transitioning to Routes
|
|
19
15
|
if (expansionType === ExpansionType.FromChain ||
|
|
20
16
|
expansionType === ExpansionType.ToChain) {
|
|
21
17
|
chainExpansionTypeRef.current = expansionType;
|
|
22
18
|
}
|
|
23
|
-
const
|
|
19
|
+
const containerWidth = useMemo(() => {
|
|
24
20
|
return routesOpen
|
|
25
21
|
? routesExpansionWidth
|
|
26
22
|
: withChainExpansion
|
|
27
23
|
? chainExpansionWidth
|
|
28
|
-
:
|
|
24
|
+
: 0;
|
|
29
25
|
}, [routesOpen, withChainExpansion]);
|
|
30
|
-
return (_jsxs(
|
|
31
|
-
position: 'relative',
|
|
32
|
-
display: 'flex',
|
|
33
|
-
transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
|
|
34
|
-
width: boxWidth,
|
|
35
|
-
willChange: 'width',
|
|
36
|
-
marginLeft: boxWidth !== '0px' ? '24px' : '0px',
|
|
37
|
-
}, children: [_jsx(RoutesExpanded, { expansionType: expansionType, setOpenExpansion: handleSetRoutesOpen }), _jsx(ChainsExpanded, { formType: chainExpansionTypeRef.current === ExpansionType.FromChain
|
|
26
|
+
return (_jsxs(ExpansionContainer, { width: containerWidth, children: [_jsx(RoutesExpanded, { canOpen: expansionType === ExpansionType.Routes, setOpenExpansion: setRoutesOpen }), _jsx(ChainsExpanded, { formType: chainExpansionTypeRef.current === ExpansionType.FromChain
|
|
38
27
|
? 'from'
|
|
39
28
|
: 'to', open: withChainExpansion })] }));
|
|
40
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Expansion.js","sourceRoot":"","sources":["../../../../src/components/Expansion/Expansion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Expansion.js","sourceRoot":"","sources":["../../../../src/components/Expansion/Expansion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAEtD,MAAM,UAAU,SAAS;IACvB,MAAM,CAAC,kBAAkB,EAAE,aAAa,CAAC,GAAG,oBAAoB,EAAE,CAAA;IAClE,MAAM,qBAAqB,GAAG,MAAM,CAAgB,aAAa,CAAC,CAAA;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnD,2FAA2F;IAC3F,IACE,aAAa,KAAK,aAAa,CAAC,SAAS;QACzC,aAAa,KAAK,aAAa,CAAC,OAAO,EACvC,CAAC;QACD,qBAAqB,CAAC,OAAO,GAAG,aAAa,CAAA;IAC/C,CAAC;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,UAAU;YACf,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,kBAAkB;gBAClB,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,CAAC,CAAA;IACT,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAEpC,OAAO,CACL,MAAC,kBAAkB,IAAC,KAAK,EAAE,cAAc,aACvC,KAAC,cAAc,IACb,OAAO,EAAE,aAAa,KAAK,aAAa,CAAC,MAAM,EAC/C,gBAAgB,EAAE,aAAa,GAC/B,EACF,KAAC,cAAc,IACb,QAAQ,EACN,qBAAqB,CAAC,OAAO,KAAK,aAAa,CAAC,SAAS;oBACvD,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,IAAI,EAEV,IAAI,EAAE,kBAAkB,GACxB,IACiB,CACtB,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export declare const animationDuration = 225;
|
|
2
|
+
export declare const defaultStyle: {
|
|
3
|
+
opacity: number;
|
|
4
|
+
whiteSpace: string;
|
|
5
|
+
transform: string;
|
|
6
|
+
display: string;
|
|
7
|
+
position: "absolute";
|
|
8
|
+
top: number;
|
|
9
|
+
left: number;
|
|
10
|
+
transition: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const transitionStyles: {
|
|
13
|
+
entering: {
|
|
14
|
+
opacity: number;
|
|
15
|
+
transform: string;
|
|
16
|
+
};
|
|
17
|
+
entered: {
|
|
18
|
+
opacity: number;
|
|
19
|
+
transform: string;
|
|
20
|
+
};
|
|
21
|
+
exiting: {
|
|
22
|
+
opacity: number;
|
|
23
|
+
transform: string;
|
|
24
|
+
};
|
|
25
|
+
exited: {
|
|
26
|
+
opacity: number;
|
|
27
|
+
transform: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
export declare const ExpansionContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
31
|
+
width: string | number;
|
|
32
|
+
}, {}, {}>;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Box, styled } from '@mui/material';
|
|
2
|
+
export const animationDuration = 225;
|
|
3
|
+
export const defaultStyle = {
|
|
4
|
+
opacity: 0,
|
|
5
|
+
whiteSpace: 'nowrap',
|
|
6
|
+
transform: 'translateX(-100%)',
|
|
7
|
+
display: 'inline-block',
|
|
8
|
+
position: 'absolute',
|
|
9
|
+
top: 0,
|
|
10
|
+
left: 0,
|
|
11
|
+
transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
|
|
12
|
+
};
|
|
13
|
+
export const transitionStyles = {
|
|
14
|
+
entering: {
|
|
15
|
+
opacity: 1,
|
|
16
|
+
transform: 'translateX(0)',
|
|
17
|
+
},
|
|
18
|
+
entered: {
|
|
19
|
+
opacity: 1,
|
|
20
|
+
transform: 'translateX(0)',
|
|
21
|
+
},
|
|
22
|
+
exiting: {
|
|
23
|
+
opacity: 0,
|
|
24
|
+
transform: 'translateX(-100%)',
|
|
25
|
+
},
|
|
26
|
+
exited: {
|
|
27
|
+
opacity: 0,
|
|
28
|
+
transform: 'translateX(-100%)',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
export const ExpansionContainer = styled(Box, {
|
|
32
|
+
shouldForwardProp: (prop) => prop !== 'width',
|
|
33
|
+
})(({ width }) => ({
|
|
34
|
+
position: 'relative',
|
|
35
|
+
display: 'flex',
|
|
36
|
+
transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
|
|
37
|
+
width: width,
|
|
38
|
+
marginLeft: width ? '24px' : 0,
|
|
39
|
+
}));
|
|
40
|
+
//# sourceMappingURL=Expansion.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expansion.style.js","sourceRoot":"","sources":["../../../../src/components/Expansion/Expansion.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,mBAAmB;IAC9B,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,UAAmB;IAC7B,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,WAAW,iBAAiB,8CAA8C,iBAAiB,iCAAiC;CACzI,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE;QACR,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,eAAe;KAC3B;IACD,OAAO,EAAE;QACP,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,eAAe;KAC3B;IACD,OAAO,EAAE;QACP,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,mBAAmB;KAC/B;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,mBAAmB;KAC/B;CACF,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;CAC9C,CAAC,CAA6B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,SAAS,iBAAiB,iCAAiC;IACvE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CAC/B,CAAC,CAAC,CAAA"}
|
|
@@ -2,36 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Box } from '@mui/material';
|
|
3
3
|
import { useRef } from 'react';
|
|
4
4
|
import { Transition } from 'react-transition-group';
|
|
5
|
-
|
|
6
|
-
const defaultStyle = {
|
|
7
|
-
opacity: 0,
|
|
8
|
-
whiteSpace: 'nowrap',
|
|
9
|
-
transform: 'translateX(-100%)',
|
|
10
|
-
display: 'inline-block',
|
|
11
|
-
position: 'absolute',
|
|
12
|
-
top: 0,
|
|
13
|
-
left: 0,
|
|
14
|
-
willChange: 'opacity, transform',
|
|
15
|
-
transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
|
|
16
|
-
};
|
|
17
|
-
const transitionStyles = {
|
|
18
|
-
entering: {
|
|
19
|
-
opacity: 1,
|
|
20
|
-
transform: 'translateX(0)',
|
|
21
|
-
},
|
|
22
|
-
entered: {
|
|
23
|
-
opacity: 1,
|
|
24
|
-
transform: 'translateX(0)',
|
|
25
|
-
},
|
|
26
|
-
exiting: {
|
|
27
|
-
opacity: 0,
|
|
28
|
-
transform: 'translateX(-100%)',
|
|
29
|
-
},
|
|
30
|
-
exited: {
|
|
31
|
-
opacity: 0,
|
|
32
|
-
transform: 'translateX(-100%)',
|
|
33
|
-
},
|
|
34
|
-
};
|
|
5
|
+
import { animationDuration, defaultStyle, transitionStyles, } from './Expansion.style';
|
|
35
6
|
export function ExpansionTransition({ in: inProp, children, width, onExited, }) {
|
|
36
7
|
const nodeRef = useRef(null);
|
|
37
8
|
return (_jsx(Transition, { nodeRef: nodeRef, in: inProp, timeout: animationDuration, onExited: onExited, mountOnEnter: true, unmountOnExit: true, children: (state) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionTransition.js","sourceRoot":"","sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"ExpansionTransition.js","sourceRoot":"","sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,mBAAmB,CAAA;AAQ1B,MAAM,UAAU,mBAAmB,CAAC,EAClC,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,KAAK,EACL,QAAQ,GACoC;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,QAAQ,EAClB,YAAY,QACZ,aAAa,kBAEZ,CAAC,KAAK,EAAE,EAAE;YACT,OAAO,CACL,KAAC,GAAG,IACF,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE;oBACL,GAAG,YAAY;oBACf,GAAG,gBAAgB,CAAC,KAAsC,CAAC;oBAC3D,KAAK;iBACN,YAEA,QAAQ,GACL,CACP,CAAA;QACH,CAAC,GACU,CACd,CAAA;AACH,CAAC"}
|
|
@@ -4,15 +4,12 @@ import { IconButton, Tooltip } from '@mui/material';
|
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
5
5
|
import { useDrawer } from '../../AppDrawerContext.js';
|
|
6
6
|
import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js';
|
|
7
|
-
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
|
|
8
7
|
export const CloseDrawerButton = ({ header }) => {
|
|
9
8
|
const { t } = useTranslation();
|
|
10
|
-
const { subvariant } = useWidgetConfig();
|
|
11
9
|
const { closeDrawer } = useDrawer();
|
|
12
10
|
const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
|
|
13
|
-
const showInNavigationHeader = header === 'navigation' &&
|
|
14
|
-
|
|
15
|
-
const showInWalletHeader = header === 'wallet' && subvariant !== 'split';
|
|
11
|
+
const showInNavigationHeader = header === 'navigation' && useExternalWalletProvidersOnly;
|
|
12
|
+
const showInWalletHeader = header === 'wallet';
|
|
16
13
|
return showInNavigationHeader || showInWalletHeader ? (_jsx(Tooltip, { title: t('button.close'), children: _jsx(IconButton, { size: "medium", onClick: closeDrawer, children: _jsx(CloseRounded, {}) }) })) : null;
|
|
17
14
|
};
|
|
18
15
|
//# sourceMappingURL=CloseDrawerButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CloseDrawerButton.js","sourceRoot":"","sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6DAA6D,CAAA;
|
|
1
|
+
{"version":3,"file":"CloseDrawerButton.js","sourceRoot":"","sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6DAA6D,CAAA;AAMvG,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAA0B,EAAE,EAAE;IACtE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAA;IACnC,MAAM,EAAE,8BAA8B,EAAE,GAAG,yBAAyB,EAAE,CAAA;IAEtE,MAAM,sBAAsB,GAC1B,MAAM,KAAK,YAAY,IAAI,8BAA8B,CAAA;IAE3D,MAAM,kBAAkB,GAAG,MAAM,KAAK,QAAQ,CAAA;IAE9C,OAAO,sBAAsB,IAAI,kBAAkB,CAAC,CAAC,CAAC,CACpD,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,YAC/B,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,YAC5C,KAAC,YAAY,KAAG,GACL,GACL,CACX,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import type { WidgetSubvariant } from '../../types/widget.js';
|
|
2
1
|
export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<import("@mui/material").AppBarOwnProps & Omit<import("@mui/material").PaperOwnProps, "color" | "position" | "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color" | "position" | "children" | "sx" | "style" | "className" | "classes" | "variant" | "elevation" | "square" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
3
2
|
export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
4
3
|
sticky?: boolean;
|
|
5
4
|
}, {}, {}>;
|
|
6
5
|
export declare const WalletButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "classes" | "variant" | "href" | "size" | "action" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
7
|
-
|
|
6
|
+
withOffset?: boolean;
|
|
8
7
|
}, {}, {}>;
|
|
9
8
|
export declare const DrawerWalletContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
10
9
|
export declare const HeaderControlsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -35,8 +35,8 @@ export const Container = styled(Box, {
|
|
|
35
35
|
};
|
|
36
36
|
});
|
|
37
37
|
export const WalletButton = styled(Button, {
|
|
38
|
-
shouldForwardProp: (prop) => prop !== '
|
|
39
|
-
})(({
|
|
38
|
+
shouldForwardProp: (prop) => prop !== 'withOffset',
|
|
39
|
+
})(({ withOffset, theme }) => ({
|
|
40
40
|
color: theme.vars.palette.text.primary,
|
|
41
41
|
padding: theme.spacing(1, 1.5),
|
|
42
42
|
maxHeight: 40,
|
|
@@ -60,8 +60,7 @@ export const WalletButton = styled(Button, {
|
|
|
60
60
|
fontSize: '24px',
|
|
61
61
|
},
|
|
62
62
|
...(theme.navigation.edge && {
|
|
63
|
-
marginRight:
|
|
64
|
-
marginLeft: subvariant === 'split' ? theme.spacing(-1) : 0,
|
|
63
|
+
marginRight: withOffset ? theme.spacing(-1.25) : 0,
|
|
65
64
|
}),
|
|
66
65
|
}));
|
|
67
66
|
export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.style.js","sourceRoot":"","sources":["../../../../src/components/Header/Header.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,MAAM,EACN,GAAG,EACH,MAAM,EACN,aAAa,EACb,MAAM,GACP,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Header.style.js","sourceRoot":"","sources":["../../../../src/components/Header/Header.style.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useAccount } from '@lifi/wallet-management';
|
|
3
3
|
import { Box, Typography } from '@mui/material';
|
|
4
4
|
import { Route, Routes, useLocation } from 'react-router-dom';
|
|
@@ -10,12 +10,11 @@ import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../
|
|
|
10
10
|
import { BackButton } from './BackButton.js';
|
|
11
11
|
import { CloseDrawerButton } from './CloseDrawerButton.js';
|
|
12
12
|
import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js';
|
|
13
|
-
import { NavigationTabs } from './NavigationTabs.js';
|
|
14
13
|
import { SettingsButton } from './SettingsButton.js';
|
|
14
|
+
import { SplitNavigationTabs } from './SplitNavigationTabs.js';
|
|
15
15
|
import { TransactionHistoryButton } from './TransactionHistoryButton.js';
|
|
16
|
-
import { SplitWalletMenuButton } from './WalletHeader.js';
|
|
17
16
|
export const NavigationHeader = () => {
|
|
18
|
-
const { subvariant, hiddenUI, variant, defaultUI } = useWidgetConfig();
|
|
17
|
+
const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } = useWidgetConfig();
|
|
19
18
|
const { navigateBack } = useNavigateBack();
|
|
20
19
|
const { account } = useAccount();
|
|
21
20
|
const { element, title } = useHeaderStore((state) => state);
|
|
@@ -25,22 +24,19 @@ export const NavigationHeader = () => {
|
|
|
25
24
|
: pathname;
|
|
26
25
|
const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
|
|
27
26
|
const hasPath = navigationRoutesValues.includes(path);
|
|
28
|
-
const
|
|
29
|
-
return (_jsxs(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
width: 28,
|
|
43
|
-
height: 40,
|
|
44
|
-
} })) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
|
|
27
|
+
const showSplitOptions = subvariant === 'split' && !hasPath && !subvariantOptions?.split;
|
|
28
|
+
return (_jsxs(HeaderAppBar, { elevation: 0, sx: { paddingTop: 1, paddingBottom: 0.5 }, children: [backButtonRoutes.includes(path) ? (_jsx(BackButton, { onClick: () => navigateBack(
|
|
29
|
+
// From transaction details page, navigate to home page
|
|
30
|
+
path === navigationRoutes.transactionDetails
|
|
31
|
+
? navigationRoutes.home
|
|
32
|
+
: undefined) })) : null, showSplitOptions ? (_jsx(Box, { sx: { flex: 1, marginRight: 1 }, children: _jsx(SplitNavigationTabs, {}) })) : (_jsx(Typography, { align: hasPath ? 'center' : 'left', noWrap: defaultUI?.navigationHeaderTitleNoWrap ?? true, sx: {
|
|
33
|
+
fontSize: hasPath ? 18 : 24,
|
|
34
|
+
fontWeight: '700',
|
|
35
|
+
flex: 1,
|
|
36
|
+
}, children: title })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(HeaderControlsContainer, { children: [account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (_jsx(TransactionHistoryButton, {})), _jsx(SettingsButton, {}), variant === 'drawer' &&
|
|
37
|
+
!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (_jsx(CloseDrawerButton, { header: "navigation" })) : null] }) }), _jsx(Route, { path: "*", element: element || (_jsx(Box, { sx: {
|
|
38
|
+
width: 28,
|
|
39
|
+
height: 40,
|
|
40
|
+
} })) })] })] }));
|
|
45
41
|
};
|
|
46
42
|
//# sourceMappingURL=NavigationHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationHeader.js","sourceRoot":"","sources":["../../../../src/components/Header/NavigationHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"NavigationHeader.js","sourceRoot":"","sources":["../../../../src/components/Header/NavigationHeader.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SplitNavigationTabs: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useTranslation } from 'react-i18next';
|
|
3
3
|
import { useFieldActions } from '../../stores/form/useFieldActions.js';
|
|
4
4
|
import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
export const NavigationTabs = () => {
|
|
5
|
+
import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js';
|
|
6
|
+
export const SplitNavigationTabs = () => {
|
|
8
7
|
const { t } = useTranslation();
|
|
9
8
|
const [state, setState] = useSplitSubvariantStore((state) => [
|
|
10
9
|
state.state,
|
|
@@ -17,6 +16,6 @@ export const NavigationTabs = () => {
|
|
|
17
16
|
setFieldValue('toToken', '');
|
|
18
17
|
setState(value === 0 ? 'swap' : 'bridge');
|
|
19
18
|
};
|
|
20
|
-
return (
|
|
19
|
+
return (_jsxs(NavigationTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", children: [_jsx(NavigationTab, { label: t('header.swap'), disableRipple: true }), _jsx(NavigationTab, { label: t('header.bridge'), disableRipple: true })] }));
|
|
21
20
|
};
|
|
22
|
-
//# sourceMappingURL=
|
|
21
|
+
//# sourceMappingURL=SplitNavigationTabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SplitNavigationTabs.js","sourceRoot":"","sources":["../../../../src/components/Header/SplitNavigationTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAA;AAC1F,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAEzE,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,uBAAuB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QAC3D,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,QAAQ;KACf,CAAC,CAAA;IAEF,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAuB,EAAE,KAAa,EAAE,EAAE;QAC9D,aAAa,CAAC,YAAY,EAAE,EAAE,CAAC,CAAA;QAC/B,aAAa,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QAC9B,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QAC5B,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,OAAO,CACL,MAAC,cAAc,IACb,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,QAAQ,EAAE,YAAY,gBACX,MAAM,aAEjB,KAAC,aAAa,IAAC,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,aAAa,SAAG,EACxD,KAAC,aAAa,IAAC,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,aAAa,SAAG,IAC3C,CAClB,CAAA;AACH,CAAC,CAAA"}
|