feat: add router props

DODOEX · Oct 18, 2024 · 7ed17fe · 7ed17fe
1 parent 9c8e63f
commit 7ed17fe
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 60 deletions.
diff --git a/packages/dodoex-api/package.json b/packages/dodoex-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/api",
-  "version": "3.0.0-taiko.7",
+  "version": "3.0.0-taiko.8",
   "description": "DODO API Kit",
   "source": "src/index.ts",
   "types": "dist/index.d.ts",
@@ -99,4 +99,4 @@
     "ts-jest": "^29.0.1",
     "typescript": "^5.6.3"
   }
-}
+}
diff --git a/packages/dodoex-widgets/package.json b/packages/dodoex-widgets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/widgets",
-  "version": "3.0.0-taiko.16",
+  "version": "3.0.0-taiko.18",
   "description": "DODO Widgets",
   "source": "src/index.tsx",
   "types": "dist/index.d.ts",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",
-    "@dodoex/api": ">=3.0.0-taiko.7",
+    "@dodoex/api": ">=3.0.0-taiko.8",
     "@dodoex/components": ">=3.0.0-taiko.4",
     "@dodoex/icons": "^2.0.1",
     "@emotion/react": "^11.10.0",

diff --git a/packages/dodoex-widgets/src/components/Widget/index.tsx b/packages/dodoex-widgets/src/components/Widget/index.tsx
@@ -43,6 +43,7 @@ import Message from '../Message';
 import { DialogProps } from '../Swap/components/Dialog';
 import { UserOptionsProvider, useUserOptions } from '../UserOptionsProvider';
 import WithExecutionDialog from '../WithExecutionDialog';
+import { Page } from '../../router';
 
 export const WIDGET_CLASS_NAME = 'dodo-widget-container';
 
@@ -70,6 +71,7 @@ export interface WidgetProps
   onlyChainId?: ChainId;
   noUI?: boolean;
   noLangProvider?: boolean;
+  routerPage?: Page;
 
   /** When the winding status changes, no pop-up window will be displayed. */
   noSubmissionDialog?: boolean;

diff --git a/packages/dodoex-widgets/src/index.tsx b/packages/dodoex-widgets/src/index.tsx
@@ -19,6 +19,10 @@ export { Swap } from './components/Swap';
 export { default as SwapOrderHistory } from './components/Swap/SwapOrderHistory';
 export { useTradeSwapOrderList } from './hooks/Swap/useTradeSwapOrderList';
 export { Pool } from './widgets/PoolWidget';
+export { default as PoolList } from './widgets/PoolWidget/PoolList';
+export { default as PoolCreate } from './widgets/PoolWidget/PoolCreate';
+export { default as PoolModify } from './widgets/PoolWidget/PoolModify';
+export { default as PoolDetail } from './widgets/PoolWidget/PoolDetail';
 export {
   default as PoolOperateDialog,
   PoolOperate,

diff --git a/packages/dodoex-widgets/src/locales/en-US.po b/packages/dodoex-widgets/src/locales/en-US.po
@@ -213,7 +213,7 @@ msgid "Pricing Model"
 msgstr "Pricing Model"
 
 #: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:74
-#: src/widgets/PoolWidget/PoolList/index.tsx:187
+#: src/widgets/PoolWidget/PoolList/index.tsx:192
 #: src/widgets/PoolWidget/PoolOperate/hooks/usePoolOrMiningTabs.ts:17
 msgid "Liquidity"
 msgstr "Liquidity"
@@ -409,7 +409,7 @@ msgstr "Results in a relatively fixed price."
 msgid "Swap Rate"
 msgstr "Swap Rate"
 
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:150
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:152
 #: src/widgets/PoolWidget/PoolModify/index.tsx:436
 msgid "Pool not found. Please switch to another network and retry."
 msgstr "Pool not found. Please switch to another network and retry."
@@ -731,7 +731,7 @@ msgstr "Use the recommended ratio"
 msgid "No LP pools match your criteria"
 msgstr "No LP pools match your criteria"
 
-#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:19
+#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:23
 #: src/widgets/PoolWidget/PoolOperate/AddPoolOperate.tsx:101
 msgid "Add Liquidity"
 msgstr "Add Liquidity"
@@ -814,7 +814,7 @@ msgid "Estimated Time"
 msgstr "Estimated Time"
 
 #: src/widgets/PoolWidget/PoolCreate/hooks/useVersionList.ts:19
-#: src/widgets/PoolWidget/PoolList/index.tsx:188
+#: src/widgets/PoolWidget/PoolList/index.tsx:193
 msgid "Classical AMM-like pool. Suitable for most assets."
 msgstr "Classical AMM-like pool. Suitable for most assets."
 
@@ -1035,7 +1035,7 @@ msgstr "Fee Rate"
 msgid "You are making changes to the liquidity of a private pool. This is a highly discretionary operation that may cause substantial inflows/outflows of funds and changes in market prices. Please make sure you are fully aware of the implications of each parameter modification."
 msgstr "You are making changes to the liquidity of a private pool. This is a highly discretionary operation that may cause substantial inflows/outflows of funds and changes in market prices. Please make sure you are fully aware of the implications of each parameter modification."
 
-#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:22
+#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:26
 #: src/widgets/PoolWidget/PoolList/MyLiquidity.tsx:325
 #: src/widgets/PoolWidget/PoolList/MyLiquidity.tsx:397
 #: src/widgets/PoolWidget/PoolOperate/components/LiquidityInfo.tsx:357
@@ -1199,7 +1199,7 @@ msgid "Initial asset ratio"
 msgstr "Initial asset ratio"
 
 #: src/widgets/PoolWidget/PoolDetail/components/TitleInfo.tsx:115
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:182
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:184
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:449
 #: src/widgets/PoolWidget/PoolModify/operate-widgets/FeeRateSetting.tsx:84
 msgid "Edit"
@@ -1230,7 +1230,7 @@ msgstr "Token Pair"
 msgid "Received"
 msgstr "Received"
 
-#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:24
+#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:28
 msgid "My Pools"
 msgstr "My Pools"
 
@@ -1386,7 +1386,7 @@ msgstr "Send to:"
 msgid "My Staked"
 msgstr "My Staked"
 
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:200
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:202
 #: src/widgets/PoolWidget/PoolList/AddLiquidity.tsx:240
 #: src/widgets/PoolWidget/PoolList/AddLiquidity.tsx:473
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:267
@@ -1424,7 +1424,7 @@ msgstr "Low"
 msgid "Select a liquidity pool"
 msgstr "Select a liquidity pool"
 
-#: src/widgets/PoolWidget/PoolList/index.tsx:137
+#: src/widgets/PoolWidget/PoolList/index.tsx:142
 msgid "Create Pool"
 msgstr "Create Pool"
 
@@ -1532,7 +1532,7 @@ msgstr "Slippage Coefficient"
 msgid "Initial Price Alert"
 msgstr "Initial Price Alert"
 
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:193
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:195
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:252
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:540
 #: src/widgets/PoolWidget/PoolList/MyLiquidity.tsx:350

diff --git a/packages/dodoex-widgets/src/locales/zh-CN.po b/packages/dodoex-widgets/src/locales/zh-CN.po
@@ -213,7 +213,7 @@ msgid "Pricing Model"
 msgstr ""
 
 #: src/widgets/PoolWidget/PoolCreate/components/DepthAndLiquidityChart.tsx:74
-#: src/widgets/PoolWidget/PoolList/index.tsx:187
+#: src/widgets/PoolWidget/PoolList/index.tsx:192
 #: src/widgets/PoolWidget/PoolOperate/hooks/usePoolOrMiningTabs.ts:17
 msgid "Liquidity"
 msgstr ""
@@ -409,7 +409,7 @@ msgstr ""
 msgid "Swap Rate"
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:150
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:152
 #: src/widgets/PoolWidget/PoolModify/index.tsx:436
 msgid "Pool not found. Please switch to another network and retry."
 msgstr ""
@@ -731,7 +731,7 @@ msgstr ""
 msgid "No LP pools match your criteria"
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:19
+#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:23
 #: src/widgets/PoolWidget/PoolOperate/AddPoolOperate.tsx:101
 msgid "Add Liquidity"
 msgstr ""
@@ -814,7 +814,7 @@ msgid "Estimated Time"
 msgstr "预计时间"
 
 #: src/widgets/PoolWidget/PoolCreate/hooks/useVersionList.ts:19
-#: src/widgets/PoolWidget/PoolList/index.tsx:188
+#: src/widgets/PoolWidget/PoolList/index.tsx:193
 msgid "Classical AMM-like pool. Suitable for most assets."
 msgstr ""
 
@@ -1035,7 +1035,7 @@ msgstr ""
 msgid "You are making changes to the liquidity of a private pool. This is a highly discretionary operation that may cause substantial inflows/outflows of funds and changes in market prices. Please make sure you are fully aware of the implications of each parameter modification."
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:22
+#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:26
 #: src/widgets/PoolWidget/PoolList/MyLiquidity.tsx:325
 #: src/widgets/PoolWidget/PoolList/MyLiquidity.tsx:397
 #: src/widgets/PoolWidget/PoolOperate/components/LiquidityInfo.tsx:357
@@ -1199,7 +1199,7 @@ msgid "Initial asset ratio"
 msgstr ""
 
 #: src/widgets/PoolWidget/PoolDetail/components/TitleInfo.tsx:115
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:182
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:184
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:449
 #: src/widgets/PoolWidget/PoolModify/operate-widgets/FeeRateSetting.tsx:84
 msgid "Edit"
@@ -1230,7 +1230,7 @@ msgstr ""
 msgid "Received"
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:24
+#: src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts:28
 msgid "My Pools"
 msgstr ""
 
@@ -1386,7 +1386,7 @@ msgstr "发送至："
 msgid "My Staked"
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:200
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:202
 #: src/widgets/PoolWidget/PoolList/AddLiquidity.tsx:240
 #: src/widgets/PoolWidget/PoolList/AddLiquidity.tsx:473
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:267
@@ -1424,7 +1424,7 @@ msgstr ""
 msgid "Select a liquidity pool"
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolList/index.tsx:137
+#: src/widgets/PoolWidget/PoolList/index.tsx:142
 msgid "Create Pool"
 msgstr ""
 
@@ -1532,7 +1532,7 @@ msgstr ""
 msgid "Initial Price Alert"
 msgstr ""
 
-#: src/widgets/PoolWidget/PoolDetail/index.tsx:193
+#: src/widgets/PoolWidget/PoolDetail/index.tsx:195
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:252
 #: src/widgets/PoolWidget/PoolList/MyCreated.tsx:540
 #: src/widgets/PoolWidget/PoolList/MyLiquidity.tsx:350

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolDetail/index.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolDetail/index.tsx
@@ -17,22 +17,23 @@ import Overview from './components/Overview';
 import TitleInfo from './components/TitleInfo';
 import TotalLiquidity from './components/TotalLiquidity';
 
-export default function PoolDetail() {
+export default function PoolDetail({
+  params,
+}: {
+  params: Page<PageType.PoolDetail>['params'];
+}) {
   const router = useRouterStore();
   const { isMobile } = useWidgetDevice();
   const { account } = useWalletInfo();
   const theme = useTheme();
-  const params =
-    router.page?.type === PageType.PoolDetail
-      ? (router.page as Page<PageType.PoolDetail>).params
-      : undefined;
 
   const { poolDetail: pool, ...fetchPoolQuery } = usePoolDetail({
     id: params?.address,
     chainId: params?.chainId,
   });
-  const [noResultModalVisible, setNoResultModalVisible] =
-    React.useState<'inital' | 'open' | 'close'>('inital');
+  const [noResultModalVisible, setNoResultModalVisible] = React.useState<
+    'inital' | 'open' | 'close'
+  >('inital');
   if (
     !fetchPoolQuery.isPending &&
     !fetchPoolQuery.error &&
@@ -53,8 +54,9 @@ export default function PoolDetail() {
       pool?.owner &&
       pool.owner.toLocaleLowerCase() === account.toLocaleLowerCase());
 
-  const [operateType, setOperateType] =
-    React.useState<OperateTab | undefined>();
+  const [operateType, setOperateType] = React.useState<
+    OperateTab | undefined
+  >();
   if (pool && operateType === undefined && !isMobile) {
     setOperateType(OperateTab.Add);
   }

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts
@@ -2,16 +2,20 @@ import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import React from 'react';
 import { POOLS_LIST_TAB } from '../../../../constants/sessionStorage';
-import { useRouterStore } from '../../../../router';
-import { Page, PageType } from '../../../../router/types';
 
 export enum PoolTab {
   addLiquidity = 'add-liquidity',
   myLiquidity = 'my-liquidity',
   myCreated = 'my-created',
 }
 
-export function usePoolListTabs({ account }: { account?: string }) {
+export function usePoolListTabs({
+  account,
+  paramsTab,
+}: {
+  account?: string;
+  paramsTab: PoolTab | undefined;
+}) {
   const { i18n } = useLingui();
   const [poolTab, setPoolTab] = React.useState(PoolTab.addLiquidity);
   const tabs = React.useMemo(
@@ -40,13 +44,6 @@ export function usePoolListTabs({ account }: { account?: string }) {
     sessionStorage.setItem(POOLS_LIST_TAB, poolTab);
   };
 
-  // params
-  const paramsTab = useRouterStore((state) => {
-    if (state.page?.type === PageType.Pool) {
-      return (state.page as Page<PageType.Pool>).params?.tab;
-    }
-    return null;
-  });
   React.useEffect(() => {
     if (paramsTab) {
       handleChangePoolTab(paramsTab);

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/index.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/index.tsx
@@ -9,7 +9,7 @@ import { usePoolListFilterChainId } from './hooks/usePoolListFilterChainId';
 import MyLiquidity from './MyLiquidity';
 import MyCreated from './MyCreated';
 import { useRouterStore } from '../../../router';
-import { PageType } from '../../../router/types';
+import { Page, PageType } from '../../../router/types';
 import WidgetContainer from '../../../components/WidgetContainer';
 import { useWidgetDevice } from '../../../hooks/style/useWidgetDevice';
 import PoolOperateDialog, {
@@ -34,13 +34,18 @@ function TabPanelFlexCol({ sx, ...props }: Parameters<typeof TabPanel>[0]) {
   );
 }
 
-export default function PoolList() {
+export default function PoolList({
+  params,
+}: {
+  params?: Page<PageType.Pool>['params'];
+}) {
   const { isMobile } = useWidgetDevice();
   const noDocumentLink = useUserOptions((state) => state.noDocumentLink);
   const scrollParentRef = React.useRef<HTMLDivElement>();
   const { account } = useWeb3React();
   const { poolTab, tabs, handleChangePoolTab } = usePoolListTabs({
     account,
+    paramsTab: params?.tab,
   });
   const { activeChainId, filterChainIds, handleChangeActiveChainId } =
     usePoolListFilterChainId();

diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolModify/index.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolModify/index.tsx
@@ -41,15 +41,14 @@ import { FeeRateSetting } from './operate-widgets/FeeRateSetting';
 import { SectionTitle } from './SectionTitle';
 import { usePriceInit } from '../PoolCreate/hooks/usePriceInit';
 
-export default function PoolModify() {
+export default function PoolModify({
+  params,
+}: {
+  params: Page<PageType.PoolDetail>['params'];
+}) {
   const theme = useTheme();
   const { isMobile } = useWidgetDevice();
   const { chainId } = useWalletInfo();
-  const params = useRouterStore((state) => {
-    if (state.page?.type === PageType.ModifyPool) {
-      return (state.page as Page<PageType.ModifyPool>).params;
-    }
-  });
 
   const [showRiskDialog, setShowRiskDialog] = React.useState(false);
 
@@ -76,8 +75,9 @@ export default function PoolModify() {
     setShowRiskDialog(getIsPoolEditRiskWarningOpen());
   }, []);
 
-  const [noResultModalVisible, setNoResultModalVisible] =
-    React.useState<'inital' | 'open' | 'close'>('inital');
+  const [noResultModalVisible, setNoResultModalVisible] = React.useState<
+    'inital' | 'open' | 'close'
+  >('inital');
 
   const { poolDetail, ...fetchPoolQuery } = usePoolDetail({
     id: params?.address,