From 7ed17fe32274f7104b3a5829f13e5d223bad0c9e Mon Sep 17 00:00:00 2001 From: junjie Date: Fri, 18 Oct 2024 16:19:40 +0800 Subject: [PATCH] feat: add router props --- packages/dodoex-api/package.json | 4 ++-- packages/dodoex-widgets/package.json | 4 ++-- .../src/components/Widget/index.tsx | 2 ++ packages/dodoex-widgets/src/index.tsx | 4 ++++ packages/dodoex-widgets/src/locales/en-US.po | 20 +++++++++---------- packages/dodoex-widgets/src/locales/zh-CN.po | 20 +++++++++---------- .../widgets/PoolWidget/PoolDetail/index.tsx | 20 ++++++++++--------- .../PoolList/hooks/usePoolListTabs.ts | 17 +++++++--------- .../src/widgets/PoolWidget/PoolList/index.tsx | 9 +++++++-- .../widgets/PoolWidget/PoolModify/index.tsx | 16 +++++++-------- .../src/widgets/PoolWidget/index.tsx | 18 ++++++++++------- 11 files changed, 74 insertions(+), 60 deletions(-) diff --git a/packages/dodoex-api/package.json b/packages/dodoex-api/package.json index e19d0173..175a349d 100644 --- 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" } -} +} \ No newline at end of file diff --git a/packages/dodoex-widgets/package.json b/packages/dodoex-widgets/package.json index 1ed3c5e0..ed475e18 100644 --- 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 index 5e46f59e..076b21c3 100644 --- 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 index 04b6d53b..0cf63e38 100644 --- 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 index ca2c3d60..89a98449 100644 --- 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 index 9b1f5a8f..639cf263 100644 --- 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 index 7e4a2a8d..9b9da294 100644 --- 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['params']; +}) { const router = useRouterStore(); const { isMobile } = useWidgetDevice(); const { account } = useWalletInfo(); const theme = useTheme(); - const params = - router.page?.type === PageType.PoolDetail - ? (router.page as Page).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(); + 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 index 17e892b7..1791112c 100644 --- a/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts +++ b/packages/dodoex-widgets/src/widgets/PoolWidget/PoolList/hooks/usePoolListTabs.ts @@ -2,8 +2,6 @@ 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', @@ -11,7 +9,13 @@ export enum PoolTab { 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).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 index b7841ce6..08e06734 100644 --- 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[0]) { ); } -export default function PoolList() { +export default function PoolList({ + params, +}: { + params?: Page['params']; +}) { const { isMobile } = useWidgetDevice(); const noDocumentLink = useUserOptions((state) => state.noDocumentLink); const scrollParentRef = React.useRef(); 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 index d56f2770..3583d74c 100644 --- 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['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).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, diff --git a/packages/dodoex-widgets/src/widgets/PoolWidget/index.tsx b/packages/dodoex-widgets/src/widgets/PoolWidget/index.tsx index 42a5d2db..0a4814cd 100644 --- a/packages/dodoex-widgets/src/widgets/PoolWidget/index.tsx +++ b/packages/dodoex-widgets/src/widgets/PoolWidget/index.tsx @@ -1,22 +1,26 @@ import { useRouterStore } from '../../router'; -import { PageType } from '../../router/types'; +import { Page, PageType } from '../../router/types'; import PoolList from './PoolList'; import PoolCreate from './PoolCreate'; import PoolModify from './PoolModify'; import PoolDetail from './PoolDetail'; +import { useUserOptions } from '../../components/UserOptionsProvider'; export function Pool() { - const pageType = useRouterStore((state) => state.page?.type); - switch (pageType) { + const { routerPage } = useUserOptions(); + const pageLocal = useRouterStore((state) => state.page); + const page = routerPage ?? pageLocal; + + switch (page?.type) { case PageType.Pool: - return ; + return ).params} />; case PageType.CreatePool: return ; case PageType.ModifyPool: - return ; + return ).params} />; case PageType.PoolDetail: - return ; + return ).params} />; default: - return ; + return )?.params} />; } }