From ae1695d71e91f0ff36a7f017425e9ce4dcb5d674 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 19 Jul 2024 20:44:03 +0200 Subject: [PATCH 01/60] chore: spike out some changes around changing height and present the widget in a mobile context --- .../components/Widget/WidgetView.style.tsx | 25 ++-- .../components/Widget/WidgetViewContainer.tsx | 6 +- .../src/defaultWidgetConfig.ts | 6 +- .../widget/src/components/AppContainer.tsx | 12 +- .../widget/src/pages/MainPage/MainPage.tsx | 57 +++++---- .../src/pages/SendToWallet/BookmarksPage.tsx | 10 +- .../SendToWallet/SendToWalletPage.style.tsx | 17 ++- .../pages/SendToWallet/SendToWalletPage.tsx | 71 ++++++----- .../TransactionDetailsPage.tsx | 111 ++++++++++-------- .../pages/TransactionPage/TransactionPage.tsx | 39 ++++-- .../providers/ThemeProvider/ThemeProvider.tsx | 2 +- packages/widget/src/types/widget.ts | 3 + yarn.lock | 58 +++++++-- 13 files changed, 273 insertions(+), 144 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 5a29d7e54..f041289d1 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -1,4 +1,4 @@ -import type { Theme } from '@mui/material'; +import type { BoxProps, Theme } from '@mui/material'; import { Box, Button, @@ -17,13 +17,22 @@ export const FloatingToolsContainer = styled(Box)(({ theme }) => ({ padding: theme.spacing(3), })); -export const WidgetContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - flexGrow: 1, - alignItems: 'center', - justifyContent: 'center', - paddingTop: theme.spacing(6), -})); +interface WidgetContainerProps extends BoxProps { + mobileView: boolean; +} + +export const WidgetContainer = styled(Box)(({ + theme, + mobileView, +}) => { + return { + display: 'flex', + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + paddingTop: mobileView ? 0 : theme.spacing(6), + }; +}); const floatingToolButtonColors = (theme: Theme) => ({ color: theme.palette.text.primary, diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index b3ca1cedb..b94c5d4dd 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -48,7 +48,11 @@ export function WidgetViewContainer({ ) : null} - {children} + + {children} + ); diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 00f93189b..006ca204c 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,6 +206,7 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', + mobileLayout: true, theme: { palette: { primary: { @@ -219,8 +220,11 @@ export const defaultWidgetConfig: Partial = { fontFamily: 'Inter, sans-serif', }, container: { + // paddingTop: 80, + // boxSizing: 'border-box', + height: '100vh', boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)', - borderRadius: '16px', + // borderRadius: '16px', }, }, } as WidgetConfig; diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index e35216af5..178601c5d 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -8,12 +8,12 @@ export const maxHeight = 682; export const AppExpandedContainer = styled(Box, { shouldForwardProp: (prop) => prop !== 'variant', -})<{ variant?: WidgetVariant }>(({ variant }) => ({ +})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({ display: 'flex', justifyContent: 'center', alignItems: 'start', flex: 1, - height: variant === 'drawer' ? 'none' : maxHeight, + height: variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, })); export const RelativeContainer = styled(Box, { @@ -24,7 +24,8 @@ export const RelativeContainer = styled(Box, { width: '100%', minWidth: theme.breakpoints.values.xs, maxWidth: theme.breakpoints.values.sm, - maxHeight: variant === 'drawer' ? 'none' : maxHeight, + maxHeight: + variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, background: theme.palette.background.default, overflow: 'auto', flex: 1, @@ -34,14 +35,15 @@ export const RelativeContainer = styled(Box, { const CssBaselineContainer = styled(ScopedCssBaseline, { shouldForwardProp: (prop) => prop !== 'variant', -})<{ variant?: WidgetVariant }>(({ variant }) => ({ +})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({ display: 'flex', flex: 1, flexDirection: 'column', overflowX: 'clip', margin: 0, width: '100%', - maxHeight: variant === 'drawer' ? 'none' : maxHeight, + maxHeight: + variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, overflowY: 'auto', height: '100%', })); diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index 06833224d..a6c4568f2 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -20,7 +20,8 @@ import { ReviewButton } from './ReviewButton.js'; export const MainPage: React.FC = () => { const { t } = useTranslation(); const wideVariant = useWideVariant(); - const { subvariant, contractComponent, hiddenUI } = useWidgetConfig(); + const { subvariant, contractComponent, hiddenUI, mobileLayout } = + useWidgetConfig(); const custom = subvariant === 'custom'; const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy); @@ -33,26 +34,42 @@ export const MainPage: React.FC = () => { useHeader(title); return ( - - - {custom ? ( - - {contractComponent} - - ) : null} - - {!custom ? ( - - ) : null} - {!wideVariant ? : null} - - - - - - + + + + {custom ? ( + + {contractComponent} + + ) : null} + + {!custom ? ( + + ) : null} + {!wideVariant ? : null} + + + + + + + + + + {showPoweredBy ? : null} - {showPoweredBy ? : null} ); }; diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index 6cd675b76..77829d819 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -9,6 +9,8 @@ import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material'; import { useId, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; + import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'; import type { BottomSheetBase } from '../../components/BottomSheet/types.js'; import { ListItemButton } from '../../components/ListItem//ListItemButton.js'; @@ -35,6 +37,7 @@ import { export const BookmarksPage = () => { const { t } = useTranslation(); + const { mobileLayout } = useWidgetConfig(); const [bookmark, setBookmark] = useState(); const bookmarkAddressSheetRef = useRef(null); const { bookmarks } = useBookmarks(); @@ -102,7 +105,10 @@ export const BookmarksPage = () => { }; return ( - + {bookmarks.map((bookmark) => ( @@ -179,7 +185,7 @@ export const BookmarksPage = () => { - + diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx index 035103939..9b49587ef 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx @@ -1,6 +1,7 @@ import { Alert, Box, + type BoxProps, IconButton, List, Typography, @@ -92,21 +93,27 @@ export const SheetAddressContainer = styled(Box)(() => ({ export const ListContainer = styled(List)(({ theme }) => ({ display: 'flex', flexDirection: 'column', - minHeight: 400, paddingTop: 0, paddingBottom: theme.spacing(1.5), + minHeight: 400, })); -export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({ +interface BookmarkButtonContainerProps extends BoxProps { + mobileLayout?: boolean; +} + +export const BookmarkButtonContainer = styled( + Box, +)(({ theme, mobileLayout }) => ({ background: theme.palette.background.default, display: 'flex', flexDirection: 'column', - flexGrow: 1, - position: 'sticky', bottom: 0, padding: theme.spacing(0, 3, 3), - marginBottom: theme.spacing(-5.25), zIndex: 2, + ...(mobileLayout + ? { position: 'absolute', width: '100%' } + : { flexGrow: 1, position: 'sticky', marginBottom: theme.spacing(-5.25) }), })); export const EmptyContainer = styled(Box)(({ theme }) => ({ diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index f00bf3b23..3886a159d 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -1,5 +1,5 @@ import { Error, History, TurnedIn, Wallet } from '@mui/icons-material'; -import { Tooltip, Typography } from '@mui/material'; +import { Box, Tooltip, Typography } from '@mui/material'; import type { ChangeEvent } from 'react'; import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -15,6 +15,7 @@ import { import { useChain } from '../../hooks/useChain.js'; import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; @@ -35,6 +36,7 @@ import { export const SendToWalletPage = () => { const { t } = useTranslation(); const navigate = useNavigate(); + const { mobileLayout } = useWidgetConfig(); const bookmarkAddressSheetRef = useRef(null); const confirmAddressSheetRef = useRef(null); const { bookmarks, recentWallets } = useBookmarks(); @@ -181,7 +183,10 @@ export const SendToWalletPage = () => { }); return ( - + { onAddBookmark={handleAddBookmark} /> - } - onClick={handleRecentWalletsClick} - > - {!!recentWallets.length && ( - {recentWallets.length} - )} - - } - onClick={handleConnectedWalletsClick} - > - {!!connectedWallets.length && ( - - {connectedWallets.length} - - )} - - } - onClick={handleBookmarkedWalletsClick} - > - {!!bookmarks.length && ( - {bookmarks.length} - )} - + + } + onClick={handleRecentWalletsClick} + > + {!!recentWallets.length && ( + + {recentWallets.length} + + )} + + } + onClick={handleConnectedWalletsClick} + > + {!!connectedWallets.length && ( + + {connectedWallets.length} + + )} + + } + onClick={handleBookmarkedWalletsClick} + > + {!!bookmarks.length && ( + {bookmarks.length} + )} + + ); }; diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 710569cf9..9a8118aad 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -25,7 +25,8 @@ import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); const { navigate } = useNavigateBack(); - const { subvariant, contractSecondaryComponent } = useWidgetConfig(); + const { subvariant, contractSecondaryComponent, mobileLayout } = + useWidgetConfig(); const { state }: any = useLocation(); const { tools } = useTools(); const storedRouteExecution = useRouteExecutionStore( @@ -84,64 +85,70 @@ export const TransactionDetailsPage: React.FC = () => { return isLoading && !storedRouteExecution ? ( ) : ( - - - - {startedAt.toLocaleString(i18n.language, { - dateStyle: 'long', - })} - - - {startedAt.toLocaleString(i18n.language, { - timeStyle: 'short', - })} - - - {getStepList(routeExecution?.route, subvariant)} - {subvariant === 'custom' && contractSecondaryComponent ? ( - - {contractSecondaryComponent} - - ) : null} - {routeExecution?.route ? ( - - ) : null} - + + - {t('main.supportId')} - - - - + + {startedAt.toLocaleString(i18n.language, { + dateStyle: 'long', + })} + + + {startedAt.toLocaleString(i18n.language, { + timeStyle: 'short', + })} + + + {getStepList(routeExecution?.route, subvariant)} + {subvariant === 'custom' && contractSecondaryComponent ? ( + + {contractSecondaryComponent} + + ) : null} + {routeExecution?.route ? ( + + ) : null} + + + + + {t('main.supportId')} + + + + + + + {supportId} + + + + - - {supportId} - - - - ); diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx index 81a6eb947..5e6a49fea 100644 --- a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx +++ b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx @@ -34,7 +34,8 @@ export const TransactionPage: React.FC = () => { const { setFieldValue } = useFieldActions(); const emitter = useWidgetEvents(); const { navigateBack } = useNavigateBack(); - const { subvariant, contractSecondaryComponent } = useWidgetConfig(); + const { subvariant, contractSecondaryComponent, mobileLayout } = + useWidgetConfig(); const { state }: any = useLocation(); const stateRouteId = state?.routeId; const [routeId, setRouteId] = useState(stateRouteId); @@ -158,17 +159,33 @@ export const TransactionPage: React.FC = () => { }; return ( - - {getStepList(route, subvariant)} - {subvariant === 'custom' && contractSecondaryComponent ? ( - - {contractSecondaryComponent} - - ) : null} - + + + {getStepList(route, subvariant)} + {subvariant === 'custom' && contractSecondaryComponent ? ( + + {contractSecondaryComponent} + + ) : null} + + {status === RouteExecutionStatus.Idle || status === RouteExecutionStatus.Failed ? ( - <> + { ) : null} - + ) : null} {status ? : null} {tokenValueLossThresholdExceeded && subvariant !== 'custom' ? ( diff --git a/packages/widget/src/providers/ThemeProvider/ThemeProvider.tsx b/packages/widget/src/providers/ThemeProvider/ThemeProvider.tsx index 14832676d..9fd7df877 100644 --- a/packages/widget/src/providers/ThemeProvider/ThemeProvider.tsx +++ b/packages/widget/src/providers/ThemeProvider/ThemeProvider.tsx @@ -15,7 +15,7 @@ export const ThemeProvider: React.FC> = ({ const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); const [appearance, setAppearance] = useAppearance(); const [mode, setMode] = useState( - colorSchemeMode ?? appearance === 'auto' + (colorSchemeMode ?? appearance === 'auto') ? prefersDarkMode ? 'dark' : 'light' diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 6452673b0..bfd381249 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -54,6 +54,7 @@ export type WidgetThemeComponents = Pick< | 'MuiTabs' >; export type WidgetTheme = { + widgetHeight?: number; palette?: Pick< PaletteOptions, 'background' | 'grey' | 'primary' | 'secondary' | 'text' @@ -127,6 +128,8 @@ export interface AllowDeny { } export interface WidgetConfig { + mobileLayout?: boolean; + fromChain?: number; toChain?: number; fromToken?: string; diff --git a/yarn.lock b/yarn.lock index cb470bec1..eaef92b36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1579,7 +1579,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.24.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.24.8 resolution: "@babel/runtime@npm:7.24.8" dependencies: @@ -2465,19 +2465,19 @@ __metadata: linkType: hard "@lifi/sdk@npm:^3.0.2-beta.0": - version: 3.0.2-beta.0 - resolution: "@lifi/sdk@npm:3.0.2-beta.0" + version: 3.1.0 + resolution: "@lifi/sdk@npm:3.1.0" dependencies: "@lifi/types": "npm:^13.18.2" "@solana/wallet-adapter-base": "npm:^0.9.23" - "@solana/web3.js": "npm:^1.95.0" + "@solana/web3.js": "npm:^1.95.1" eth-rpc-errors: "npm:^4.0.3" - viem: "npm:^2.17.4" + viem: "npm:^2.17.5" peerDependencies: "@solana/wallet-adapter-base": ^0.9.0 "@solana/web3.js": ^1.93.0 viem: ^2.16.0 - checksum: 10/523a60ab04249b4a382e9752cb9c6de96eda7963a610d502db9bdf4b6214c9a3d5ccdab4b28cc27fbbe8dc5679e9c9bbf6b55dd050355ff6e2707d4cb2991a31 + checksum: 10/e141c21a9fe52c071208a4e77935ae49cdbaf16d85b14b2270123ef0b09f90a32465943fea75d71f4519377a59e81fc72419a0d1b429983d232b65e81dcfa98b languageName: node linkType: hard @@ -4581,6 +4581,29 @@ __metadata: languageName: node linkType: hard +"@solana/web3.js@npm:^1.95.1": + version: 1.95.1 + resolution: "@solana/web3.js@npm:1.95.1" + dependencies: + "@babel/runtime": "npm:^7.24.8" + "@noble/curves": "npm:^1.4.2" + "@noble/hashes": "npm:^1.4.0" + "@solana/buffer-layout": "npm:^4.0.1" + agentkeepalive: "npm:^4.5.0" + bigint-buffer: "npm:^1.1.5" + bn.js: "npm:^5.2.1" + borsh: "npm:^0.7.0" + bs58: "npm:^4.0.1" + buffer: "npm:6.0.3" + fast-stable-stringify: "npm:^1.0.0" + jayson: "npm:^4.1.1" + node-fetch: "npm:^2.7.0" + rpc-websockets: "npm:^9.0.2" + superstruct: "npm:^2.0.2" + checksum: 10/6b9b00bba37cf8b1f5de9b1bc82efc2006eb2fa8fd5b90bee6f0ce174c0a1a41e97e5ee1db8391fc8a1d50b4610a77744cb3b1364584a3d65bc931a26d635193 + languageName: node + linkType: hard + "@stablelib/aead@npm:^1.0.1": version: 1.0.1 resolution: "@stablelib/aead@npm:1.0.1" @@ -11946,7 +11969,7 @@ __metadata: languageName: node linkType: hard -"jayson@npm:^4.1.0": +"jayson@npm:^4.1.0, jayson@npm:^4.1.1": version: 4.1.1 resolution: "jayson@npm:4.1.1" dependencies: @@ -17848,6 +17871,27 @@ __metadata: languageName: node linkType: hard +"viem@npm:^2.17.5": + version: 2.17.5 + resolution: "viem@npm:2.17.5" + dependencies: + "@adraffy/ens-normalize": "npm:1.10.0" + "@noble/curves": "npm:1.4.0" + "@noble/hashes": "npm:1.4.0" + "@scure/bip32": "npm:1.4.0" + "@scure/bip39": "npm:1.3.0" + abitype: "npm:1.0.5" + isows: "npm:1.0.4" + ws: "npm:8.17.1" + peerDependencies: + typescript: ">=5.0.4" + peerDependenciesMeta: + typescript: + optional: true + checksum: 10/dd086f4077b0a418a3c326d5ab7df2119f33d2da5b95984b656929e61d766841bed82d677dc3d4c5e1650bc301062734baced71cd303abd40ece91d88b3d626e + languageName: node + linkType: hard + "vite-node@npm:1.6.0": version: 1.6.0 resolution: "vite-node@npm:1.6.0" From 0c854a1ff2217a51ecaa842941cbabd5c5973a3d Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 24 Jul 2024 12:32:44 +0200 Subject: [PATCH 02/60] chore: add the resize of token list --- .../src/components/Widget/WidgetView.style.tsx | 2 +- packages/widget/src/hooks/useContentHeight.ts | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index f041289d1..28ba4b553 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -14,7 +14,7 @@ export const FloatingToolsContainer = styled(Box)(({ theme }) => ({ gap: theme.spacing(2), position: 'absolute', zIndex: drawerZIndex, - padding: theme.spacing(3), + padding: theme.spacing(3, 0, 0, 3), })); interface WidgetContainerProps extends BoxProps { diff --git a/packages/widget/src/hooks/useContentHeight.ts b/packages/widget/src/hooks/useContentHeight.ts index 26560a9f6..a656c97c5 100644 --- a/packages/widget/src/hooks/useContentHeight.ts +++ b/packages/widget/src/hooks/useContentHeight.ts @@ -8,6 +8,7 @@ const getContentHeight = (elementId: string) => { const containerElement = document.getElementById( createElementId(ElementId.ScrollableContainer, elementId), ); + const headerElement = document.getElementById( createElementId(ElementId.Header, elementId), ); @@ -25,10 +26,20 @@ const getContentHeight = (elementId: string) => { export const useContentHeight = () => { const elementId = useDefaultElementId(); const [contentHeight, setContentHeight] = useState(0); + useLayoutEffect(() => { + const handleResize = () => { + setContentHeight(getContentHeight(elementId)); + }; + setContentHeight(getContentHeight(elementId)); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [elementId]); return contentHeight; }; From bd96801288b72f6ad3bdc9328c243f46ad84ce21 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 24 Jul 2024 17:28:58 +0200 Subject: [PATCH 03/60] feat: get full height working with virtual token list --- .../components/Widget/WidgetView.style.tsx | 6 ++-- .../components/Widget/WidgetViewContainer.tsx | 5 ++- .../src/defaultWidgetConfig.ts | 4 ++- .../widget/src/components/AppContainer.tsx | 19 ++++++++-- .../src/components/TokenList/TokenList.tsx | 9 +++-- .../widget/src/components/TokenList/types.ts | 1 + packages/widget/src/hooks/useContentHeight.ts | 36 ++++++++++++++++--- .../pages/SelectTokenPage/SelectTokenPage.tsx | 7 +++- 8 files changed, 71 insertions(+), 16 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 28ba4b553..40a4c3f1d 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -18,19 +18,19 @@ export const FloatingToolsContainer = styled(Box)(({ theme }) => ({ })); interface WidgetContainerProps extends BoxProps { - mobileView: boolean; + fullHeightView: boolean; } export const WidgetContainer = styled(Box)(({ theme, - mobileView, + fullHeightView, }) => { return { display: 'flex', flexGrow: 1, alignItems: 'center', justifyContent: 'center', - paddingTop: mobileView ? 0 : theme.spacing(6), + paddingTop: fullHeightView ? 0 : theme.spacing(6), }; }); diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index b94c5d4dd..24358a285 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -49,7 +49,10 @@ export function WidgetViewContainer({ ) : null} {children} diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 006ca204c..d62410e44 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -220,9 +220,11 @@ export const defaultWidgetConfig: Partial = { fontFamily: 'Inter, sans-serif', }, container: { + display: 'flex', + height: '100%', // paddingTop: 80, // boxSizing: 'border-box', - height: '100vh', + // height: '100vh', boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)', // borderRadius: '16px', }, diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 178601c5d..48d82467d 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -14,6 +14,15 @@ export const AppExpandedContainer = styled(Box, { alignItems: 'start', flex: 1, height: variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, + ...(variant !== 'drawer' && + theme.container?.height === 'flex' && + theme.container?.height === '100%' + ? { + flexDirection: 'column', + alignItems: 'center', + height: '100%', + } + : {}), })); export const RelativeContainer = styled(Box, { @@ -25,7 +34,10 @@ export const RelativeContainer = styled(Box, { minWidth: theme.breakpoints.values.xs, maxWidth: theme.breakpoints.values.sm, maxHeight: - variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, + variant === 'drawer' || + (theme.container?.height === 'flex' && theme.container?.height === '100%') + ? 'none' + : theme.container?.height || maxHeight, background: theme.palette.background.default, overflow: 'auto', flex: 1, @@ -43,7 +55,10 @@ const CssBaselineContainer = styled(ScopedCssBaseline, { margin: 0, width: '100%', maxHeight: - variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, + variant === 'drawer' || + (theme.container?.height === 'flex' && theme.container?.height === '100%') + ? 'none' + : theme.container?.height || maxHeight, overflowY: 'auto', height: '100%', })); diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx index bf97e6f37..7e8aa4b4d 100644 --- a/packages/widget/src/components/TokenList/TokenList.tsx +++ b/packages/widget/src/components/TokenList/TokenList.tsx @@ -1,6 +1,5 @@ import { Box } from '@mui/material'; import type { FC } from 'react'; -import { useRef } from 'react'; import { useAccount } from '../../hooks/useAccount.js'; import { useChain } from '../../hooks/useChain.js'; import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'; @@ -17,10 +16,10 @@ import { filteredTokensComparator } from './utils.js'; export const TokenList: FC = ({ formType, + parentRef, height, onClick, }) => { - const parentRef = useRef(null); const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType)); const [tokenSearchFilter]: string[] = useDebouncedWatch( 320, @@ -82,7 +81,11 @@ export const TokenList: FC = ({ !tokenSearchFilter; return ( - + {!tokens.length && !isLoading ? ( ) : null} diff --git a/packages/widget/src/components/TokenList/types.ts b/packages/widget/src/components/TokenList/types.ts index e7e3b1229..a18dbd557 100644 --- a/packages/widget/src/components/TokenList/types.ts +++ b/packages/widget/src/components/TokenList/types.ts @@ -5,6 +5,7 @@ import type { FormType } from '../../stores/form/types.js'; import type { TokenAmount } from '../../types/token.js'; export interface TokenListProps { + parentRef: MutableRefObject; formType: FormType; height: number; onClick?(): void; diff --git a/packages/widget/src/hooks/useContentHeight.ts b/packages/widget/src/hooks/useContentHeight.ts index a656c97c5..82d98cd75 100644 --- a/packages/widget/src/hooks/useContentHeight.ts +++ b/packages/widget/src/hooks/useContentHeight.ts @@ -4,11 +4,25 @@ import { ElementId, createElementId } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; import { getScrollableContainer } from './useScrollableContainer.js'; -const getContentHeight = (elementId: string) => { +const getContentHeight = ( + elementId: string, + listParentRef: MutableRefObject, +) => { const containerElement = document.getElementById( createElementId(ElementId.ScrollableContainer, elementId), ); + const listParentElement = listParentRef?.current; + + let oldHeight; + + // This covers the case where in full height flex mode when the browser height is reduced + // - this allows the virtualised token list can be made smaller + if (listParentElement) { + oldHeight = listParentElement.style.height; + listParentElement.style.height = '0'; + } + const headerElement = document.getElementById( createElementId(ElementId.Header, elementId), ); @@ -20,26 +34,38 @@ const getContentHeight = (elementId: string) => { } const { height: containerHeight } = containerElement.getBoundingClientRect(); const { height: headerHeight } = headerElement.getBoundingClientRect(); + + // This covers the case where in full height flex mode when the browser height is reduced the + // - this allows the virtualised token list tobe set to minimum size + if (listParentElement && oldHeight) { + listParentElement.style.height = oldHeight; + } + return containerHeight - headerHeight; }; -export const useContentHeight = () => { +interface UseContentHeightProps { + listParentRef: MutableRefObject; +} + +export const useContentHeight = ({ listParentRef }: UseContentHeightProps) => { const elementId = useDefaultElementId(); const [contentHeight, setContentHeight] = useState(0); useLayoutEffect(() => { const handleResize = () => { - setContentHeight(getContentHeight(elementId)); + setContentHeight(getContentHeight(elementId, listParentRef)); }; - setContentHeight(getContentHeight(elementId)); + setContentHeight(getContentHeight(elementId, listParentRef)); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; - }, [elementId]); + }, [elementId, listParentRef]); + return contentHeight; }; diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index 8736891b8..b37340117 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -20,7 +20,10 @@ export const SelectTokenPage: FC = ({ formType }) => { useScrollableOverflowHidden(); const { navigateBack } = useNavigateBack(); const headerRef = useRef(null); - const contentHeight = useContentHeight(); + const listParentRef = useRef(null); + const contentHeight = useContentHeight({ listParentRef }); + + // TODO: question: can we move this in to useContentHeightHook const [tokenListHeight, setTokenListHeight] = useState(0); const swapOnly = useSwapOnly(); @@ -35,6 +38,7 @@ export const SelectTokenPage: FC = ({ formType }) => { useHeader(title); + // TODO: question: can we move this in to useContentHeightHook useLayoutEffect(() => { setTokenListHeight( Math.max( @@ -55,6 +59,7 @@ export const SelectTokenPage: FC = ({ formType }) => { Date: Wed, 24 Jul 2024 18:07:17 +0200 Subject: [PATCH 04/60] refactor: folder the token list height into a single hook --- .../widget/src/hooks/useSetContentHeight.ts | 24 ++++++++++++ ...ContentHeight.ts => useTokenListHeight.ts} | 38 +++++++------------ .../pages/SelectTokenPage/SelectTokenPage.tsx | 20 ++-------- .../ExchangeRateBottomSheet.tsx | 2 +- .../TransactionPage/StatusBottomSheet.tsx | 2 +- .../TransactionPage/TokenValueBottomSheet.tsx | 2 +- 6 files changed, 43 insertions(+), 45 deletions(-) create mode 100644 packages/widget/src/hooks/useSetContentHeight.ts rename packages/widget/src/hooks/{useContentHeight.ts => useTokenListHeight.ts} (69%) diff --git a/packages/widget/src/hooks/useSetContentHeight.ts b/packages/widget/src/hooks/useSetContentHeight.ts new file mode 100644 index 000000000..8cfd1db7c --- /dev/null +++ b/packages/widget/src/hooks/useSetContentHeight.ts @@ -0,0 +1,24 @@ +import type { MutableRefObject } from 'react'; +import { useLayoutEffect } from 'react'; +import { useDefaultElementId } from './useDefaultElementId.js'; +import { getScrollableContainer } from './useScrollableContainer.js'; + +export const useSetContentHeight = ( + ref: MutableRefObject, +) => { + const elementId = useDefaultElementId(); + useLayoutEffect(() => { + const scrollableContainer = getScrollableContainer(elementId); + if ( + !scrollableContainer || + !ref.current || + ref.current?.clientHeight <= scrollableContainer?.clientHeight + ) { + return; + } + scrollableContainer.style.height = `${ref.current.clientHeight}px`; + return () => { + scrollableContainer.style.removeProperty('height'); + }; + }, [elementId, ref]); +}; diff --git a/packages/widget/src/hooks/useContentHeight.ts b/packages/widget/src/hooks/useTokenListHeight.ts similarity index 69% rename from packages/widget/src/hooks/useContentHeight.ts rename to packages/widget/src/hooks/useTokenListHeight.ts index 82d98cd75..5662cfde1 100644 --- a/packages/widget/src/hooks/useContentHeight.ts +++ b/packages/widget/src/hooks/useTokenListHeight.ts @@ -2,7 +2,6 @@ import type { MutableRefObject } from 'react'; import { useLayoutEffect, useState } from 'react'; import { ElementId, createElementId } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; -import { getScrollableContainer } from './useScrollableContainer.js'; const getContentHeight = ( elementId: string, @@ -17,7 +16,7 @@ const getContentHeight = ( let oldHeight; // This covers the case where in full height flex mode when the browser height is reduced - // - this allows the virtualised token list can be made smaller + // - this allows the virtualised token list to be made smaller if (listParentElement) { oldHeight = listParentElement.style.height; listParentElement.style.height = '0'; @@ -36,7 +35,7 @@ const getContentHeight = ( const { height: headerHeight } = headerElement.getBoundingClientRect(); // This covers the case where in full height flex mode when the browser height is reduced the - // - this allows the virtualised token list tobe set to minimum size + // - this allows the virtualised token list to be set to minimum size if (listParentElement && oldHeight) { listParentElement.style.height = oldHeight; } @@ -46,9 +45,15 @@ const getContentHeight = ( interface UseContentHeightProps { listParentRef: MutableRefObject; + headerRef: MutableRefObject; } -export const useContentHeight = ({ listParentRef }: UseContentHeightProps) => { +const minTokenListHeight = 360; + +export const useTokenListHeight = ({ + listParentRef, + headerRef, +}: UseContentHeightProps) => { const elementId = useDefaultElementId(); const [contentHeight, setContentHeight] = useState(0); @@ -66,25 +71,8 @@ export const useContentHeight = ({ listParentRef }: UseContentHeightProps) => { }; }, [elementId, listParentRef]); - return contentHeight; -}; - -export const useSetContentHeight = ( - ref: MutableRefObject, -) => { - const elementId = useDefaultElementId(); - useLayoutEffect(() => { - const scrollableContainer = getScrollableContainer(elementId); - if ( - !scrollableContainer || - !ref.current || - ref.current?.clientHeight <= scrollableContainer?.clientHeight - ) { - return; - } - scrollableContainer.style.height = `${ref.current.clientHeight}px`; - return () => { - scrollableContainer.style.removeProperty('height'); - }; - }, [elementId, ref]); + return Math.max( + contentHeight - (headerRef.current?.offsetHeight ?? 0), + minTokenListHeight, + ); }; diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index b37340117..fd0502f5c 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -1,30 +1,26 @@ import { Box } from '@mui/material'; import type { FC } from 'react'; -import { useLayoutEffect, useRef, useState } from 'react'; +import { useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'; import { PageContainer } from '../../components/PageContainer.js'; import { TokenList } from '../../components/TokenList/TokenList.js'; -import { useContentHeight } from '../../hooks/useContentHeight.js'; import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; +import { useTokenListHeight } from '../../hooks/useTokenListHeight.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { FormTypeProps } from '../../stores/form/types.js'; import { SearchTokenInput } from './SearchTokenInput.js'; -const minTokenListHeight = 360; - export const SelectTokenPage: FC = ({ formType }) => { useScrollableOverflowHidden(); const { navigateBack } = useNavigateBack(); const headerRef = useRef(null); const listParentRef = useRef(null); - const contentHeight = useContentHeight({ listParentRef }); + const tokenListHeight = useTokenListHeight({ listParentRef, headerRef }); - // TODO: question: can we move this in to useContentHeightHook - const [tokenListHeight, setTokenListHeight] = useState(0); const swapOnly = useSwapOnly(); const { subvariant } = useWidgetConfig(); @@ -38,16 +34,6 @@ export const SelectTokenPage: FC = ({ formType }) => { useHeader(title); - // TODO: question: can we move this in to useContentHeightHook - useLayoutEffect(() => { - setTokenListHeight( - Math.max( - contentHeight - (headerRef.current?.offsetHeight ?? 0), - minTokenListHeight, - ), - ); - }, [contentHeight]); - const hideChainSelect = swapOnly && formType === 'to'; return ( diff --git a/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx index c6490af42..407ad8dc4 100644 --- a/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx +++ b/packages/widget/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx @@ -12,7 +12,7 @@ import { import { useTranslation } from 'react-i18next'; import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'; import type { BottomSheetBase } from '../../components/BottomSheet/types.js'; -import { useSetContentHeight } from '../../hooks/useContentHeight.js'; +import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'; import { formatTokenAmount } from '../../utils/format.js'; import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'; diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx index f3d30303d..56c7f4f6f 100644 --- a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx +++ b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx @@ -12,9 +12,9 @@ import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'; import type { BottomSheetBase } from '../../components/BottomSheet/types.js'; import { Token } from '../../components/Token/Token.js'; import { useAvailableChains } from '../../hooks/useAvailableChains.js'; -import { useSetContentHeight } from '../../hooks/useContentHeight.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { getProcessMessage } from '../../hooks/useProcessMessage.js'; +import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'; import { useTokenBalance } from '../../hooks/useTokenBalance.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; diff --git a/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx index 2c5a83603..669a5040e 100644 --- a/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx +++ b/packages/widget/src/pages/TransactionPage/TokenValueBottomSheet.tsx @@ -6,7 +6,7 @@ import { forwardRef, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'; import type { BottomSheetBase } from '../../components/BottomSheet/types.js'; -import { useSetContentHeight } from '../../hooks/useContentHeight.js'; +import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'; import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'; import { calcValueLoss } from './utils.js'; From 0472381f0b198dcbd41fc8d817288c8e8fb3b938 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 24 Jul 2024 18:45:45 +0200 Subject: [PATCH 05/60] refactor: fix incorect branch statements --- .../widget-playground/src/defaultWidgetConfig.ts | 4 ++-- packages/widget/src/components/AppContainer.tsx | 13 ++----------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index d62410e44..1c139c50b 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,7 +206,7 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', - mobileLayout: true, + // mobileLayout: true, theme: { palette: { primary: { @@ -221,7 +221,7 @@ export const defaultWidgetConfig: Partial = { }, container: { display: 'flex', - height: '100%', + // height: '100%', // paddingTop: 80, // boxSizing: 'border-box', // height: '100vh', diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 48d82467d..558ea2c85 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -14,15 +14,6 @@ export const AppExpandedContainer = styled(Box, { alignItems: 'start', flex: 1, height: variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, - ...(variant !== 'drawer' && - theme.container?.height === 'flex' && - theme.container?.height === '100%' - ? { - flexDirection: 'column', - alignItems: 'center', - height: '100%', - } - : {}), })); export const RelativeContainer = styled(Box, { @@ -35,7 +26,7 @@ export const RelativeContainer = styled(Box, { maxWidth: theme.breakpoints.values.sm, maxHeight: variant === 'drawer' || - (theme.container?.height === 'flex' && theme.container?.height === '100%') + (theme.container?.display === 'flex' && theme.container?.height === '100%') ? 'none' : theme.container?.height || maxHeight, background: theme.palette.background.default, @@ -56,7 +47,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, { width: '100%', maxHeight: variant === 'drawer' || - (theme.container?.height === 'flex' && theme.container?.height === '100%') + (theme.container?.display === 'flex' && theme.container?.height === '100%') ? 'none' : theme.container?.height || maxHeight, overflowY: 'auto', From 8b4ad79728d8561c5dc098a72ff081fb5fedacaf Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 24 Jul 2024 19:05:22 +0200 Subject: [PATCH 06/60] feat: minor changs to support non full height flex --- .../widget-playground-vite/vite.config.ts | 28 +++++++++---------- .../components/Widget/WidgetView.style.tsx | 6 ++-- .../components/Widget/WidgetViewContainer.tsx | 1 + .../widget/src/components/AppContainer.tsx | 6 ++-- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/widget-playground-vite/vite.config.ts b/packages/widget-playground-vite/vite.config.ts index 8ccd653d8..8c10cbd93 100644 --- a/packages/widget-playground-vite/vite.config.ts +++ b/packages/widget-playground-vite/vite.config.ts @@ -1,4 +1,4 @@ -import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; +// import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; import react from '@vitejs/plugin-react-swc'; import { defineConfig } from 'vite'; import { nodePolyfills } from 'vite-plugin-node-polyfills'; @@ -13,19 +13,19 @@ export default defineConfig({ build: { sourcemap: true, }, - optimizeDeps: { - esbuildOptions: { - define: { - global: 'globalThis', - }, - plugins: [ - NodeGlobalsPolyfillPlugin({ - process: true, - buffer: true, - }), - ], - }, - }, + // optimizeDeps: { + // esbuildOptions: { + // define: { + // global: 'globalThis', + // }, + // plugins: [ + // NodeGlobalsPolyfillPlugin({ + // process: true, + // buffer: true, + // }), + // ], + // }, + // }, server: { port: 3000, open: true, diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 40a4c3f1d..8561063cc 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -18,17 +18,19 @@ export const FloatingToolsContainer = styled(Box)(({ theme }) => ({ })); interface WidgetContainerProps extends BoxProps { - fullHeightView: boolean; + fullHeightView?: boolean; + alignTop?: boolean; } export const WidgetContainer = styled(Box)(({ theme, fullHeightView, + alignTop, }) => { return { display: 'flex', flexGrow: 1, - alignItems: 'center', + alignItems: alignTop ? 'flex-start' : 'center', justifyContent: 'center', paddingTop: fullHeightView ? 0 : theme.spacing(6), }; diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 24358a285..028a44af4 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -53,6 +53,7 @@ export function WidgetViewContainer({ config?.theme?.container?.height === '100vh' || config?.theme?.container?.height === '100%' } + alignTop={config?.theme?.container?.display === 'flex'} > {children} diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 558ea2c85..84efa8e59 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -25,8 +25,7 @@ export const RelativeContainer = styled(Box, { minWidth: theme.breakpoints.values.xs, maxWidth: theme.breakpoints.values.sm, maxHeight: - variant === 'drawer' || - (theme.container?.display === 'flex' && theme.container?.height === '100%') + variant === 'drawer' || theme.container?.display === 'flex' ? 'none' : theme.container?.height || maxHeight, background: theme.palette.background.default, @@ -46,8 +45,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, { margin: 0, width: '100%', maxHeight: - variant === 'drawer' || - (theme.container?.display === 'flex' && theme.container?.height === '100%') + variant === 'drawer' || theme.container?.display === 'flex' ? 'none' : theme.container?.height || maxHeight, overflowY: 'auto', From e04216f854a656a19fd1ed84224659dd2a178a6e Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 24 Jul 2024 20:09:28 +0200 Subject: [PATCH 07/60] fix: reworkthe bookmarks page to remove scrollbars --- .../widget-playground/src/defaultWidgetConfig.ts | 2 +- .../src/pages/SendToWallet/BookmarksPage.tsx | 2 +- .../pages/SendToWallet/SendToWalletPage.style.tsx | 14 +++----------- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 1c139c50b..dc6cfa718 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -220,7 +220,7 @@ export const defaultWidgetConfig: Partial = { fontFamily: 'Inter, sans-serif', }, container: { - display: 'flex', + // display: 'flex', // height: '100%', // paddingTop: 80, // boxSizing: 'border-box', diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index 77829d819..70b2a6584 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -109,7 +109,7 @@ export const BookmarksPage = () => { disableGutters sx={mobileLayout ? { justifyContent: 'space-between' } : undefined} > - + {bookmarks.map((bookmark) => ( ({ minHeight: 400, })); -interface BookmarkButtonContainerProps extends BoxProps { - mobileLayout?: boolean; -} - -export const BookmarkButtonContainer = styled( - Box, -)(({ theme, mobileLayout }) => ({ +export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({ background: theme.palette.background.default, display: 'flex', flexDirection: 'column', bottom: 0, padding: theme.spacing(0, 3, 3), zIndex: 2, - ...(mobileLayout - ? { position: 'absolute', width: '100%' } - : { flexGrow: 1, position: 'sticky', marginBottom: theme.spacing(-5.25) }), + position: 'absolute', + width: '100%', })); export const EmptyContainer = styled(Box)(({ theme }) => ({ From d60156a54598b5b9ef399967e481bbc3ce014038 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Thu, 25 Jul 2024 11:53:39 +0200 Subject: [PATCH 08/60] fix: changes after checks on bookmarks --- .../SendToWallet/SendToWalletPage.style.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx index 3cac6f91c..f4da01e4e 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx @@ -1,3 +1,4 @@ +import type { BoxProps } from '@mui/material'; import { Alert, Box, @@ -97,14 +98,26 @@ export const ListContainer = styled(List)(({ theme }) => ({ minHeight: 400, })); -export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({ +interface BookmarkButtonContainerProps extends BoxProps { + mobileLayout?: boolean; +} + +export const BookmarkButtonContainer = styled( + Box, +)(({ theme, mobileLayout }) => ({ background: theme.palette.background.default, display: 'flex', flexDirection: 'column', bottom: 0, padding: theme.spacing(0, 3, 3), zIndex: 2, - position: 'absolute', + ...(mobileLayout + ? { + position: 'fixed', + minWidth: theme.breakpoints.values.xs, + maxWidth: theme.breakpoints.values.sm, + } + : { position: 'sticky' }), width: '100%', })); From 435a91453c8fd33cca1bbc45fa98a2e120c06ab8 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Thu, 25 Jul 2024 15:01:26 +0200 Subject: [PATCH 09/60] feat: allow bookmark list height to be set for flex layout --- .../widget-playground/src/defaultWidgetConfig.ts | 7 ++++--- .../src/pages/SendToWallet/BookmarksPage.tsx | 16 ++++++++++++++-- packages/widget/src/types/widget.ts | 3 +-- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index dc6cfa718..9059b47eb 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,7 +206,8 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', - // mobileLayout: true, + mobileLayout: true, + // bookmarkListHeight: 800, theme: { palette: { primary: { @@ -220,8 +221,8 @@ export const defaultWidgetConfig: Partial = { fontFamily: 'Inter, sans-serif', }, container: { - // display: 'flex', - // height: '100%', + display: 'flex', + height: '100%', // paddingTop: 80, // boxSizing: 'border-box', // height: '100vh', diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index 70b2a6584..202d9ddd9 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -37,7 +37,7 @@ import { export const BookmarksPage = () => { const { t } = useTranslation(); - const { mobileLayout } = useWidgetConfig(); + const { mobileLayout, bookmarkListHeight, theme } = useWidgetConfig(); const [bookmark, setBookmark] = useState(); const bookmarkAddressSheetRef = useRef(null); const { bookmarks } = useBookmarks(); @@ -109,7 +109,19 @@ export const BookmarksPage = () => { disableGutters sx={mobileLayout ? { justifyContent: 'space-between' } : undefined} > - + {bookmarks.map((bookmark) => ( ; export type WidgetTheme = { - widgetHeight?: number; palette?: Pick< PaletteOptions, 'background' | 'grey' | 'primary' | 'secondary' | 'text' @@ -129,7 +128,7 @@ export interface AllowDeny { export interface WidgetConfig { mobileLayout?: boolean; - + bookmarkListHeight?: number; fromChain?: number; toChain?: number; fromToken?: string; From 66c531b3006c0aa2f1975d6ad2bddfc7a0c5e7d9 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 26 Jul 2024 16:02:18 +0200 Subject: [PATCH 10/60] fix: add back in the optimiser for vite --- .../widget-playground-vite/vite.config.ts | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/widget-playground-vite/vite.config.ts b/packages/widget-playground-vite/vite.config.ts index 8c10cbd93..8ccd653d8 100644 --- a/packages/widget-playground-vite/vite.config.ts +++ b/packages/widget-playground-vite/vite.config.ts @@ -1,4 +1,4 @@ -// import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; +import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; import react from '@vitejs/plugin-react-swc'; import { defineConfig } from 'vite'; import { nodePolyfills } from 'vite-plugin-node-polyfills'; @@ -13,19 +13,19 @@ export default defineConfig({ build: { sourcemap: true, }, - // optimizeDeps: { - // esbuildOptions: { - // define: { - // global: 'globalThis', - // }, - // plugins: [ - // NodeGlobalsPolyfillPlugin({ - // process: true, - // buffer: true, - // }), - // ], - // }, - // }, + optimizeDeps: { + esbuildOptions: { + define: { + global: 'globalThis', + }, + plugins: [ + NodeGlobalsPolyfillPlugin({ + process: true, + buffer: true, + }), + ], + }, + }, server: { port: 3000, open: true, From 939946847cd2a0715e064b9afa6230d1dbefa393 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 26 Jul 2024 17:34:35 +0200 Subject: [PATCH 11/60] feat: ensure that dvh units are supported in playground for better presentation on mobile devices --- .../src/components/Mock/index.tsx | 11 ++++++++++ .../components/Widget/WidgetView.style.tsx | 20 +++++++++++++++++-- .../components/Widget/WidgetViewContainer.tsx | 14 ++++++++++++- .../src/defaultWidgetConfig.ts | 6 +++--- .../themeOverrides/dark.ts | 2 +- .../themeOverrides/light.ts | 2 +- 6 files changed, 47 insertions(+), 8 deletions(-) create mode 100644 packages/widget-playground/src/components/Mock/index.tsx diff --git a/packages/widget-playground/src/components/Mock/index.tsx b/packages/widget-playground/src/components/Mock/index.tsx new file mode 100644 index 000000000..fb67309c0 --- /dev/null +++ b/packages/widget-playground/src/components/Mock/index.tsx @@ -0,0 +1,11 @@ +import { Box } from '@mui/material'; +import { styled } from '@mui/material/styles'; + +export const MockElement = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + width: '100%', + height: 40, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', +})); diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 8561063cc..5dac1ae25 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -30,12 +30,28 @@ export const WidgetContainer = styled(Box)(({ return { display: 'flex', flexGrow: 1, - alignItems: alignTop ? 'flex-start' : 'center', - justifyContent: 'center', + justifyContent: alignTop ? 'flex-start' : 'center', + alignItems: 'center', + flexDirection: 'column', paddingTop: fullHeightView ? 0 : theme.spacing(6), }; }); +interface WidgetContainerRowProps extends BoxProps { + alignTop?: boolean; +} + +export const WidgetContainerRow = styled(Box)(({ + alignTop, +}) => { + return { + display: 'flex', + alignItems: alignTop ? 'flex-start' : 'center', + flexGrow: 1, + width: '100%', + }; +}); + const floatingToolButtonColors = (theme: Theme) => ({ color: theme.palette.text.primary, backgroundColor: diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 028a44af4..9e211804d 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -8,14 +8,19 @@ import { useDrawerToolValues, useEditToolsActions, } from '../../store'; +import { MockElement } from '../Mock'; import { ToggleDrawerButton } from './ToggleDrawerButton'; import { DrawerOpenButton, FloatingToolsContainer, Main, WidgetContainer, + WidgetContainerRow, } from './WidgetView.style'; +const showMockHeader = false; +const showMockFooter = false; + interface WidgetViewContainerProps extends PropsWithChildren { toggleDrawer?(): void; } @@ -49,13 +54,20 @@ export function WidgetViewContainer({ ) : null} - {children} + {showMockHeader ? Mock header : null} + + {children} + + {showMockFooter ? Mock footer : null} diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 9059b47eb..407c5294d 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,7 +206,7 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', - mobileLayout: true, + // mobileLayout: true, // bookmarkListHeight: 800, theme: { palette: { @@ -221,8 +221,8 @@ export const defaultWidgetConfig: Partial = { fontFamily: 'Inter, sans-serif', }, container: { - display: 'flex', - height: '100%', + // display: 'flex', + // height: '100%', // paddingTop: 80, // boxSizing: 'border-box', // height: '100vh', diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts index 9596fe253..0f8c437e6 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/dark.ts @@ -34,7 +34,7 @@ export const darkComponents = { styleOverrides: (theme: WidgetTheme & Theme) => ({ body: { display: 'flex', - minHeight: '100vh', + minHeight: '100dvh', backgroundColor: theme.playground?.background || theme.palette?.common?.black, }, diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts index 89fbbda75..ecc0d8355 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts @@ -14,7 +14,7 @@ export const lightComponents = { styleOverrides: (theme: WidgetTheme) => ({ body: { display: 'flex', - minHeight: '100vh', + minHeight: '100dvh', backgroundColor: theme.playground?.background || theme.palette?.grey?.[100], }, From c13f195504d3d0a8f2960bf023ec184d01786a6d Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 26 Jul 2024 18:07:37 +0200 Subject: [PATCH 12/60] fix: revert change after disucss about main page and buton positioning - this was to prevetn the animation looking odd for send to wallet --- .../src/defaultWidgetConfig.ts | 6 +- .../widget/src/pages/MainPage/MainPage.tsx | 57 +++++++------------ 2 files changed, 23 insertions(+), 40 deletions(-) diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 407c5294d..9059b47eb 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,7 +206,7 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', - // mobileLayout: true, + mobileLayout: true, // bookmarkListHeight: 800, theme: { palette: { @@ -221,8 +221,8 @@ export const defaultWidgetConfig: Partial = { fontFamily: 'Inter, sans-serif', }, container: { - // display: 'flex', - // height: '100%', + display: 'flex', + height: '100%', // paddingTop: 80, // boxSizing: 'border-box', // height: '100vh', diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index a6c4568f2..06833224d 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -20,8 +20,7 @@ import { ReviewButton } from './ReviewButton.js'; export const MainPage: React.FC = () => { const { t } = useTranslation(); const wideVariant = useWideVariant(); - const { subvariant, contractComponent, hiddenUI, mobileLayout } = - useWidgetConfig(); + const { subvariant, contractComponent, hiddenUI } = useWidgetConfig(); const custom = subvariant === 'custom'; const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy); @@ -34,42 +33,26 @@ export const MainPage: React.FC = () => { useHeader(title); return ( - - - - {custom ? ( - - {contractComponent} - - ) : null} - - {!custom ? ( - - ) : null} - {!wideVariant ? : null} - - - - - - - - - - {showPoweredBy ? : null} + + + {custom ? ( + + {contractComponent} + + ) : null} + + {!custom ? ( + + ) : null} + {!wideVariant ? : null} + + + + + + + {showPoweredBy ? : null} ); }; From 38e7ed4ef0d734a1ed81ab99d610950fb83755eb Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 26 Jul 2024 20:42:50 +0200 Subject: [PATCH 13/60] feat: get routes expanded to adapt to flex to expand into available space - should scroll if all the routes can't fit --- .../components/Widget/WidgetViewContainer.tsx | 1 + .../src/defaultWidgetConfig.ts | 4 +- .../widget/src/components/AppContainer.tsx | 7 ++- .../RouteCard/RouteCardSkeleton.tsx | 2 +- .../components/Routes/RoutesExpanded.style.ts | 43 +++++++++++++------ .../src/components/Routes/RoutesExpanded.tsx | 12 +++--- 6 files changed, 48 insertions(+), 21 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 9e211804d..5be54fd60 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -63,6 +63,7 @@ export function WidgetViewContainer({ > {showMockHeader ? Mock header : null} {children} diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 9059b47eb..dd56d7277 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,7 +206,7 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', - mobileLayout: true, + // mobileLayout: true, // bookmarkListHeight: 800, theme: { palette: { @@ -222,7 +222,7 @@ export const defaultWidgetConfig: Partial = { }, container: { display: 'flex', - height: '100%', + // height: '100%', // paddingTop: 80, // boxSizing: 'border-box', // height: '100vh', diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 84efa8e59..8301f756c 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -13,7 +13,12 @@ export const AppExpandedContainer = styled(Box, { justifyContent: 'center', alignItems: 'start', flex: 1, - height: variant === 'drawer' ? 'none' : theme.container?.height || maxHeight, + height: + variant === 'drawer' + ? 'none' + : theme.container?.display === 'flex' + ? '100%' + : theme.container?.height || maxHeight, })); export const RelativeContainer = styled(Box, { diff --git a/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx b/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx index b5bf2851a..511e001aa 100644 --- a/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx +++ b/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx @@ -11,7 +11,7 @@ export const RouteCardSkeleton: React.FC< const { subvariant } = useWidgetConfig(); const cardContent = ( - + {subvariant !== 'refuel' && subvariant !== 'custom' ? ( ({ - height: maxHeight, zIndex: 0, + ...(theme.container.display === 'flex' + ? { display: 'flex', height: '100%' } + : {}), +})); + +export const RoutesExpandedCollapse = styled(Collapse)(({ theme }) => ({ + ...(theme.container?.display === 'flex' ? { height: '100%' } : {}), +})); + +export const RouteGrow = styled(Grow)(({ theme }) => ({ + ...(theme.container?.display === 'flex' ? { height: '100%' } : {}), })); export const ScrollableContainer = styled(Box)({ @@ -15,16 +26,24 @@ export const ScrollableContainer = styled(Box)({ flexDirection: 'column', }); -export const Container = styled(ScopedCssBaseline)(({ theme }) => ({ - backgroundColor: theme.palette.background.default, - overflow: 'auto', - width: 436, - maxHeight, - marginLeft: theme.spacing(3), - display: 'flex', - flexDirection: 'column', - ...theme.container, -})); +interface ContainerProps extends ScopedCssBaselineProps { + isLoading: boolean; +} + +export const Container = styled(ScopedCssBaseline)( + ({ theme, isLoading }) => ({ + backgroundColor: theme.palette.background.default, + overflow: 'auto', + width: 436, + marginLeft: theme.spacing(3), + display: 'flex', + flexDirection: 'column', + ...(theme.container?.display !== 'flex' + ? { maxHeight } + : { height: isLoading ? 'auto' : '100%' }), + ...theme.container, + }), +); export const Header = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.default, diff --git a/packages/widget/src/components/Routes/RoutesExpanded.tsx b/packages/widget/src/components/Routes/RoutesExpanded.tsx index 33959df79..65a2bb717 100644 --- a/packages/widget/src/components/Routes/RoutesExpanded.tsx +++ b/packages/widget/src/components/Routes/RoutesExpanded.tsx @@ -22,6 +22,8 @@ import { CollapseContainer, Container, Header, + RouteGrow, + RoutesExpandedCollapse, ScrollableContainer, } from './RoutesExpanded.style.js'; @@ -45,11 +47,11 @@ export const RoutesExpanded = () => { return ( - +
- + ); @@ -112,14 +114,14 @@ export const RoutesExpandedElement = () => { }, [emitter, expanded]); return ( - - +
@@ -163,6 +165,6 @@ export const RoutesExpandedElement = () => { - + ); }; From 2eebefa6e06c7ed0c44a3c93d9b073b991c1eac2 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Mon, 29 Jul 2024 14:23:39 +0200 Subject: [PATCH 14/60] feat: ensure that the routes show only the needed space when a few routes available --- packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx | 2 +- packages/widget/src/components/Routes/RoutesExpanded.style.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx b/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx index 511e001aa..b5bf2851a 100644 --- a/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx +++ b/packages/widget/src/components/RouteCard/RouteCardSkeleton.tsx @@ -11,7 +11,7 @@ export const RouteCardSkeleton: React.FC< const { subvariant } = useWidgetConfig(); const cardContent = ( - + {subvariant !== 'refuel' && subvariant !== 'custom' ? ( ({ zIndex: 0, ...(theme.container.display === 'flex' - ? { display: 'flex', height: '100%' } + ? { display: 'flex', maxHeight: '100%' } : {}), })); From b78d18112cf0bc956807ca03c849b34d3177babd Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Mon, 29 Jul 2024 15:26:02 +0200 Subject: [PATCH 15/60] feat: ensure sticky headers still work --- .../src/components/Widget/WidgetView.style.tsx | 2 ++ .../src/components/Widget/WidgetViewContainer.tsx | 4 ++-- packages/widget/src/components/AppContainer.tsx | 8 +++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 5dac1ae25..4201ebd52 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -49,6 +49,8 @@ export const WidgetContainerRow = styled(Box)(({ alignItems: alignTop ? 'flex-start' : 'center', flexGrow: 1, width: '100%', + // note: this is needed to keep the sticky headers working + height: 0, }; }); diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 5be54fd60..459f29895 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -57,13 +57,13 @@ export function WidgetViewContainer({ id="widget-container" fullHeightView={ config?.theme?.container?.height === '100vh' || - config?.theme?.container?.height === '100%' + config?.theme?.container?.height === '100%' || + config?.theme?.container?.display === 'flex' } alignTop={config?.theme?.container?.display === 'flex'} > {showMockHeader ? Mock header : null} {children} diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 8301f756c..5657a649e 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -30,9 +30,11 @@ export const RelativeContainer = styled(Box, { minWidth: theme.breakpoints.values.xs, maxWidth: theme.breakpoints.values.sm, maxHeight: - variant === 'drawer' || theme.container?.display === 'flex' + variant === 'drawer' ? 'none' - : theme.container?.height || maxHeight, + : theme.container?.display === 'flex' + ? '100%' + : theme.container?.height || maxHeight, background: theme.palette.background.default, overflow: 'auto', flex: 1, @@ -54,7 +56,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, { ? 'none' : theme.container?.height || maxHeight, overflowY: 'auto', - height: '100%', + height: theme.container?.display === 'flex' ? 'auto' : '100%', })); export const FlexContainer = styled(Container)({ From 9835203d1d91ab0b8f0f01a967451d1ed8605027 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Mon, 29 Jul 2024 17:22:36 +0200 Subject: [PATCH 16/60] chore: clean up flex layout --- .../src/components/Widget/WidgetView.style.tsx | 2 -- .../src/components/Widget/WidgetViewContainer.tsx | 5 +++-- packages/widget-playground/src/defaultWidgetConfig.ts | 1 + packages/widget/src/components/AppContainer.tsx | 2 +- .../widget/src/components/Routes/RoutesExpanded.style.ts | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 4201ebd52..5dac1ae25 100644 --- a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx @@ -49,8 +49,6 @@ export const WidgetContainerRow = styled(Box)(({ alignItems: alignTop ? 'flex-start' : 'center', flexGrow: 1, width: '100%', - // note: this is needed to keep the sticky headers working - height: 0, }; }); diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 459f29895..3aa9107fe 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -18,8 +18,8 @@ import { WidgetContainerRow, } from './WidgetView.style'; -const showMockHeader = false; -const showMockFooter = false; +const showMockHeader = true; +const showMockFooter = true; interface WidgetViewContainerProps extends PropsWithChildren { toggleDrawer?(): void; @@ -64,6 +64,7 @@ export function WidgetViewContainer({ > {showMockHeader ? Mock header : null} {children} diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index dd56d7277..30bcbc26b 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -222,6 +222,7 @@ export const defaultWidgetConfig: Partial = { }, container: { display: 'flex', + // height: 800, // height: '100%', // paddingTop: 80, // boxSizing: 'border-box', diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 5657a649e..34426c78e 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -32,7 +32,7 @@ export const RelativeContainer = styled(Box, { maxHeight: variant === 'drawer' ? 'none' - : theme.container?.display === 'flex' + : theme.container?.display === 'flex' && !theme.container?.height ? '100%' : theme.container?.height || maxHeight, background: theme.palette.background.default, diff --git a/packages/widget/src/components/Routes/RoutesExpanded.style.ts b/packages/widget/src/components/Routes/RoutesExpanded.style.ts index 000843138..3e02e1cfb 100644 --- a/packages/widget/src/components/Routes/RoutesExpanded.style.ts +++ b/packages/widget/src/components/Routes/RoutesExpanded.style.ts @@ -6,7 +6,7 @@ export const CollapseContainer = styled(Box)(({ theme }) => ({ zIndex: 0, ...(theme.container.display === 'flex' ? { display: 'flex', maxHeight: '100%' } - : {}), + : { height: maxHeight }), })); export const RoutesExpandedCollapse = styled(Collapse)(({ theme }) => ({ From 0cfc3f73f51e014894c2d953aa1be5e291da590a Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Thu, 1 Aug 2024 17:45:13 +0200 Subject: [PATCH 17/60] feat: sticky-style headers suing fixed position --- .../src/components/Mock/index.tsx | 2 +- .../components/Widget/WidgetViewContainer.tsx | 13 ++++--- .../src/defaultWidgetConfig.ts | 7 +++- .../src/components/Header/Header.style.ts | 38 +++++++++++++------ .../widget/src/components/Header/Header.tsx | 28 ++++++++++---- packages/widget/src/themes/createTheme.ts | 1 + packages/widget/src/themes/types.ts | 2 + packages/widget/src/types/widget.ts | 1 + 8 files changed, 67 insertions(+), 25 deletions(-) diff --git a/packages/widget-playground/src/components/Mock/index.tsx b/packages/widget-playground/src/components/Mock/index.tsx index fb67309c0..5148964dc 100644 --- a/packages/widget-playground/src/components/Mock/index.tsx +++ b/packages/widget-playground/src/components/Mock/index.tsx @@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles'; export const MockElement = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, width: '100%', - height: 40, + height: 48, display: 'flex', justifyContent: 'center', alignItems: 'center', diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 3aa9107fe..6890b8336 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -56,15 +56,18 @@ export function WidgetViewContainer({ - {showMockHeader ? Mock header : null} + {showMockHeader ? ( + + Mock header + + ) : null} {children} diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 30bcbc26b..2c6a2b47a 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -220,10 +220,15 @@ export const defaultWidgetConfig: Partial = { typography: { fontFamily: 'Inter, sans-serif', }, + // allows for positioning to accomodate navigation bar + header: { + position: 'fixed', + top: 48, + }, container: { display: 'flex', // height: 800, - // height: '100%', + height: '100%', // paddingTop: 80, // boxSizing: 'border-box', // height: '100vh', diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts index 2bcaaca79..f17c29a92 100644 --- a/packages/widget/src/components/Header/Header.style.ts +++ b/packages/widget/src/components/Header/Header.style.ts @@ -20,17 +20,33 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({ export const Container = styled(Box, { shouldForwardProp: (prop) => prop !== 'sticky', -})<{ sticky?: boolean }>(({ theme, sticky }) => ({ - display: 'flex', - flexDirection: 'column', - backgroundColor: theme.palette.background.default, - backdropFilter: 'blur(12px)', - position: sticky ? 'sticky' : 'relative', - top: 0, - zIndex: 1200, - gap: theme.spacing(0.5), - padding: theme.spacing(1.5, 3, 1.5, 3), -})); +})<{ sticky?: boolean }>(({ theme, sticky }) => { + return { + display: 'flex', + flexDirection: 'column', + backgroundColor: theme.palette.background.default, + backdropFilter: 'blur(12px)', + position: sticky ? 'sticky' : 'relative', + top: 0, + zIndex: 1200, + gap: theme.spacing(0.5), + padding: theme.spacing(1.5, 3, 1.5, 3), + ...theme.header, + ...(theme.header?.position === 'fixed' + ? { + minWidth: theme.breakpoints.values.xs, + maxWidth: theme.breakpoints.values.sm, + width: '100%', + } + : {}), + }; +}); + +export const ContainerPlaceholder = styled(Box)(({ theme }) => { + return { + ...(theme.header?.position === 'fixed' ? {} : { display: 'none' }), + }; +}); export const WalletButton = styled(Button, { shouldForwardProp: (prop) => prop !== 'subvariant', diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx index 5b8aad99b..f510faab8 100644 --- a/packages/widget/src/components/Header/Header.tsx +++ b/packages/widget/src/components/Header/Header.tsx @@ -1,22 +1,36 @@ import type { FC, PropsWithChildren } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'; import { ElementId, createElementId } from '../../utils/elements.js'; import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'; -import { Container } from './Header.style.js'; +import { Container, ContainerPlaceholder } from './Header.style.js'; import { NavigationHeader } from './NavigationHeader.js'; import { WalletHeader } from './WalletHeader.js'; export const HeaderContainer: FC> = ({ children }) => { const { pathname } = useLocation(); const elementId = useDefaultElementId(); + const headerContainerRef = useRef(undefined); + const [headerHeight, setHeaderHeight] = useState(0); + + useEffect(() => { + if (headerContainerRef.current) { + setHeaderHeight(headerContainerRef.current.clientHeight); + } + }, [headerContainerRef]); + return ( - pathname.includes(route))} - > - {children} - + <> + pathname.includes(route))} + > + {children} + +   + ); }; diff --git a/packages/widget/src/themes/createTheme.ts b/packages/widget/src/themes/createTheme.ts index 8a166026b..f26588973 100644 --- a/packages/widget/src/themes/createTheme.ts +++ b/packages/widget/src/themes/createTheme.ts @@ -65,6 +65,7 @@ export const createTheme = ( return createMuiTheme({ container: widgetTheme.container, + header: widgetTheme.header, navigation: { edge: true, ...widgetTheme.navigation, diff --git a/packages/widget/src/themes/types.ts b/packages/widget/src/themes/types.ts index e7fef87fd..dd06bd27f 100644 --- a/packages/widget/src/themes/types.ts +++ b/packages/widget/src/themes/types.ts @@ -26,11 +26,13 @@ declare module '@mui/material/styles' { interface Theme { shape: Shape; container: CSSProperties; + header: CSSProperties; navigation: NavigationProps; } interface ThemeOptions { shape?: Partial; container?: CSSProperties; + header?: CSSProperties; navigation?: NavigationProps; } interface ComponentNameToClassKey { diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 83b863325..72382ca0c 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -62,6 +62,7 @@ export type WidgetTheme = { typography?: TypographyOptions; components?: WidgetThemeComponents; container?: CSSProperties; + header?: CSSProperties; playground?: CSSProperties; navigation?: NavigationProps; }; From a9c64bc02a5e497b24e6851d481b0bd94ca73773 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Thu, 1 Aug 2024 20:46:12 +0200 Subject: [PATCH 18/60] feat: small token list hight for mobile --- .../widget-playground-vite/vite.config.ts | 40 +++++++++---------- .../components/Widget/WidgetViewContainer.tsx | 13 +++--- .../src/defaultWidgetConfig.ts | 16 ++++---- .../widget/src/hooks/useTokenListHeight.ts | 9 ++++- 4 files changed, 42 insertions(+), 36 deletions(-) diff --git a/packages/widget-playground-vite/vite.config.ts b/packages/widget-playground-vite/vite.config.ts index 8ccd653d8..9fcf3fbc1 100644 --- a/packages/widget-playground-vite/vite.config.ts +++ b/packages/widget-playground-vite/vite.config.ts @@ -1,4 +1,4 @@ -import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; +// import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; import react from '@vitejs/plugin-react-swc'; import { defineConfig } from 'vite'; import { nodePolyfills } from 'vite-plugin-node-polyfills'; @@ -7,25 +7,25 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills'; // eslint-disable-next-line import/no-default-export export default defineConfig({ plugins: [nodePolyfills(), react()], - esbuild: { - target: 'esnext', - }, - build: { - sourcemap: true, - }, - optimizeDeps: { - esbuildOptions: { - define: { - global: 'globalThis', - }, - plugins: [ - NodeGlobalsPolyfillPlugin({ - process: true, - buffer: true, - }), - ], - }, - }, + // esbuild: { + // target: 'esnext', + // }, + // build: { + // sourcemap: true, + // }, + // optimizeDeps: { + // esbuildOptions: { + // define: { + // global: 'globalThis', + // }, + // plugins: [ + // NodeGlobalsPolyfillPlugin({ + // process: true, + // buffer: true, + // }), + // ], + // }, + // }, server: { port: 3000, open: true, diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 6890b8336..daf15b8d8 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -18,9 +18,6 @@ import { WidgetContainerRow, } from './WidgetView.style'; -const showMockHeader = true; -const showMockFooter = true; - interface WidgetViewContainerProps extends PropsWithChildren { toggleDrawer?(): void; } @@ -56,12 +53,14 @@ export function WidgetViewContainer({ - {showMockHeader ? ( + {config?.mobileLayout ? ( Mock header @@ -72,7 +71,7 @@ export function WidgetViewContainer({ > {children} - {showMockFooter ? Mock footer : null} + {config?.mobileLayout ? Mock footer : null} diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index 2c6a2b47a..db2d692d2 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -220,15 +220,15 @@ export const defaultWidgetConfig: Partial = { typography: { fontFamily: 'Inter, sans-serif', }, - // allows for positioning to accomodate navigation bar - header: { - position: 'fixed', - top: 48, - }, + // allows for positioning to accommodate navigation bar + // header: { + // position: 'fixed', + // top: 48, + // }, container: { - display: 'flex', - // height: 800, - height: '100%', + // display: 'flex', + // height: '100%', + // height: 1000, // paddingTop: 80, // boxSizing: 'border-box', // height: '100vh', diff --git a/packages/widget/src/hooks/useTokenListHeight.ts b/packages/widget/src/hooks/useTokenListHeight.ts index 5662cfde1..0d86f65f6 100644 --- a/packages/widget/src/hooks/useTokenListHeight.ts +++ b/packages/widget/src/hooks/useTokenListHeight.ts @@ -1,5 +1,6 @@ import type { MutableRefObject } from 'react'; import { useLayoutEffect, useState } from 'react'; +import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; import { ElementId, createElementId } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; @@ -49,6 +50,7 @@ interface UseContentHeightProps { } const minTokenListHeight = 360; +const minMobileTokenListHeight = 160; export const useTokenListHeight = ({ listParentRef, @@ -56,6 +58,7 @@ export const useTokenListHeight = ({ }: UseContentHeightProps) => { const elementId = useDefaultElementId(); const [contentHeight, setContentHeight] = useState(0); + const { mobileLayout } = useWidgetConfig(); useLayoutEffect(() => { const handleResize = () => { @@ -71,8 +74,12 @@ export const useTokenListHeight = ({ }; }, [elementId, listParentRef]); + const minListHeight = mobileLayout + ? minMobileTokenListHeight + : minTokenListHeight; + return Math.max( contentHeight - (headerRef.current?.offsetHeight ?? 0), - minTokenListHeight, + minListHeight, ); }; From 27bd21c8e4786c8d4819b2c1afdb1a40985ad115 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 2 Aug 2024 15:09:06 +0200 Subject: [PATCH 19/60] feat: improve mobile layout for bookmark pages --- .../widget-playground-vite/vite.config.ts | 40 +++++----- .../BookmarkStoreControls.tsx | 73 +++++++++++++++++++ .../PlaygroundSettingsControl.tsx | 17 +++++ .../ViewportColorSelector.tsx} | 20 +---- .../DrawerControls/DesignControls/index.ts | 2 +- .../src/defaultWidgetConfig.ts | 17 ++--- packages/widget-playground/src/hooks/index.ts | 1 + .../widget-playground/src/hooks/useDevView.ts | 8 ++ .../pages/SelectTokenPage/SelectTokenPage.tsx | 2 +- .../SelectTokenPage}/useTokenListHeight.ts | 13 ++-- .../src/pages/SendToWallet/BookmarksPage.tsx | 26 ++++--- .../SendToWallet/SendToWalletPage.style.tsx | 20 +---- packages/widget/src/types/widget.ts | 1 - 13 files changed, 159 insertions(+), 81 deletions(-) create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx create mode 100644 packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx rename packages/widget-playground/src/components/DrawerControls/DesignControls/{PlaygroundSettingsControl.tsx => PlaygroundSettingsControl/ViewportColorSelector.tsx} (67%) create mode 100644 packages/widget-playground/src/hooks/useDevView.ts rename packages/widget/src/{hooks => pages/SelectTokenPage}/useTokenListHeight.ts (91%) diff --git a/packages/widget-playground-vite/vite.config.ts b/packages/widget-playground-vite/vite.config.ts index 9fcf3fbc1..8ccd653d8 100644 --- a/packages/widget-playground-vite/vite.config.ts +++ b/packages/widget-playground-vite/vite.config.ts @@ -1,4 +1,4 @@ -// import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; +import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; import react from '@vitejs/plugin-react-swc'; import { defineConfig } from 'vite'; import { nodePolyfills } from 'vite-plugin-node-polyfills'; @@ -7,25 +7,25 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills'; // eslint-disable-next-line import/no-default-export export default defineConfig({ plugins: [nodePolyfills(), react()], - // esbuild: { - // target: 'esnext', - // }, - // build: { - // sourcemap: true, - // }, - // optimizeDeps: { - // esbuildOptions: { - // define: { - // global: 'globalThis', - // }, - // plugins: [ - // NodeGlobalsPolyfillPlugin({ - // process: true, - // buffer: true, - // }), - // ], - // }, - // }, + esbuild: { + target: 'esnext', + }, + build: { + sourcemap: true, + }, + optimizeDeps: { + esbuildOptions: { + define: { + global: 'globalThis', + }, + plugins: [ + NodeGlobalsPolyfillPlugin({ + process: true, + buffer: true, + }), + ], + }, + }, server: { port: 3000, open: true, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx new file mode 100644 index 000000000..956ff2f14 --- /dev/null +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/BookmarkStoreControls.tsx @@ -0,0 +1,73 @@ +import { ChainType } from '@lifi/types'; +import type { BookmarkProps } from '@lifi/widget/stores/bookmarks/types'; +import { Box, Button } from '@mui/material'; +import { useDevView } from '../../../../hooks'; +import { + CapitalizeFirstLetter, + ColorSelectorContainer, +} from '../DesignControls.style'; + +interface StoreProp { + state: BookmarkProps; + version: number; +} + +const store = { + state: { + bookmarks: [], + recentWallets: [], + }, + version: 0, +}; + +const fillBookmarks = (store: StoreProp, num: number) => { + for (let i = 0; i < num; i++) { + store.state.bookmarks.push({ + name: `asdf ${i}`, + address: `0x29DaCdF7cCaDf4eE67c923b4C22255A4B2494e${i}`, + chainType: ChainType.EVM, + }); + } + + return store; +}; + +const fillRecents = (store: StoreProp, num: number) => { + for (let i = 0; i < num; i++) { + store.state.recentWallets.push({ + address: `0x29DaCdF7cCaDf4eE67c923b4C22255A4B2494e${i}`, + chainType: ChainType.EVM, + }); + } + + return store; +}; + +export const BookmarkStoreControls = () => { + const { isDevView } = useDevView(); + + const handleFill = () => { + const newState = fillRecents(fillBookmarks(store, 50), 50); + localStorage.setItem('li.fi-bookmarks', JSON.stringify(newState)); + window.location.reload(); + }; + + const handleEmpty = () => { + localStorage.setItem('li.fi-bookmarks', JSON.stringify(store)); + window.location.reload(); + }; + + return isDevView ? ( + + Bookmark store + + + + + + ) : null; +}; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx new file mode 100644 index 000000000..623f6d391 --- /dev/null +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx @@ -0,0 +1,17 @@ +import SettingsIcon from '@mui/icons-material/Settings'; +import { ExpandableCard } from '../../../Card'; +import { BookmarkStoreControls } from './BookmarkStoreControls'; +import { ViewportColorSelector } from './ViewportColorSelector'; + +export const PlaygroundSettingsControl = () => { + return ( + } + alwaysShowTitleValue + > + + + + ); +}; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/ViewportColorSelector.tsx similarity index 67% rename from packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx rename to packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/ViewportColorSelector.tsx index c188f056d..649db0927 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/ViewportColorSelector.tsx @@ -1,29 +1,15 @@ -import SettingsIcon from '@mui/icons-material/Settings'; import type { BoxProps } from '@mui/material'; import { useTheme } from '@mui/material'; import { useEditToolsActions, usePlaygroundSettingValues, -} from '../../../store'; -import { safe6DigitHexColor } from '../../../utils'; -import { ExpandableCard } from '../../Card'; +} from '../../../../store'; +import { safe6DigitHexColor } from '../../../../utils'; import { CapitalizeFirstLetter, ColorInput, ColorSelectorContainer, -} from './DesignControls.style'; - -export const PlaygroundSettingsControl = () => { - return ( - } - alwaysShowTitleValue - > - - - ); -}; +} from '../DesignControls.style'; export const ViewportColorSelector = ({ ...rest }: BoxProps) => { const theme = useTheme(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts index 094e6c362..0e106740c 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/index.ts @@ -4,7 +4,7 @@ export * from './CardRadiusControl'; export * from './ColorControls'; export * from './DesignControls.style'; export * from './FontsControl'; -export * from './PlaygroundSettingsControl'; +export * from './PlaygroundSettingsControl/PlaygroundSettingsControl'; export * from './SkeletonControl'; export * from './SubvariantControl'; export * from './ThemeControl'; diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index db2d692d2..6726639d0 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -206,8 +206,7 @@ export const widgetBaseConfig: WidgetConfig = { export const defaultWidgetConfig: Partial = { ...widgetBaseConfig, appearance: 'auto', - // mobileLayout: true, - // bookmarkListHeight: 800, + mobileLayout: true, theme: { palette: { primary: { @@ -220,14 +219,14 @@ export const defaultWidgetConfig: Partial = { typography: { fontFamily: 'Inter, sans-serif', }, - // allows for positioning to accommodate navigation bar - // header: { - // position: 'fixed', - // top: 48, - // }, + // allows for positioning of header to accommodate navigation bar + header: { + position: 'fixed', + top: 48, + }, container: { - // display: 'flex', - // height: '100%', + display: 'flex', + height: '100%', // height: 1000, // paddingTop: 80, // boxSizing: 'border-box', diff --git a/packages/widget-playground/src/hooks/index.ts b/packages/widget-playground/src/hooks/index.ts index 3dbb8f020..24a3fc558 100644 --- a/packages/widget-playground/src/hooks/index.ts +++ b/packages/widget-playground/src/hooks/index.ts @@ -1 +1,2 @@ +export * from './useDevView'; export * from './useThemeMode'; diff --git a/packages/widget-playground/src/hooks/useDevView.ts b/packages/widget-playground/src/hooks/useDevView.ts new file mode 100644 index 000000000..ff951bcaa --- /dev/null +++ b/packages/widget-playground/src/hooks/useDevView.ts @@ -0,0 +1,8 @@ +export const useDevView = () => { + const urlParams = new URLSearchParams(window.location.search); + const isDevView = !!urlParams.get('devView') || false; + + return { + isDevView, + }; +}; diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index fd0502f5c..51dad33fa 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -9,10 +9,10 @@ import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; -import { useTokenListHeight } from '../../hooks/useTokenListHeight.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { FormTypeProps } from '../../stores/form/types.js'; import { SearchTokenInput } from './SearchTokenInput.js'; +import { useTokenListHeight } from './useTokenListHeight.js'; export const SelectTokenPage: FC = ({ formType }) => { useScrollableOverflowHidden(); diff --git a/packages/widget/src/hooks/useTokenListHeight.ts b/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts similarity index 91% rename from packages/widget/src/hooks/useTokenListHeight.ts rename to packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts index 0d86f65f6..37f6d2d8b 100644 --- a/packages/widget/src/hooks/useTokenListHeight.ts +++ b/packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts @@ -1,8 +1,8 @@ import type { MutableRefObject } from 'react'; import { useLayoutEffect, useState } from 'react'; -import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; -import { ElementId, createElementId } from '../utils/elements.js'; -import { useDefaultElementId } from './useDefaultElementId.js'; +import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; +import { ElementId, createElementId } from '../../utils/elements.js'; const getContentHeight = ( elementId: string, @@ -12,6 +12,10 @@ const getContentHeight = ( createElementId(ElementId.ScrollableContainer, elementId), ); + const headerElement = document.getElementById( + createElementId(ElementId.Header, elementId), + ); + const listParentElement = listParentRef?.current; let oldHeight; @@ -23,9 +27,6 @@ const getContentHeight = ( listParentElement.style.height = '0'; } - const headerElement = document.getElementById( - createElementId(ElementId.Header, elementId), - ); if (!containerElement || !headerElement) { console.warn( `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`, diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index 202d9ddd9..59ff9197c 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -35,9 +35,11 @@ import { SendToWalletPageContainer, } from './SendToWalletPage.style.js'; +const mobileMinListHeight = 360; + export const BookmarksPage = () => { const { t } = useTranslation(); - const { mobileLayout, bookmarkListHeight, theme } = useWidgetConfig(); + const { mobileLayout } = useWidgetConfig(); const [bookmark, setBookmark] = useState(); const bookmarkAddressSheetRef = useRef(null); const { bookmarks } = useBookmarks(); @@ -107,19 +109,25 @@ export const BookmarksPage = () => { return ( {bookmarks.map((bookmark) => ( @@ -197,7 +205,7 @@ export const BookmarksPage = () => { - + diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx index f4da01e4e..6a2ad2cf9 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx @@ -1,4 +1,3 @@ -import type { BoxProps } from '@mui/material'; import { Alert, Box, @@ -93,31 +92,18 @@ export const SheetAddressContainer = styled(Box)(() => ({ export const ListContainer = styled(List)(({ theme }) => ({ display: 'flex', flexDirection: 'column', - paddingTop: 0, - paddingBottom: theme.spacing(1.5), + padding: 0, minHeight: 400, })); -interface BookmarkButtonContainerProps extends BoxProps { - mobileLayout?: boolean; -} - -export const BookmarkButtonContainer = styled( - Box, -)(({ theme, mobileLayout }) => ({ +export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({ background: theme.palette.background.default, display: 'flex', flexDirection: 'column', bottom: 0, padding: theme.spacing(0, 3, 3), zIndex: 2, - ...(mobileLayout - ? { - position: 'fixed', - minWidth: theme.breakpoints.values.xs, - maxWidth: theme.breakpoints.values.sm, - } - : { position: 'sticky' }), + position: 'sticky', width: '100%', })); diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 72382ca0c..9273809f9 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -129,7 +129,6 @@ export interface AllowDeny { export interface WidgetConfig { mobileLayout?: boolean; - bookmarkListHeight?: number; fromChain?: number; toChain?: number; fromToken?: string; From a8c9361acd1abafb25a422bc4e050297a869039e Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Mon, 5 Aug 2024 13:48:12 +0200 Subject: [PATCH 20/60] feat: adjust the chains select on mobile --- .../ChainSelect/MobileChainSelect.style.tsx | 17 +++ .../ChainSelect/MobileChainSelect.tsx | 104 ++++++++++++++++++ .../pages/SelectTokenPage/SelectTokenPage.tsx | 11 +- 3 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 packages/widget/src/components/ChainSelect/MobileChainSelect.style.tsx create mode 100644 packages/widget/src/components/ChainSelect/MobileChainSelect.tsx diff --git a/packages/widget/src/components/ChainSelect/MobileChainSelect.style.tsx b/packages/widget/src/components/ChainSelect/MobileChainSelect.style.tsx new file mode 100644 index 000000000..274976470 --- /dev/null +++ b/packages/widget/src/components/ChainSelect/MobileChainSelect.style.tsx @@ -0,0 +1,17 @@ +import { Box, styled } from '@mui/material'; +import { Card } from '../../components/Card/Card.js'; + +export const MobileChainCard = styled(Card)({ + display: 'grid', + placeItems: 'center', + minWidth: 40, + height: 52, +}); + +export const MobileChainContainer = styled(Box)(({ theme }) => ({ + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(47px, 1fr))', + gridAutoRows: '52px', + justifyContent: 'space-between', + gap: theme.spacing(0.75), +})); diff --git a/packages/widget/src/components/ChainSelect/MobileChainSelect.tsx b/packages/widget/src/components/ChainSelect/MobileChainSelect.tsx new file mode 100644 index 000000000..a39a5bbc8 --- /dev/null +++ b/packages/widget/src/components/ChainSelect/MobileChainSelect.tsx @@ -0,0 +1,104 @@ +/* eslint-disable react/no-array-index-key */ +import type { EVMChain } from '@lifi/sdk'; +import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material'; +import { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import type { FormTypeProps } from '../../stores/form/types.js'; +import { FormKeyHelper } from '../../stores/form/types.js'; +import { useFieldValues } from '../../stores/form/useFieldValues.js'; +import { navigationRoutes } from '../../utils/navigationRoutes.js'; +import { + MobileChainCard, + MobileChainContainer, +} from './MobileChainSelect.style.js'; +import { useChainSelect } from './useChainSelect.js'; + +const mobileMaxChainsToShow = 6; +const mobileMaxChainsToOrder = 5; + +export const MobileChainSelect = ({ formType }: FormTypeProps) => { + const navigate = useNavigate(); + const { + chainOrder, + chains, + getChains, + isLoading, + setChainOrder, + setCurrentChain, + } = useChainSelect(formType); + + const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType)); + + useEffect(() => { + if (chainId) { + const hasChainInOrderedList = chainOrder.includes(chainId); + // If we don't have a chain in the ordered chain list we should add it. + if (!hasChainInOrderedList) { + setChainOrder(chainId, formType); + } + } + }, [chainId, chainOrder, formType, setChainOrder]); + + const showAllChains = () => { + navigate(navigationRoutes[`${formType}Chain`]); + }; + + // We check if we can accommodate all the chains on the grid + // If there are more than 10 chains we show the number of hidden chains as the last one tile + const chainsToHide = + chains?.length === mobileMaxChainsToShow + ? 0 + : (chains?.length ?? 0) - mobileMaxChainsToOrder; + + // When there is less than 10 chains we don't care about the order + const chainsToShow = chainsToHide > 0 ? getChains() : chains; + + return ( + + {isLoading + ? Array.from({ length: mobileMaxChainsToOrder }).map((_, index) => ( + + )) + : chainsToShow + ?.slice(0, mobileMaxChainsToOrder) + .map((chain: EVMChain) => ( + + setCurrentChain(chain.id)} + type={chainId === chain.id ? 'selected' : 'default'} + selectionColor="primary" + > + + {chain.name[0]} + + + + ))} + {chainsToHide > 0 ? ( + + + +{chainsToHide} + + + ) : null} + + ); +}; diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index 51dad33fa..a10fe3f61 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -3,6 +3,7 @@ import type { FC } from 'react'; import { useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'; +import { MobileChainSelect } from '../../components/ChainSelect/MobileChainSelect.js'; import { PageContainer } from '../../components/PageContainer.js'; import { TokenList } from '../../components/TokenList/TokenList.js'; import { useHeader } from '../../hooks/useHeader.js'; @@ -23,7 +24,7 @@ export const SelectTokenPage: FC = ({ formType }) => { const swapOnly = useSwapOnly(); - const { subvariant } = useWidgetConfig(); + const { subvariant, mobileLayout } = useWidgetConfig(); const { t } = useTranslation(); const title = formType === 'from' @@ -39,7 +40,13 @@ export const SelectTokenPage: FC = ({ formType }) => { return ( - {!hideChainSelect ? : null} + {!hideChainSelect ? ( + mobileLayout ? ( + + ) : ( + + ) + ) : null} From 0af090c60d215d974ba7730f5f6b2b5ff46e93ad Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Mon, 5 Aug 2024 14:25:28 +0200 Subject: [PATCH 21/60] fix: transaction details page after merge --- .../TransactionDetailsPage/TransactionDetailsPage.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 73411dab2..a4e2840fd 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -26,8 +26,7 @@ import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); const { navigate } = useNavigateBack(); - const { subvariant, contractSecondaryComponent, mobileLayout } = - useWidgetConfig(); + const { subvariant, contractSecondaryComponent } = useWidgetConfig(); const { state }: any = useLocation(); const { tools } = useTools(); const storedRouteExecution = useRouteExecutionStore( @@ -86,14 +85,10 @@ export const TransactionDetailsPage: React.FC = () => { return isLoading && !storedRouteExecution ? ( ) : ( - + Date: Mon, 5 Aug 2024 15:00:03 +0200 Subject: [PATCH 22/60] feat: update page meta for viewport --- packages/widget-playground-vite/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/widget-playground-vite/index.html b/packages/widget-playground-vite/index.html index ff82c49c2..4733bd9a1 100644 --- a/packages/widget-playground-vite/index.html +++ b/packages/widget-playground-vite/index.html @@ -4,7 +4,7 @@ - +