chore: update package dependencies and enhance UI components with imp…

…roved theming and layout adjustments across the Dodoex widgets
DODOEX · Jan 13, 2025 · 30ab5c4 · 30ab5c4
1 parent d16a3fc
commit 30ab5c4
Show file tree

Hide file tree

Showing 17 changed files with 534 additions and 462 deletions.
diff --git a/packages/doc/package.json b/packages/doc/package.json
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",
-    "@dodoex/components": "^3.0.1-beta.1",
-    "@dodoex/widgets": "^3.0.1",
+    "@dodoex/components": "3.0.1-beta.1",
+    "@dodoex/widgets": "3.0.2-neox.1",
     "@emotion/styled": "^11.10.0",
     "@storybook/addon-docs": "^8.3.5",
     "@web3modal/ethers5": "^3.5.5",

diff --git a/packages/dodoex-widgets/package.json b/packages/dodoex-widgets/package.json
@@ -59,7 +59,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.0",
     "@dodoex/api": "3.0.3-morph.5",
-    "@dodoex/components": "^3.0.1-beta.1",
+    "@dodoex/components": "3.0.1-beta.1",
     "@dodoex/contract-request": "^1.3.0",
     "@dodoex/dodo-contract-request": "^1.9.0-alpha.3",
     "@dodoex/icons": "^2.0.2",

diff --git a/packages/dodoex-widgets/src/components/Swap/components/SwitchBox.tsx b/packages/dodoex-widgets/src/components/Swap/components/SwitchBox.tsx
@@ -26,8 +26,8 @@ export function SwitchBox({
           width: size,
           height: size,
           borderRadius: '50%',
-          backgroundColor: theme.palette.background.input,
-          border: `4px solid ${theme.palette.background.paper}`,
+          backgroundColor: theme.palette.background.paper,
+          border: `4px solid ${theme.palette.background.default}`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',

diff --git a/packages/dodoex-widgets/src/components/Swap/components/TokenCard/index.tsx b/packages/dodoex-widgets/src/components/Swap/components/TokenCard/index.tsx
@@ -1,32 +1,32 @@
+import { ChainId } from '@dodoex/api';
 import {
   Box,
   BoxProps,
-  useTheme,
   Button,
   TooltipToast,
+  useTheme,
 } from '@dodoex/components';
 import { Plus } from '@dodoex/icons';
-import { TokenLogoCollapse } from './TokenLogoCollapse';
-import { BalanceText } from './BalanceText';
-import { NumberInput } from './NumberInput';
-import { TokenPickerDialog } from './TokenPickerDialog';
-import { useState, useEffect, useRef } from 'react';
-import { TokenInfo } from '../../../../hooks/Token';
-import { TokenPickerProps } from '../../../TokenPicker';
-import { transitionTime } from '../Dialog';
+import { Trans } from '@lingui/macro';
 import { useQuery } from '@tanstack/react-query';
+import BigNumber from 'bignumber.js';
+import { useEffect, useRef, useState } from 'react';
 import { tokenApi } from '../../../../constants/api';
 import { useWalletInfo } from '../../../../hooks/ConnectWallet/useWalletInfo';
-import BigNumber from 'bignumber.js';
-import { PercentageSelectButtonGroup } from './PercentageSelectButtonGroup';
-import { Trans } from '@lingui/macro';
-import { ChainId } from '@dodoex/api';
 import {
   BalanceData,
   useBalanceUpdateLoading,
 } from '../../../../hooks/Submission/useBalanceUpdateLoading';
+import { TokenInfo } from '../../../../hooks/Token';
 import { useFetchTokens } from '../../../../hooks/contract';
+import { TokenPickerProps } from '../../../TokenPicker';
 import { useUserOptions } from '../../../UserOptionsProvider';
+import { transitionTime } from '../Dialog';
+import { BalanceText } from './BalanceText';
+import { NumberInput } from './NumberInput';
+import { PercentageSelectButtonGroup } from './PercentageSelectButtonGroup';
+import { TokenLogoCollapse } from './TokenLogoCollapse';
+import { TokenPickerDialog } from './TokenPickerDialog';
 
 export interface TokenCardProps {
   amt: string;
@@ -61,21 +61,6 @@ export interface TokenCardProps {
   notTokenPickerModal?: boolean;
 }
 
-export function CardPlus() {
-  return (
-    <Box
-      sx={{
-        height: 30,
-        textAlign: 'center',
-        fontSize: 32,
-        lineHeight: '30px',
-      }}
-    >
-      +
-    </Box>
-  );
-}
-
 export function CardPlusConnected() {
   return (
     <Box

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolCreate/components/ConfirmInfoDialog.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolCreate/components/ConfirmInfoDialog.tsx
@@ -1,8 +1,9 @@
-import { Button, Box } from '@dodoex/components';
+import { Box, Button } from '@dodoex/components';
 import { t } from '@lingui/macro';
+import Dialog from '../../../../components/Dialog';
 import TokenLogo from '../../../../components/TokenLogo';
-import WidgetDialog from '../../../../components/WidgetDialog';
 import { useWalletInfo } from '../../../../hooks/ConnectWallet/useWalletInfo';
+import { useWidgetDevice } from '../../../../hooks/style/useWidgetDevice';
 import { useCreatePmm } from '../hooks/useCreatePmm';
 import {
   getSubPeggedVersionMap,
@@ -11,8 +12,6 @@ import {
 import { StateProps } from '../reducer';
 import { Version } from '../types';
 import { computeInitPriceText } from '../utils';
-import Dialog from '../../../../components/Dialog';
-import { useWidgetDevice } from '../../../../hooks/style/useWidgetDevice';
 
 function Item({
   label,

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolCreate/components/DepthChartWrapper.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolCreate/components/DepthChartWrapper.tsx
@@ -116,6 +116,7 @@ export function DepthChartWrapper({
             <QuestionTooltip title={titleQuestion} ml={4} />
           </Box>
         }
+        modal
       >
         <Box
           sx={{

diff --git a/...-widgets/src/widgets/PoolWidget/PoolCreate/operate-widgets/SlippageCoefficientSetting.tsx b/...-widgets/src/widgets/PoolWidget/PoolCreate/operate-widgets/SlippageCoefficientSetting.tsx
@@ -1,21 +1,21 @@
 import {
-  Button,
   Box,
-  useTheme,
-  QuestionTooltip,
+  Button,
   ButtonBase,
+  QuestionTooltip,
+  useTheme,
 } from '@dodoex/components';
 import { t, Trans } from '@lingui/macro';
 import { Dispatch, useMemo, useState } from 'react';
-import Dialog from '../../../../components/WidgetDialog';
+import Dialog from '../../../../components/Swap/components/Dialog';
 import RadioButton from '../components/RadioButton';
 import { RadioButtonTag } from '../components/RadioButtonTag';
 import { SelectAndInput } from '../components/SelectAndInput';
 import { useSlippageCoefficientList } from '../hooks/useSlippageCoefficientList';
 import { validSlippageCoefficient } from '../hooks/useValidation';
 import { Actions, StateProps, Types } from '../reducer';
-import { SettingItemWrapper } from './widgets';
 import { ReactComponent as Arrow } from './arrow.svg';
+import { SettingItemWrapper } from './widgets';
 
 export function SlippageCoefficientSetting({
   dispatch,
@@ -139,6 +139,7 @@ export function SlippageCoefficientSetting({
             />
           </Box>
         }
+        modal
       >
         <Box
           sx={{

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/index.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/index.tsx
@@ -125,7 +125,7 @@ export default function PoolList({
               : {
                   display: 'flex',
                   justifyContent: 'space-between',
-                  py: 20,
+                  pb: 20,
                 }
           }
         >
@@ -257,6 +257,7 @@ export default function PoolList({
             sx={{
               backgroundColor: 'background.default',
             }}
+            hidePoolInfo
             {...operatePool}
           />
         ) : (
@@ -268,10 +269,9 @@ export default function PoolList({
               sx={{
                 width: 375,
                 height: 'max-content',
-                backgroundColor: 'background.default',
-                borderRadius: 16,
                 overflow: 'hidden',
               }}
+              hidePoolInfo
             />
           )
         )}

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolModify/index.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolModify/index.tsx
@@ -199,7 +199,19 @@ export default function PoolModify({
 
   return (
     <>
-      <WidgetContainer>
+      <WidgetContainer
+        sx={
+          isMobile
+            ? {
+                padding: 0,
+                backgroundColor: 'transparent',
+              }
+            : {
+                backgroundColor: 'transparent',
+                padding: 0,
+              }
+        }
+      >
         <Box
           sx={{
             display: 'flex',
@@ -219,6 +231,9 @@ export default function PoolModify({
                 mr: 12,
                 flexGrow: 1,
                 display: 'block',
+                padding: 20,
+                borderRadius: 20,
+                backgroundColor: 'background.default',
               }}
             >
               <GoBack />
@@ -271,7 +286,7 @@ export default function PoolModify({
               flexGrow: 1,
               flexShrink: 0,
               flexBasis: 375,
-              backgroundColor: 'background.paper',
+              backgroundColor: 'background.default',
               ...(isMobile
                 ? {
                     width: '100%',
@@ -291,7 +306,7 @@ export default function PoolModify({
                 top: 0,
                 py: 20,
                 px: 20,
-                backgroundColor: theme.palette.background.paper,
+                backgroundColor: theme.palette.background.default,
                 zIndex: 1,
                 ...(isMobile
                   ? {
@@ -359,6 +374,12 @@ export default function PoolModify({
                   }
                   occupiedChainId={chainId}
                   chainId={chainId}
+                  sx={{
+                    backgroundColor: theme.palette.background.paper,
+                  }}
+                  inputSx={{
+                    backgroundColor: 'transparent',
+                  }}
                 />
                 <CardPlusConnected />
                 <TokenCard
@@ -377,6 +398,12 @@ export default function PoolModify({
                   }
                   occupiedChainId={chainId}
                   chainId={chainId}
+                  sx={{
+                    backgroundColor: theme.palette.background.paper,
+                  }}
+                  inputSx={{
+                    backgroundColor: 'transparent',
+                  }}
                 />
               </Box>
             )}
@@ -413,7 +440,7 @@ export default function PoolModify({
 
             <Box
               sx={{
-                pb: 160,
+                pb: 28,
                 [theme.breakpoints.up('tablet')]: {
                   pb: 28,
                 },

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolModify/operate-widgets/FeeRateSetting.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolModify/operate-widgets/FeeRateSetting.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, QuestionTooltip, useTheme } from '@dodoex/components';
 import { t, Trans } from '@lingui/macro';
 import React from 'react';
-import Dialog from '../../../../components/WidgetDialog';
+import Dialog from '../../../../components/Swap/components/Dialog';
 import RadioButton from '../../PoolCreate/components/RadioButton';
 import { RadioButtonTag } from '../../PoolCreate/components/RadioButtonTag';
 import { SelectAndInput } from '../../PoolCreate/components/SelectAndInput';
@@ -98,6 +98,7 @@ export function FeeRateSetting({
             />
           </Box>
         }
+        modal
       >
         <Box
           sx={{

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolOperate/AddPoolOperate.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolOperate/AddPoolOperate.tsx
@@ -1,35 +1,31 @@
 import { PoolApi } from '@dodoex/api';
 import { Box, Button, LoadingSkeleton, useTheme } from '@dodoex/components';
-import { useWeb3React } from '@web3-react/core';
-import React from 'react';
 import {
-  CardPlus,
-  TokenCard,
-} from '../../../components/Swap/components/TokenCard';
-import { useLiquidityOperateAmount } from './hooks/useLiquidityOperateAmount';
-import Ratio from './components/Ratio';
-import SlippageSetting, { useSlipper } from './components/SlippageSetting';
-import ComparePrice from './components/ComparePrice';
-import { OperatePool } from './types';
-import OperateBtn from './components/OperateBtn';
-import { useTokenStatus } from '../../../hooks/Token/useTokenStatus';
+  getUniswapV2Router02ContractAddressByChainId,
+  getUniswapV2Router02FixedFeeContractAddressByChainId,
+} from '@dodoex/dodo-contract-request';
 import { t } from '@lingui/macro';
-import { useComparePrice } from './hooks/useComparePrice';
-import { usePoolBalanceInfo } from '../hooks/usePoolBalanceInfo';
+import { useQuery } from '@tanstack/react-query';
+import { useWeb3React } from '@web3-react/core';
+import React from 'react';
 import Confirm from '../../../components/Confirm';
-import { useOperateLiquidity } from '../hooks/contract/useOperateLiquidity';
-import { SLIPPAGE_PROTECTION } from '../../../constants/pool';
 import ErrorMessageDialog from '../../../components/ErrorMessageDialog';
+import { SwitchBox } from '../../../components/Swap/components/SwitchBox';
+import { TokenCard } from '../../../components/Swap/components/TokenCard';
+import { SLIPPAGE_PROTECTION } from '../../../constants/pool';
+import { useTokenStatus } from '../../../hooks/Token/useTokenStatus';
 import ConfirmDialog from '../AMMV2Create/ConfirmDialog';
-import { useQuery } from '@tanstack/react-query';
-import { poolApi } from '../utils';
+import { useOperateLiquidity } from '../hooks/contract/useOperateLiquidity';
 import { useAMMV2AddLiquidity } from '../hooks/useAMMV2AddLiquidity';
-import { PageType, useRouterStore } from '../../../router';
-import { PoolTab } from '../PoolList/hooks/usePoolListTabs';
-import {
-  getUniswapV2Router02ContractAddressByChainId,
-  getUniswapV2Router02FixedFeeContractAddressByChainId,
-} from '@dodoex/dodo-contract-request';
+import { usePoolBalanceInfo } from '../hooks/usePoolBalanceInfo';
+import { poolApi } from '../utils';
+import ComparePrice from './components/ComparePrice';
+import OperateBtn from './components/OperateBtn';
+import Ratio from './components/Ratio';
+import SlippageSetting, { useSlipper } from './components/SlippageSetting';
+import { useComparePrice } from './hooks/useComparePrice';
+import { useLiquidityOperateAmount } from './hooks/useLiquidityOperateAmount';
+import { OperatePool } from './types';
 
 export function AddPoolOperate({
   submittedBack: submittedBackProps,
@@ -179,17 +175,16 @@ export function AddPoolOperate({
             onInputChange={handleChangeBaseAmount}
             readOnly={balanceInfo.loading || !canOperate}
             sx={{
+              mb: 4,
               backgroundColor: theme.palette.background.paper,
             }}
             inputSx={{
               backgroundColor: 'transparent',
             }}
           />
         )}
-        {onlyShowSide ? '' : <CardPlus />}
-        {onlyShowSide === 'base' ? (
-          ''
-        ) : (
+        {onlyShowSide ? null : <SwitchBox plus />}
+        {onlyShowSide === 'base' ? null : (
           <TokenCard
             amt={quoteAmount}
             token={pool?.quoteToken}
@@ -228,14 +223,9 @@ export function AddPoolOperate({
       {/* footer */}
       <Box
         sx={{
+          pt: 10,
           px: 20,
-          py: 16,
-          position: 'sticky',
-          bottom: 0,
-          borderStyle: 'solid',
-          borderWidth: '1px 0 0',
-          borderColor: 'border.main',
-          backgroundColor: 'background.default',
+          pb: 20,
         }}
       >
         {isShowCompare && (
-Original file line number
+Diff line change
@@ Expand Up / @@ -116,6 +116,7 @@ export function DepthChartWrapper({ @@
                 <QuestionTooltip title={titleQuestion} ml={4} />
               </Box>
             }
+            modal
           >
             <Box
               sx={{
@@ Expand Down @@