chore: update package versions for @dodoex/api, @dodoex/components, a…

…nd @dodoex/widgets to 3.0.3-neox.5, 3.0.2-neox.3, and 3.0.3-neox.8 respectively; enhance GraphQL queries by removing metrom mining APY references; improve UI components with responsive design adjustments and localization updates
DODOEX · Jan 17, 2025 · df6e525 · df6e525
1 parent 5c99900
commit df6e525
Show file tree

Hide file tree

Showing 25 changed files with 124 additions and 80 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.2-neox.2",
-    "@dodoex/widgets": "3.0.3-neox.7",
+    "@dodoex/components": "^3.0.2-neox.3",
+    "@dodoex/widgets": "3.0.3-neox.8",
     "@emotion/styled": "^11.10.0",
     "@storybook/addon-docs": "^8.3.5",
     "@web3modal/ethers5": "^3.5.5",

diff --git a/packages/doc/src/stories/widgets/Config.stories.tsx b/packages/doc/src/stories/widgets/Config.stories.tsx
@@ -146,9 +146,6 @@ export const Primary = ({
             position: 'relative',
             overflowY: 'hidden',
             width: '100%',
-            [theme.breakpoints.up('desktop')]: {
-              width: 1230,
-            },
           }}
         >
           <Swap />

diff --git a/packages/dodoex-api/package.json b/packages/dodoex-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/api",
-  "version": "3.0.3-neox.4",
+  "version": "3.0.3-neox.5",
   "description": "DODO API Kit",
   "source": "src/index.ts",
   "types": "dist/types/index.d.ts",

diff --git a/packages/dodoex-api/src/gql/gql.ts b/packages/dodoex-api/src/gql/gql.ts
diff --git a/packages/dodoex-api/src/gql/graphql.ts b/packages/dodoex-api/src/gql/graphql.ts
@@ -20944,7 +20944,6 @@ export type FetchLiquidityListQuery = {
           miningQuoteApy?: any | null;
           transactionBaseApy?: any | null;
           transactionQuoteApy?: any | null;
-          metromMiningApy?: any | null;
         } | null;
       } | null;
     } | null> | null;
@@ -21021,7 +21020,6 @@ export type FetchMyLiquidityListQuery = {
           miningQuoteApy?: any | null;
           transactionBaseApy?: any | null;
           transactionQuoteApy?: any | null;
-          metromMiningApy?: any | null;
         } | null;
       } | null;
     } | null> | null;
@@ -21110,7 +21108,6 @@ export type FetchPoolQuery = {
           miningQuoteApy?: any | null;
           transactionBaseApy?: any | null;
           transactionQuoteApy?: any | null;
-          metromMiningApy?: any | null;
         } | null;
       } | null;
     } | null> | null;
@@ -21796,7 +21793,6 @@ export const FetchLiquidityListDocument = new TypedDocumentString(`
           miningQuoteApy
           transactionBaseApy
           transactionQuoteApy
-          metromMiningApy
         }
         miningAddress
         volume24H
@@ -21879,7 +21875,6 @@ export const FetchMyLiquidityListDocument = new TypedDocumentString(`
           miningQuoteApy
           transactionBaseApy
           transactionQuoteApy
-          metromMiningApy
         }
         miningAddress
         volume24H
@@ -21972,7 +21967,6 @@ export const FetchPoolDocument = new TypedDocumentString(`
           miningQuoteApy
           transactionBaseApy
           transactionQuoteApy
-          metromMiningApy
         }
         miningAddress
       }

diff --git a/packages/dodoex-api/src/services/pool/graphqlQuery.ts b/packages/dodoex-api/src/services/pool/graphqlQuery.ts
@@ -91,7 +91,6 @@ export const poolGraphqlQuery = {
               miningQuoteApy
               transactionBaseApy
               transactionQuoteApy
-              metromMiningApy
             }
             miningAddress
             volume24H
@@ -171,7 +170,6 @@ export const poolGraphqlQuery = {
               miningQuoteApy
               transactionBaseApy
               transactionQuoteApy
-              metromMiningApy
             }
             miningAddress
             volume24H
@@ -262,7 +260,6 @@ export const poolGraphqlQuery = {
               miningQuoteApy
               transactionBaseApy
               transactionQuoteApy
-              metromMiningApy
             }
             miningAddress
           }

diff --git a/packages/dodoex-components/package.json b/packages/dodoex-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/components",
-  "version": "3.0.2-neox.2",
+  "version": "3.0.2-neox.3",
   "description": "UI component library",
   "source": "src/index.ts",
   "types": "dist/types/index.d.ts",

diff --git a/packages/dodoex-components/src/Modal/Modal.tsx b/packages/dodoex-components/src/Modal/Modal.tsx
@@ -1,5 +1,5 @@
 import { Modal as ModalUnstyled } from '@mui/base/Modal';
-import { Box, styled } from '@mui/system';
+import { Box, BoxProps, styled } from '@mui/system';
 import type { ModalProps } from '@mui/base/Modal';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
@@ -47,7 +47,14 @@ const StyledBackdrop = styled(Backdrop)`
 
 export const WIDGET_MODAL_FIXED_CLASS = 'dodo-widget-modal-fixed';
 
-export default function Modal({ slots, children, ...props }: ModalProps) {
+export default function Modal({
+  slots,
+  containerSx,
+  children,
+  ...props
+}: ModalProps & {
+  containerSx?: BoxProps['sx'];
+}) {
   const { isMobile } = useMediaDevices();
   const theme = useTheme();
   return (
@@ -63,6 +70,7 @@ export default function Modal({ slots, children, ...props }: ModalProps) {
           overflowY: 'auto',
           borderRadius: isMobile ? theme.spacing(20, 20, 0, 0) : 20,
           boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.15)',
+          ...containerSx,
         }}
       >
         {children}

diff --git a/packages/dodoex-widgets/package.json b/packages/dodoex-widgets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/widgets",
-  "version": "3.0.3-neox.7",
+  "version": "3.0.3-neox.9",
   "description": "DODO Widgets",
   "source": "src/index.tsx",
   "types": "dist/types/index.d.ts",
@@ -58,8 +58,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",
-    "@dodoex/api": "3.0.3-neox.4",
-    "@dodoex/components": "3.0.2-neox.2",
+    "@dodoex/api": "3.0.3-neox.5",
+    "@dodoex/components": "3.0.2-neox.3",
     "@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/CardWidgets.tsx b/packages/dodoex-widgets/src/components/CardWidgets.tsx
@@ -29,7 +29,6 @@ export function CardStatus({
   children,
   refetch,
 }: React.PropsWithChildren<{
-  isMobile?: boolean;
   loading: boolean;
   empty: boolean;
   hasSearch?: boolean;

diff --git a/packages/dodoex-widgets/src/components/Swap/SwapOrderHistory/index.tsx b/packages/dodoex-widgets/src/components/Swap/SwapOrderHistory/index.tsx
@@ -19,32 +19,31 @@ export default function SwapOrderHistory({
 }) {
   const theme = useTheme();
   const { onlyChainId } = useUserOptions();
-  const { isDesktop } = useWidgetDevice();
+  const { isLaptop } = useWidgetDevice();
   const { account } = useWeb3React();
   const [filterChainId, setFilterChainId] = React.useState<
     ChainId | undefined
   >();
   const swapOrderListQueryLocal = useTradeSwapOrderList({
     account: swapOrderListQueryProps ? undefined : account,
     chainId: onlyChainId ?? filterChainId,
-    limit: isDesktop ? 5 : 10,
+    limit: isLaptop ? 5 : 10,
   });
   const swapOrderListQuery = swapOrderListQueryProps ?? swapOrderListQueryLocal;
 
   return (
     <CardStatus
-      isMobile={!isDesktop}
       empty={!swapOrderListQuery.orderList.length}
       loading={swapOrderListQuery.isLoading}
     >
-      {!isDesktop ? (
+      {!isLaptop ? (
         <Box
           sx={{
             px: 0,
           }}
         >
           {swapOrderListQuery.orderList.map((item) => (
-            <SameOrderCard key={item.hash} data={item} isMobile={!isDesktop} />
+            <SameOrderCard key={item.hash} data={item} isMobile={!isLaptop} />
           ))}
           <LoadMore
             loading={swapOrderListQuery.isFetchingNextPage}
@@ -120,7 +119,7 @@ export default function SwapOrderHistory({
                 <SameOrderCard
                   key={item.hash}
                   data={item}
-                  isMobile={!isDesktop}
+                  isMobile={!isLaptop}
                 />
               ))}
             </tbody>

diff --git a/packages/dodoex-widgets/src/components/Swap/assets/subtract-sm.svg b/packages/dodoex-widgets/src/components/Swap/assets/subtract-sm.svg
diff --git a/packages/dodoex-widgets/src/components/Swap/components/Dialog.tsx b/packages/dodoex-widgets/src/components/Swap/components/Dialog.tsx
@@ -1,4 +1,4 @@
-import { Box, Modal } from '@dodoex/components';
+import { Box, BoxProps, Modal } from '@dodoex/components';
 import { Error } from '@dodoex/icons';
 import { createPortal } from 'react-dom';
 import { useUserOptions } from '../../UserOptionsProvider';
@@ -108,13 +108,17 @@ function ModalDialog({
   children,
   height,
   testId,
-}: DialogProps) {
+  modalContainerSx,
+}: DialogProps & {
+  modalContainerSx?: BoxProps['sx'];
+}) {
   return (
     <Modal
       open={open}
       onClose={onClose}
       data-testid={testId}
       data-active={open ? '1' : '0'}
+      containerSx={modalContainerSx}
     >
       <Box
         sx={{
@@ -169,6 +173,7 @@ export default function Dialog({
   ...props
 }: DialogProps & {
   modal?: boolean;
+  modalContainerSx?: BoxProps['sx'];
 }) {
   const { widgetRef, DialogComponent } = useUserOptions();
 

diff --git a/packages/dodoex-widgets/src/components/Swap/components/ReviewDialog.tsx b/packages/dodoex-widgets/src/components/Swap/components/ReviewDialog.tsx
@@ -104,7 +104,7 @@ export function ReviewDialog({
           height: '100%',
           flexDirection: 'column',
           borderTop: `1px solid ${theme.palette.border.main}`,
-          [theme.breakpoints.up('desktop')]: {
+          [theme.breakpoints.up('laptop')]: {
             width: 343,
           },
         }}

diff --git a/packages/dodoex-widgets/src/components/Swap/components/SwapInfoCard.tsx b/packages/dodoex-widgets/src/components/Swap/components/SwapInfoCard.tsx
@@ -27,7 +27,7 @@ function SwapInfoCard({
         backgroundImage: `url(${subtractSmSvg})`,
         backgroundRepeat: 'no-repeat',
         backgroundSize: 'auto 107px',
-        backgroundPosition: 'top left',
+        backgroundPosition: 'top right',
         height: 107,
         pt: 16,
         pl: 16,
@@ -37,7 +37,7 @@ function SwapInfoCard({
         justifyContent: 'flex-start',
         position: 'relative',
         gap: 8,
-        [theme.breakpoints.up('desktop')]: {
+        [theme.breakpoints.up('laptop')]: {
           flexBasis: 191,
           flexShrink: 0,
           pt: 0,
@@ -50,12 +50,29 @@ function SwapInfoCard({
       }}
       onClick={onClick}
     >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 64,
+          bottom: 0,
+          borderTopLeftRadius: 20,
+          borderBottomLeftRadius: 20,
+          borderBottomRightRadius: 20,
+          backgroundColor: '#F0EEF0',
+          zIndex: -1,
+          [theme.breakpoints.up('laptop')]: {
+            display: 'none',
+          },
+        }}
+      />
       <Box
         sx={{
           typography: 'h6',
           color: theme.palette.text.primary,
           fontWeight: 600,
-          [theme.breakpoints.up('desktop')]: {
+          [theme.breakpoints.up('laptop')]: {
             typography: 'body2',
             fontWeight: 600,
           },
@@ -68,7 +85,7 @@ function SwapInfoCard({
           typography: 'caption',
           color: theme.palette.text.primary,
           fontWeight: 600,
-          [theme.breakpoints.up('desktop')]: {
+          [theme.breakpoints.up('laptop')]: {
             typography: 'h3',
             fontWeight: 600,
           },
@@ -82,7 +99,7 @@ function SwapInfoCard({
           color: theme.palette.text.secondary,
           fontWeight: 500,
           display: descriptionVisibleInMobile ? 'block' : 'none',
-          [theme.breakpoints.up('desktop')]: {
+          [theme.breakpoints.up('laptop')]: {
             mt: 8,
             display: 'block',
           },
@@ -104,7 +121,7 @@ function SwapInfoCard({
           borderRadius: 16,
           backgroundColor: '#000',
           color: theme.palette.background.paper,
-          [theme.breakpoints.up('desktop')]: {
+          [theme.breakpoints.up('laptop')]: {
             width: 48,
             height: 48,
             borderRadius: 24,
@@ -124,7 +141,7 @@ function SwapInfoCard({
           sx={{
             width: 16,
             height: 16,
-            [theme.breakpoints.up('desktop')]: {
+            [theme.breakpoints.up('laptop')]: {
               width: 24,
               height: 24,
             },

diff --git a/packages/dodoex-widgets/src/components/Swap/components/SwapSettingsDialog/index.tsx b/packages/dodoex-widgets/src/components/Swap/components/SwapSettingsDialog/index.tsx
@@ -73,7 +73,7 @@ export function SwapSettingsDialog({
           px: 20,
           pb: 34,
           overflowY: 'auto',
-          [theme.breakpoints.up('desktop')]: {
+          [theme.breakpoints.up('laptop')]: {
             width: 343,
           },
         }}