feat: optimization widget style && add onSwitchChain props

DODOEX · Oct 23, 2024 · 5bd685e · 5bd685e
1 parent 03e032e
commit 5bd685e
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 96 deletions.
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.20",
+  "version": "3.0.0-taiko.21",
   "description": "DODO Widgets",
   "source": "src/index.tsx",
   "types": "dist/index.d.ts",

diff --git a/packages/dodoex-widgets/src/components/ConnectWallet/NeedConnectButton.tsx b/packages/dodoex-widgets/src/components/ConnectWallet/NeedConnectButton.tsx
@@ -21,7 +21,7 @@ export default function NeedConnectButton({
 }) {
   const { account, chainId: currentChainId, connector } = useWeb3React();
   const dispatch = useDispatch<AppThunkDispatch>();
-  const { onConnectWalletClick } = useUserOptions();
+  const { onConnectWalletClick, onSwitchChain } = useUserOptions();
   const [loading, setLoading] = React.useState(false);
   const switchChain = useSwitchChain(chainId);
   const needSwitchNetwork =
@@ -45,6 +45,12 @@ export default function NeedConnectButton({
         onClick={async () => {
           // switch chain
           if (needSwitchNetwork) {
+            if (onSwitchChain) {
+              setLoading(true);
+              await onSwitchChain();
+              setLoading(false);
+              return;
+            }
             if (switchChain) {
               setLoading(true);
               await switchChain();

diff --git a/...ages/dodoex-widgets/src/components/Swap/components/SwapSettingsDialog/SlippageSetting.tsx b/...ages/dodoex-widgets/src/components/Swap/components/SwapSettingsDialog/SlippageSetting.tsx
@@ -184,7 +184,7 @@ export default function SlippageSetting({
               sx={{
                 position: 'relative',
                 '&:not(:hover) .weak': {
-                  color: 'text.secondary',
+                  color: alpha(theme.palette.secondary.contrastText, 0.5),
                 },
               }}
             >

diff --git a/packages/dodoex-widgets/src/components/Swap/index.tsx b/packages/dodoex-widgets/src/components/Swap/index.tsx
@@ -209,7 +209,6 @@ export function Swap({
     needApprove,
   ]);
 
-  console.log('jie', slippageSwap);
   const {
     status: resPriceStatus,
     rawBrief,

diff --git a/packages/dodoex-widgets/src/components/Widget/index.tsx b/packages/dodoex-widgets/src/components/Widget/index.tsx
@@ -85,6 +85,7 @@ export interface WidgetProps
   widgetRef?: React.RefObject<HTMLDivElement>;
   /** If true is returned, the default wallet connection logic will not be executed */
   onConnectWalletClick?: () => boolean | Promise<boolean>;
+  onSwitchChain?: (chainId?: ChainId) => Promise<boolean>;
   /** When the token balance is insufficient, users can purchase or swap callbacks */
   gotoBuyToken?: (params: { token: TokenInfo; account: string }) => void;
   getTokenLogoUrl?: (params: {

diff --git a/packages/dodoex-widgets/src/hooks/Submission/types.ts b/packages/dodoex-widgets/src/hooks/Submission/types.ts
@@ -21,6 +21,8 @@ export enum MetadataFlag {
   unstakeMining = 'unstakeMining',
   claimMining = 'claimMining',
   submissionCreateMetaKey = 'submissionCreateMetaKey',
+  approve = 'approve',
+  reset = 'reset',
 }
 
 export type Metadata = Record<string, any>;

diff --git a/packages/dodoex-widgets/src/hooks/Token/useGetTokenStatus.ts b/packages/dodoex-widgets/src/hooks/Token/useGetTokenStatus.ts
@@ -8,7 +8,7 @@ import { getTokenSymbolDisplay } from '../../utils/token';
 import useFetchBlockNumber from '../contract/useFetchBlockNumber';
 import { useInflights, useSubmission } from '../Submission';
 import { OpCode } from '../Submission/spec';
-import { ExecutionResult } from '../Submission/types';
+import { ExecutionResult, MetadataFlag } from '../Submission/types';
 import { ApprovalState, BalanceState, TokenInfo } from './type';
 
 export const useGetTokenStatus = ({
@@ -137,6 +137,9 @@ export const useGetTokenStatus = ({
         },
         {
           submittedBack,
+          metadata: {
+            [isReset ? MetadataFlag.approve : MetadataFlag.approve]: true,
+          },
         },
       );
 

diff --git a/packages/dodoex-widgets/src/hooks/Token/useTokenStatus.ts b/packages/dodoex-widgets/src/hooks/Token/useTokenStatus.ts
@@ -10,7 +10,7 @@ import { useWalletInfo } from '../ConnectWallet/useWalletInfo';
 import useFetchBlockNumber from '../contract/useFetchBlockNumber';
 import { useInflights, useSubmission } from '../Submission';
 import { OpCode } from '../Submission/spec';
-import { ExecutionResult } from '../Submission/types';
+import { ExecutionResult, MetadataFlag } from '../Submission/types';
 import { ApprovalState, TokenInfo } from './type';
 
 function getPendingRest(
@@ -132,12 +132,20 @@ export function useTokenStatus(
   const submitApprove = React.useCallback(async () => {
     if (!proxyContractAddress || !account || !token) return;
     const amt = needReset ? new BigNumber(0) : undefined;
-    const result = await submission.execute(approveTitle, {
-      opcode: OpCode.Approval,
-      token,
-      contract: proxyContractAddress,
-      amt,
-    });
+    const result = await submission.execute(
+      approveTitle,
+      {
+        opcode: OpCode.Approval,
+        token,
+        contract: proxyContractAddress,
+        amt,
+      },
+      {
+        metadata: {
+          [needReset ? MetadataFlag.approve : MetadataFlag.approve]: true,
+        },
+      },
+    );
 
     if (result !== ExecutionResult.Success) return;
     await updateBlockNumber();