feat: add submit dialog

DODOEX · Jan 25, 2025 · df0950b · df0950b
1 parent d9d4caf
commit df0950b
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 52 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.2-beta.7",
+  "version": "3.0.2-beta.9",
   "description": "DODO Widgets",
   "source": "src/index.tsx",
   "types": "dist/types/index.d.ts",

diff --git a/packages/dodoex-widgets/src/components/WithExecutionDialog/index.tsx b/packages/dodoex-widgets/src/components/WithExecutionDialog/index.tsx
@@ -9,18 +9,60 @@ import Dialog from '../Swap/components/Dialog';
 import { useDispatch } from 'react-redux';
 import { ContractStatus } from '../../store/reducers/globals';
 import { AppThunkDispatch } from '../../store/actions';
-import { ReactComponent as LoadingIcon } from '../../assets/approveBorderRight.svg';
+import { ReactComponent as Loading } from '../../assets/approveBorderRight.svg';
 import { t, Trans } from '@lingui/macro';
-import { ArrowTopRightBorder, DoneBorder, ErrorWarn } from '@dodoex/icons';
+import {
+  ArrowTopRightBorder,
+  DoneBorder,
+  ErrorWarn,
+  Error,
+  ArrowSubmit,
+} from '@dodoex/icons';
 import { Showing } from '../../hooks/Submission/types';
 import { useWeb3React } from '@web3-react/core';
 import { scanUrlDomainMap } from '../../constants/chains';
 import { ChainId } from '@dodoex/api';
 import { setContractStatus } from '../../store/actions/globals';
 import { useUserOptions } from '../UserOptionsProvider';
+import { useWidgetDevice } from '../../hooks/style/useWidgetDevice';
 
 const strokeWidth = 6;
 
+function LoadingIcon() {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        mx: 'auto',
+        border: `${strokeWidth}px solid ${theme.palette?.background.input}`,
+        borderRadius: '50%',
+        width: '64px',
+        height: '64px',
+        position: 'relative',
+        animation: 'loadingRotate 1.1s infinite linear',
+        '@keyframes loadingRotate': {
+          '0%': {
+            transform: 'rotate(0deg)',
+          },
+          '100%': {
+            transform: 'rotate(359deg)',
+          },
+        },
+      }}
+    >
+      <Box
+        component={Loading}
+        sx={{
+          position: 'absolute',
+          top: `-${strokeWidth}px`,
+          right: `-${strokeWidth}px`,
+          color: 'primary.main',
+        }}
+      />
+    </Box>
+  );
+}
+
 function ExecuteIcon({
   showingDone,
   errorMessage,
@@ -54,37 +96,7 @@ function ExecuteIcon({
     );
   }
 
-  return (
-    <Box
-      sx={{
-        mx: 'auto',
-        border: `${strokeWidth}px solid ${theme.palette?.background.input}`,
-        borderRadius: '50%',
-        width: '64px',
-        height: '64px',
-        position: 'relative',
-        animation: 'loadingRotate 1.1s infinite linear',
-        '@keyframes loadingRotate': {
-          '0%': {
-            transform: 'rotate(0deg)',
-          },
-          '100%': {
-            transform: 'rotate(359deg)',
-          },
-        },
-      }}
-    >
-      <Box
-        component={LoadingIcon}
-        sx={{
-          position: 'absolute',
-          top: `-${strokeWidth}px`,
-          right: `-${strokeWidth}px`,
-          color: 'primary.main',
-        }}
-      />
-    </Box>
-  );
+  return <LoadingIcon />;
 }
 
 function ExecutionInfo({
@@ -219,6 +231,7 @@ function TransactionTime({
 export default function WithExecutionDialog({
   children,
   executionStatus,
+  showSubmitLoadingDialog,
   ...props
 }: {
   children: React.ReactNode;
@@ -228,6 +241,7 @@ export default function WithExecutionDialog({
     ctxVal,
     showing,
     closeShowing,
+    setShowing,
     showingDone,
     errorMessage,
     transactionTx,
@@ -236,16 +250,128 @@ export default function WithExecutionDialog({
     ...executionStatus,
   };
   const dispatch = useDispatch<AppThunkDispatch>();
+  const { isMobile } = useWidgetDevice();
 
   const noSubmissionDialog = useUserOptions(
     (state) => state.noSubmissionDialog,
   );
 
+  const handleCloseSubmitLoadingDialog = () => {
+    setShowing((prev) => {
+      if (!prev) return prev;
+      const newShowing = { ...prev };
+      delete newShowing.submitState;
+      return newShowing;
+    });
+  };
+
   return (
     <ExecutionContext.Provider value={ctxVal}>
       {children}
+      {showSubmitLoadingDialog && (
+        <Dialog
+          modal
+          open={!!showing?.submitState}
+          onClose={handleCloseSubmitLoadingDialog}
+        >
+          {!!showing && (
+            <Box
+              sx={{
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 20,
+                p: 20,
+                minHeight: 208,
+                minWidth: isMobile ? '100%' : 340,
+                textAlign: 'center',
+              }}
+            >
+              <Box
+                sx={{
+                  textAlign: 'center',
+                  color: 'text.secondary',
+                }}
+              >
+                {showing.brief}
+                <Box
+                  component={Error}
+                  sx={{
+                    position: 'absolute',
+                    top: 20,
+                    right: 20,
+                    color: 'text.secondary',
+                    cursor: 'pointer',
+                  }}
+                  onClick={handleCloseSubmitLoadingDialog}
+                />
+              </Box>
+              {showing.submitState === 'submitted' ? (
+                <>
+                  <Box
+                    component={ArrowSubmit}
+                    sx={{
+                      width: 64,
+                      height: 64,
+                    }}
+                  />
+                  <div>
+                    <div>{t`${showing.brief} Submitted`}</div>
+                    {showing.subtitle && (
+                      <Box
+                        sx={{
+                          mt: 8,
+                          color: 'text.secondary',
+                          typography: 'body2',
+                        }}
+                      >
+                        {showing.subtitle}
+                      </Box>
+                    )}
+                  </div>
+                  <Button
+                    variant={Button.Variant.outlined}
+                    fullWidth
+                    onClick={handleCloseSubmitLoadingDialog}
+                    sx={{
+                      mt: 4,
+                    }}
+                  >
+                    <Trans>OK</Trans>
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <LoadingIcon />
+                  <div>
+                    <Box>
+                      <Trans>Please confirm in wallet</Trans>
+                    </Box>
+                    {showing.subtitle && (
+                      <Box
+                        sx={{
+                          mt: 8,
+                          color: 'text.secondary',
+                          typography: 'body2',
+                        }}
+                      >
+                        {showing.subtitle}
+                      </Box>
+                    )}
+                  </div>
+                </>
+              )}
+            </Box>
+          )}
+        </Dialog>
+      )}
+
+      {/* widget dialog */}
       <Dialog
-        open={!!showing && !noSubmissionDialog}
+        open={
+          !!showing && showing.submitState !== 'loading' && !noSubmissionDialog
+        }
         onClose={closeShowing}
         id="submission"
       >

diff --git a/packages/dodoex-widgets/src/hooks/Submission/types.ts b/packages/dodoex-widgets/src/hooks/Submission/types.ts
@@ -65,10 +65,13 @@ export enum ExecutionResult {
   Submitted = 'submitted',
 }
 
+type SubmitState = 'loading' | 'submitted';
+
 export interface Showing {
   brief: string;
   subtitle?: string | React.ReactNode;
   spec: StepSpec;
+  submitState?: SubmitState;
 }
 
 export type ExecutionCtx = {

diff --git a/packages/dodoex-widgets/src/hooks/Submission/useExecution.ts b/packages/dodoex-widgets/src/hooks/Submission/useExecution.ts
@@ -28,6 +28,7 @@ export interface ExecutionProps {
   onTxSubmit?: (tx: string, data: any) => void;
   onTxSuccess?: (tx: string, data: any) => void;
   onTxReverted?: (tx: string, data: any) => void;
+  showSubmitLoadingDialog?: boolean;
   executionStatus?: {
     showing?: Showing | null;
     showingDone?: boolean;
@@ -89,6 +90,7 @@ export default function useExecution({
       let nonce: number | undefined;
       let transaction: TransactionResponse | undefined;
       setWaitingSubmit(false);
+      setShowing({ spec, brief, subtitle, submitState: 'loading' });
       try {
         setWaitingSubmit(true);
         if (spec.opcode === OpCode.Approval) {
@@ -162,7 +164,7 @@ export default function useExecution({
         }
         return ExecutionResult.Failed;
       }
-      setShowing({ spec, brief, subtitle });
+      setShowing({ spec, brief, subtitle, submitState: 'submitted' });
       setShowingDone(false);
       setWaitingSubmit(false);
 
@@ -318,6 +320,7 @@ export default function useExecution({
     errorMessage,
     setErrorMessage,
     closeShowing,
+    setShowing,
     ctxVal,
     requests,
   };

diff --git a/packages/dodoex-widgets/src/locales/en-US.js b/packages/dodoex-widgets/src/locales/en-US.js
diff --git a/packages/dodoex-widgets/src/locales/en-US.po b/packages/dodoex-widgets/src/locales/en-US.po
@@ -18,7 +18,7 @@ msgstr ""
 msgid "The smaller the slippage coefficient, the lower the slippage for traders, and the deeper the market depth."
 msgstr "The smaller the slippage coefficient, the lower the slippage for traders, and the deeper the market depth."
 
-#: src/components/WithExecutionDialog/index.tsx:190
+#: src/components/WithExecutionDialog/index.tsx:202
 msgid "Transaction Time:"
 msgstr "Transaction Time:"
 
@@ -58,7 +58,7 @@ msgstr "To"
 msgid "Receive {0}"
 msgstr "Receive {0}"
 
-#: src/components/WithExecutionDialog/index.tsx:112
+#: src/components/WithExecutionDialog/index.tsx:124
 msgid "{0} pending"
 msgstr "{0} pending"
 
@@ -123,7 +123,7 @@ msgid "Start Time"
 msgstr "Start Time"
 
 #: src/components/ErrorMessageDialog.tsx:63
-#: src/components/WithExecutionDialog/index.tsx:318
+#: src/components/WithExecutionDialog/index.tsx:444
 msgid "Dismiss"
 msgstr "Dismiss"
 
@@ -230,7 +230,7 @@ msgstr "Pegged Exchange Rate"
 msgid "Private Pool"
 msgstr "Private Pool"
 
-#: src/components/WithExecutionDialog/index.tsx:111
+#: src/components/WithExecutionDialog/index.tsx:123
 msgid "{0} confirmed"
 msgstr "{0} confirmed"
 
@@ -369,6 +369,10 @@ msgstr "Initial Tokens"
 msgid "This token is on"
 msgstr "This token is on"
 
+#: src/components/WithExecutionDialog/index.tsx:349
+msgid "Please confirm in wallet"
+msgstr "Please confirm in wallet"
+
 #: src/components/Swap/components/SwapSettingsDialog/SlippageCurveChart/index.tsx:91
 msgid "Success Rate"
 msgstr "Success Rate"
@@ -618,6 +622,10 @@ msgstr "Are you sure swapping to another chain?"
 msgid "Swaps"
 msgstr "Swaps"
 
+#: src/components/WithExecutionDialog/index.tsx:320
+msgid "{0} Submitted"
+msgstr "{0} Submitted"
+
 #. js-lingui-explicit-id
 #: src/widgets/MiningWidget/MiningList/my-created/RewardCard.tsx:170
 msgid "Edit"
@@ -1160,7 +1168,7 @@ msgid "LP Balance:"
 msgstr "LP Balance:"
 
 #: src/components/Bridge/BridgeSummaryDialog/orderInfoModal/SwapStep.tsx:202
-#: src/components/WithExecutionDialog/index.tsx:205
+#: src/components/WithExecutionDialog/index.tsx:217
 msgid "Tx"
 msgstr "Tx"
 
@@ -1816,7 +1824,7 @@ msgid "The mid price needs to be greater than {min} and less than 100,000,000"
 msgstr "The mid price needs to be greater than {min} and less than 100,000,000"
 
 #: src/components/ErrorMessageDialog.tsx:39
-#: src/components/WithExecutionDialog/index.tsx:283
+#: src/components/WithExecutionDialog/index.tsx:409
 msgid "Something went wrong."
 msgstr "Something went wrong."
 
@@ -2307,7 +2315,7 @@ msgstr "Dynamic slippage is {recommendSlippage}% , the current slippage setting
 msgid "High"
 msgstr "High"
 
-#: src/components/WithExecutionDialog/index.tsx:318
+#: src/components/WithExecutionDialog/index.tsx:444
 msgid "Close"
 msgstr "Close"
 
@@ -2345,6 +2353,10 @@ msgstr "My Pools (PMM)"
 msgid "Starting price"
 msgstr "Starting price"
 
+#: src/components/WithExecutionDialog/index.tsx:341
+msgid "OK"
+msgstr "OK"
+
 #: src/widgets/MiningWidget/MiningCreate/components/StepTitle.tsx:90
 msgid "Total Rewards=Daily Rewards*Duration"
 msgstr "Total Rewards=Daily Rewards*Duration"

diff --git a/packages/dodoex-widgets/src/locales/zh-CN.js b/packages/dodoex-widgets/src/locales/zh-CN.js