@dodoex/wallet-web3-react 0.2.0 → 0.3.0

package/src/WalletConnect/ActivityList.tsx

@@ -1,604 +1,606 @@
-import { Box, EmptyDataIcon, RotatingIcon, Skeleton } from '@dodoex/components';
-import {
-  ArrowRight,
-  DoneFilled as PassedIcon,
-  ErrorFilled as RejectedIcon,
-  InvalidFilled as InvalidIcon,
-  ArrowBack,
-} from '@dodoex/icons';
-import { useWalletStore } from '@dodoex/wallet-web3';
-import { t, Trans } from '@lingui/macro';
-import { debounce } from 'lodash';
-import React from 'react';
-import InfiniteScroll from 'react-infinite-scroller';
-import {
-  NoticeTransactionList,
-  StateText,
-  useTransactionList,
-} from '../hooks/useTransactionList';
-import { formatReadableTimeAgo } from '../utils/time';
-import { increaseArray } from '../utils/utils';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-
-export default function ActivityList({
-  getScrollParent,
-  fetchTransactionQuery,
-}: {
-  getScrollParent: () => HTMLDivElement | null;
-  fetchTransactionQuery: ReturnType<typeof useTransactionList>;
-}) {
-  const { account } = useWalletStore();
-
-  return (
-    <InfiniteScroll
-      useWindow={false}
-      hasMore={fetchTransactionQuery.hasNextPage}
-      threshold={300}
-      getScrollParent={getScrollParent}
-      loadMore={debounce(() => {
-        if (
-          fetchTransactionQuery.hasNextPage &&
-          !fetchTransactionQuery.isFetchingNextPage
-        ) {
-          fetchTransactionQuery.fetchNextPage();
-        }
-      }, 500)}
-    >
-      <TransactionList
-        account={account}
-        isLoading={fetchTransactionQuery.isLoading}
-        isFetchingNextPage={fetchTransactionQuery.isFetchingNextPage}
-        list={fetchTransactionQuery.list}
-      />
-    </InfiniteScroll>
-  );
-}
-
-export function TransactionList({
-  account,
-  isLoading,
-  isFetchingNextPage,
-  list,
-}: {
-  account: string | undefined;
-  isLoading?: boolean;
-  isFetchingNextPage?: boolean;
-  list: NoticeTransactionList;
-}) {
-  const { getChain } = useWalletConnectContext();
-  return (
-    <>
-      {isLoading && (
-        <>
-          {increaseArray(3).map((i) => (
-            <Box
-              key={i}
-              sx={{
-                position: 'relative',
-                display: 'flex',
-                width: '100%',
-                pl: 24,
-                pr: 48,
-                py: 20,
-              }}
-            >
-              <Box
-                sx={{
-                  position: 'absolute',
-                  bottom: 0,
-                  right: 24,
-                  left: 80,
-                  height: '1px',
-                  backgroundColor: 'border.default',
-                }}
-              />
-              <Skeleton width={40} height={40} />
-              <Box
-                sx={{
-                  ml: 8,
-                  flex: 1,
-                }}
-              >
-                <Skeleton width="100%" height={22} />
-                <Skeleton
-                  width={128}
-                  height={16}
-                  sx={{
-                    mt: 4,
-                  }}
-                />
-              </Box>
-            </Box>
-          ))}
-        </>
-      )}
-      {!isLoading && !list.length && (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flexDirection: 'column',
-            mt: 56,
-            gap: 12,
-            typography: 'body2',
-            color: 'text.secondary',
-          }}
-        >
-          <EmptyDataIcon
-            sx={{
-              width: 60,
-              height: 60,
-              borderRadius: 12,
-            }}
-          />
-          <Trans>This is empty</Trans>
-        </Box>
-      )}
-      {!isLoading &&
-        list?.map((item) => {
-          if (!item?.key || !item.chainId) return null;
-          const tx = item.extend?.tx;
-          const status = item.extend?.status;
-          let url = '';
-          if (tx) {
-            const scanUrl = getChain(item.chainId)?.scanUrl ?? '';
-            if (status === StateText.Warning && account) {
-              url = scanUrl + `/address/${account}`;
-            } else {
-              url = scanUrl + `/tx/${tx}`;
-            }
-          }
-          return (
-            <Box
-              key={item.id}
-              onClick={() => {
-                if (!url) return;
-                window.open(url);
-              }}
-              sx={{
-                position: 'relative',
-                display: 'flex',
-                pl: 20,
-                py: 16,
-                borderRadius: 8,
-                ...(url
-                  ? {
-                      cursor: 'pointer',
-                      '&:hover': {
-                        backgroundColor: 'hover.default',
-                      },
-                      '&:not(:hover) > svg:last-child': {
-                        visibility: 'hidden',
-                      },
-                    }
-                  : {}),
-              }}
-            >
-              <Box
-                sx={{
-                  position: 'relative',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: 40,
-                  height: 40,
-                  borderRadius: '50%',
-                  backgroundColor: 'background.paperContrast',
-                }}
-              >
-                <SubmissionTypeIcon brief={item.key} chainId={item.chainId} />
-                <Box
-                  sx={{
-                    position: 'absolute',
-                    bottom: -1,
-                    right: -1,
-                    display: 'flex',
-                    width: 16,
-                    height: 16,
-                    color: 'primary.contrastText',
-                    backgroundColor: 'background.paperContrast',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: 'border.default',
-                    borderRadius: '50%',
-                  }}
-                >
-                  <SubmissionStatusIcon status={status} />
-                </Box>
-              </Box>
-              <Box
-                sx={{
-                  ml: 12,
-                  flex: 1,
-                }}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    fontWeight: 600,
-                  }}
-                >
-                  {getTitleText(item.key, status)}
-                </Box>
-                <Box
-                  sx={{
-                    mt: 12,
-                    typography: 'h6',
-                    color: 'text.secondary',
-                  }}
-                >
-                  {formatReadableTimeAgo({
-                    time: Number(item.createTime),
-                  })}
-                </Box>
-              </Box>
-              {url ? (
-                <Box
-                  component={ArrowRight}
-                  sx={{
-                    mr: 24,
-                    width: 18,
-                    height: 18,
-                    alignSelf: 'center',
-                  }}
-                />
-              ) : (
-                <Box />
-              )}
-            </Box>
-          );
-        })}
-      {isFetchingNextPage ? (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 4,
-            mt: 16,
-            color: 'text.secondary',
-            typography: 'body2',
-          }}
-        >
-          <RotatingIcon
-            sx={{
-              width: 20,
-              color: 'primary.main',
-            }}
-          />
-          <Trans>Loading more</Trans>
-        </Box>
-      ) : (
-        ''
-      )}
-    </>
-  );
-}
-
-export function SubmissionStatusIcon({ status }: { status: string }) {
-  switch (status) {
-    case StateText.Success:
-      return (
-        <Box
-          component={PassedIcon}
-          sx={{
-            width: '100%',
-            height: '100%',
-          }}
-        />
-      );
-    case StateText.Failed:
-      return (
-        <Box
-          component={RejectedIcon}
-          sx={{
-            width: '100%',
-            height: '100%',
-          }}
-        />
-      );
-    case StateText.Warning:
-      return (
-        <Box
-          component={InvalidIcon}
-          sx={{
-            width: '100%',
-            height: '100%',
-          }}
-        />
-      );
-    case StateText.Running:
-      return (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: 'primary.main',
-            borderRadius: '50%',
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          <Box
-            component="svg"
-            width={24}
-            height={24}
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            sx={{
-              width: '92%',
-              height: '92%',
-              color: 'primary.contrastText',
-            }}
-          >
-            <path
-              d="M6 13C6 11.35 6.67 9.85 7.76 8.76L6.34 7.34C4.9 8.79 4 10.79 4 13C4 17.08 7.05 20.44 11 20.93V18.91C8.17 18.43 6 15.97 6 13ZM20 13C20 8.58 16.42 5 12 5C11.94 5 11.88 5.01 11.82 5.01L12.91 3.92L11.5 2.5L8 6L11.5 9.5L12.91 8.09L11.83 7.01C11.89 7.01 11.95 7 12 7C15.31 7 18 9.69 18 13C18 15.97 15.83 18.43 13 18.91V20.93C16.95 20.44 20 17.08 20 13Z"
-              fill="currentColor"
-            />
-          </Box>
-        </Box>
-      );
-
-    default:
-      break;
-  }
-  return null;
-}
-
-export function getTitleText(brief: string, status: string) {
-  const prefix = getSubmitTitleByBrief(brief);
-  const statusLangMap: { [key: string]: string } = {
-    [StateText.Success]: t`Succeeded`,
-    [StateText.Failed]: t`Failed`,
-    [StateText.Running]: t`Pending`,
-    [StateText.Warning]: t`Reset`,
-  };
-  const suffix = statusLangMap[status];
-  return suffix ? `${prefix} ${suffix}` : prefix;
-}
-
-export function getSubmitTitleByBrief(brief: string) {
-  const prefixTypeTextMap: {
-    [key: string]: string;
-  } = {
-    'common.approve.resetBrief': t`Reset`,
-    'common.approve.brief': t`Approve`,
-  };
-  const matchPrefixKey = Object.keys(prefixTypeTextMap).find(
-    (prefixKey) => brief.indexOf(prefixKey) === 0,
-  );
-  if (matchPrefixKey) {
-    return prefixTypeTextMap[matchPrefixKey];
-  }
-  switch (brief) {
-    case 'tradingCard.submissionBrief':
-    case 'limit.main.title':
-    case 'exchange.tabs.RFQ':
-    case 'bridge.order.execute-bridge':
-      return t`Swap`;
-    case 'bridge.order.execute-bridge':
-      return t`Transfer`;
-    case 'liquidity.operate.title':
-    case 'pool.amm-v2.add-liquidity.title':
-    case 'pool.amm-v3.add-liquidity.title':
-      return t`Add Liquidity`;
-    case 'liquidity.operate.remove.title':
-    case 'pool.amm-v2.remove-liquidity.title':
-    case 'pool.amm-v3.remove-liquidity.title':
-      return t`Remove Liquidity`;
-    case 'pool.my-pools.create-a-pool':
-    case 'pool.amm-v2.create.title':
-    case 'pool.amm-v3.create.title':
-      return t`Pool Creation`;
-    case 'mining.stake':
-      return t`Stake`;
-    case 'mining.submit.remove-title':
-      return t`End mining\n`;
-    case 'mining.deposit.receive-reward':
-    case 'pool.amm-v3.receive-reward.title':
-      return t`Claim Rewards`;
-    case 'nav.create-mining':
-      return t`Create Liquidity Mining`;
-
-    case 'wallet.account.card.operate.send':
-      return t`Send`;
-
-    default:
-      return null;
-  }
-}
-
-type IconMap = {
-  [key: string]: React.ReactElement;
-};
-export function SubmissionTypeIcon({
-  brief,
-  chainId,
-}: {
-  brief: string;
-  chainId: number;
-}) {
-  const { getChain } = useWalletConnectContext();
-  const prefixTypeIconMap: IconMap = {
-    'common.approve.resetBrief': (
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 13C6 11.35 6.67 9.85 7.76 8.76L6.34 7.34C4.9 8.79 4 10.79 4 13C4 17.08 7.05 20.44 11 20.93V18.91C8.17 18.43 6 15.97 6 13ZM20 13C20 8.58 16.42 5 12 5C11.94 5 11.88 5.01 11.82 5.01L12.91 3.92L11.5 2.5L8 6L11.5 9.5L12.91 8.09L11.83 7.01C11.89 7.01 11.95 7 12 7C15.31 7 18 9.69 18 13C18 15.97 15.83 18.43 13 18.91V20.93C16.95 20.44 20 17.08 20 13Z"
-          fill="currentColor"
-        />
-      </svg>
-    ),
-    'common.approve.brief': (
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM9 6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H9V6ZM14 14C14 14.7364 13.5967 15.3831 13 15.7303V18H11V15.7303C10.4033 15.3831 10 14.7364 10 14C10 12.9 10.9 12 12 12C13.1 12 14 12.9 14 14Z"
-          fill="currentColor"
-        />
-      </svg>
-    ),
-  };
-  const matchPrefixKey = Object.keys(prefixTypeIconMap).find(
-    (prefixKey) => brief.indexOf(prefixKey) === 0,
-  );
-  if (matchPrefixKey) {
-    return (
-      <Box
-        sx={{
-          width: 24,
-          height: 24,
-          color: 'text.secondary',
-        }}
-      >
-        {prefixTypeIconMap[matchPrefixKey]}
-      </Box>
-    );
-  }
-
-  if (brief === 'wallet.account.card.operate.send') {
-    return <ArrowBack className="w-6 h-6 rotate-90" />;
-  }
-
-  const swapTypes = [
-    'tradingCard.submissionBrief',
-    'limit.main.title',
-    'exchange.tabs.RFQ',
-    'bridge.order.execute-bridge',
-  ];
-  if (swapTypes.includes(brief)) {
-    const chainLogo = getChain(chainId)?.logo;
-    if (!chainLogo) return null;
-    return (
-      <Box
-        sx={{
-          width: 24,
-          height: 24,
-          color: 'text.secondary',
-        }}
-      >
-        {chainLogo}
-      </Box>
-    );
-  }
-
-  const PoolIcon = (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className="active-color"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7 3.77979C7.47668 3.77979 7.8871 4.11624 7.98058 4.58367C8.22292 5.79538 8.95318 6.97446 9.92213 7.76492C11.2407 8.84061 12 10.2058 12 11.7298C12 14.4891 9.76515 16.7798 7 16.7798C4.23484 16.7798 2 14.4891 2 11.7298C2 10.2237 2.74214 8.83345 4.0853 7.75892C5.05247 6.98519 5.77579 5.80184 6.01942 4.58367C6.1129 4.11624 6.52332 3.77979 7 3.77979Z"
-        fill="currentColor"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M14 1.5C14.4794 1.5 14.8913 1.84022 14.982 2.31097C15.4329 4.65329 16.7694 6.47608 18.6541 8.07351C20.8277 9.91584 22 12.1786 22 14.6364C22 19.2681 18.3582 22.5 14 22.5C11.1133 22.5 8.5408 21.082 7.13281 18.7785C10.9673 18.7065 14 15.5225 14 11.7298C14 9.47755 12.8621 7.58357 11.1898 6.21802C12.0968 5.07887 12.732 3.79698 13.018 2.31097C13.1086 1.84022 13.5206 1.5 14 1.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-
-  const MiningIcon = (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_331_763)">
-        <path
-          d="M9.69961 7.1L9.39961 8H14.6996L13.0996 3.3L12.6996 2H11.3996L9.69961 7.1Z"
-          fill="currentColor"
-        />
-        <path
-          d="M9.39961 10L12.0996 18.2L14.6996 10H9.39961Z"
-          fill="currentColor"
-        />
-        <path
-          d="M16.7996 8H22.4996C22.4996 7.9 22.3996 7.9 22.3996 7.8L18.0996 2.6C17.9996 2.5 17.8996 2.3 17.6996 2.2C17.5996 2.1 17.3996 2 17.1996 2C16.9996 2 16.8996 2 16.6996 2H14.7996L16.7996 8Z"
-          fill="currentColor"
-        />
-        <path
-          d="M16.7996 10L13.1996 21.1C13.2996 21 13.3996 20.9 13.3996 20.9L22.3996 10.2C22.3996 10.1 22.4996 10.1 22.4996 10H16.7996Z"
-          fill="currentColor"
-        />
-        <path
-          className="active-color"
-          d="M7.29961 8L9.09961 2.7L9.29961 2H7.39961C7.29961 2 7.09961 2 6.89961 2.1C6.69961 2.1 6.59961 2.2 6.39961 2.3C6.29961 2.4 6.19961 2.5 6.09961 2.6L1.69961 7.9L1.59961 8H7.29961Z"
-          fill="currentColor"
-        />
-        <path
-          className="active-color"
-          d="M7.29961 10H1.59961C1.59961 10.1 1.69961 10.1 1.69961 10.2L10.6996 21C10.7996 21.1 10.7996 21.2 10.8996 21.3L7.29961 10Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_331_763">
-          <rect
-            width="20.9"
-            height="19.2"
-            fill="white"
-            transform="translate(1.59961 2)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-
-  const typeIconMap: IconMap = {
-    'pool.my-pools.create-a-pool': PoolIcon,
-    'pool.detail.modify-dpp-parameters': PoolIcon,
-    'liquidity.operate.remove.title': PoolIcon,
-    'liquidity.operate.title': PoolIcon,
-    'pool.amm-v2.create.title': PoolIcon,
-    'pool.amm-v2.remove-liquidity.title': PoolIcon,
-    'pool.amm-v2.add-liquidity.title': PoolIcon,
-    'pool.amm-v3.create.title': PoolIcon,
-    'pool.amm-v3.add-liquidity.title': PoolIcon,
-    'pool.amm-v3.remove-liquidity.title': PoolIcon,
-    'pool.amm-v3.receive-reward.title': PoolIcon,
-    'nav.create-mining': MiningIcon,
-    'mining.deposit.receive-reward': MiningIcon,
-    'mining.stake': MiningIcon,
-    'mining.submit.remove-title': MiningIcon,
-  };
-  const Icon = typeIconMap[brief];
-  if (!Icon) return null;
-  return (
-    <Box
-      sx={{
-        width: 24,
-        height: 24,
-        color: 'text.secondary',
-      }}
-    >
-      {Icon}
-    </Box>
-  );
-}
+'use client';
+
+import { Box, EmptyDataIcon, RotatingIcon, Skeleton } from '@dodoex/components';
+import {
+  ArrowRight,
+  DoneFilled as PassedIcon,
+  ErrorFilled as RejectedIcon,
+  InvalidFilled as InvalidIcon,
+  ArrowBack,
+} from '@dodoex/icons';
+import { useWalletStore } from '@dodoex/wallet-web3';
+import { t, Trans } from '@lingui/macro';
+import { debounce } from 'lodash';
+import React from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
+import {
+  NoticeTransactionList,
+  StateText,
+  useTransactionList,
+} from '../hooks/useTransactionList';
+import { formatReadableTimeAgo } from '../utils/time';
+import { increaseArray } from '../utils/utils';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+
+export default function ActivityList({
+  getScrollParent,
+  fetchTransactionQuery,
+}: {
+  getScrollParent: () => HTMLDivElement | null;
+  fetchTransactionQuery: ReturnType<typeof useTransactionList>;
+}) {
+  const { account } = useWalletStore();
+
+  return (
+    <InfiniteScroll
+      useWindow={false}
+      hasMore={fetchTransactionQuery.hasNextPage}
+      threshold={300}
+      getScrollParent={getScrollParent}
+      loadMore={debounce(() => {
+        if (
+          fetchTransactionQuery.hasNextPage &&
+          !fetchTransactionQuery.isFetchingNextPage
+        ) {
+          fetchTransactionQuery.fetchNextPage();
+        }
+      }, 500)}
+    >
+      <TransactionList
+        account={account}
+        isLoading={fetchTransactionQuery.isLoading}
+        isFetchingNextPage={fetchTransactionQuery.isFetchingNextPage}
+        list={fetchTransactionQuery.list}
+      />
+    </InfiniteScroll>
+  );
+}
+
+export function TransactionList({
+  account,
+  isLoading,
+  isFetchingNextPage,
+  list,
+}: {
+  account: string | undefined;
+  isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  list: NoticeTransactionList;
+}) {
+  const { getChain } = useWalletConnectContext();
+  return (
+    <>
+      {isLoading && (
+        <>
+          {increaseArray(3).map((i) => (
+            <Box
+              key={i}
+              sx={{
+                position: 'relative',
+                display: 'flex',
+                width: '100%',
+                pl: 24,
+                pr: 48,
+                py: 20,
+              }}
+            >
+              <Box
+                sx={{
+                  position: 'absolute',
+                  bottom: 0,
+                  right: 24,
+                  left: 80,
+                  height: '1px',
+                  backgroundColor: 'border.default',
+                }}
+              />
+              <Skeleton width={40} height={40} />
+              <Box
+                sx={{
+                  ml: 8,
+                  flex: 1,
+                }}
+              >
+                <Skeleton width="100%" height={22} />
+                <Skeleton
+                  width={128}
+                  height={16}
+                  sx={{
+                    mt: 4,
+                  }}
+                />
+              </Box>
+            </Box>
+          ))}
+        </>
+      )}
+      {!isLoading && !list.length && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexDirection: 'column',
+            mt: 56,
+            gap: 12,
+            typography: 'body2',
+            color: 'text.secondary',
+          }}
+        >
+          <EmptyDataIcon
+            sx={{
+              width: 60,
+              height: 60,
+              borderRadius: 12,
+            }}
+          />
+          <Trans>This is empty</Trans>
+        </Box>
+      )}
+      {!isLoading &&
+        list?.map((item) => {
+          if (!item?.key || !item.chainId) return null;
+          const tx = item.extend?.tx;
+          const status = item.extend?.status;
+          let url = '';
+          if (tx) {
+            const scanUrl = getChain(item.chainId)?.scanUrl ?? '';
+            if (status === StateText.Warning && account) {
+              url = scanUrl + `/address/${account}`;
+            } else {
+              url = scanUrl + `/tx/${tx}`;
+            }
+          }
+          return (
+            <Box
+              key={item.id}
+              onClick={() => {
+                if (!url) return;
+                window.open(url);
+              }}
+              sx={{
+                position: 'relative',
+                display: 'flex',
+                pl: 20,
+                py: 16,
+                borderRadius: 8,
+                ...(url
+                  ? {
+                      cursor: 'pointer',
+                      '&:hover': {
+                        backgroundColor: 'hover.default',
+                      },
+                      '&:not(:hover) > svg:last-child': {
+                        visibility: 'hidden',
+                      },
+                    }
+                  : {}),
+              }}
+            >
+              <Box
+                sx={{
+                  position: 'relative',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 40,
+                  height: 40,
+                  borderRadius: '50%',
+                  backgroundColor: 'background.paperContrast',
+                }}
+              >
+                <SubmissionTypeIcon brief={item.key} chainId={item.chainId} />
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    bottom: -1,
+                    right: -1,
+                    display: 'flex',
+                    width: 16,
+                    height: 16,
+                    color: 'primary.contrastText',
+                    backgroundColor: 'background.paperContrast',
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    borderColor: 'border.default',
+                    borderRadius: '50%',
+                  }}
+                >
+                  <SubmissionStatusIcon status={status} />
+                </Box>
+              </Box>
+              <Box
+                sx={{
+                  ml: 12,
+                  flex: 1,
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    fontWeight: 600,
+                  }}
+                >
+                  {getTitleText(item.key, status)}
+                </Box>
+                <Box
+                  sx={{
+                    mt: 12,
+                    typography: 'h6',
+                    color: 'text.secondary',
+                  }}
+                >
+                  {formatReadableTimeAgo({
+                    time: Number(item.createTime),
+                  })}
+                </Box>
+              </Box>
+              {url ? (
+                <Box
+                  component={ArrowRight}
+                  sx={{
+                    mr: 24,
+                    width: 18,
+                    height: 18,
+                    alignSelf: 'center',
+                  }}
+                />
+              ) : (
+                <Box />
+              )}
+            </Box>
+          );
+        })}
+      {isFetchingNextPage ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+            mt: 16,
+            color: 'text.secondary',
+            typography: 'body2',
+          }}
+        >
+          <RotatingIcon
+            sx={{
+              width: 20,
+              color: 'primary.main',
+            }}
+          />
+          <Trans>Loading more</Trans>
+        </Box>
+      ) : (
+        ''
+      )}
+    </>
+  );
+}
+
+export function SubmissionStatusIcon({ status }: { status: string }) {
+  switch (status) {
+    case StateText.Success:
+      return (
+        <Box
+          component={PassedIcon}
+          sx={{
+            width: '100%',
+            height: '100%',
+          }}
+        />
+      );
+    case StateText.Failed:
+      return (
+        <Box
+          component={RejectedIcon}
+          sx={{
+            width: '100%',
+            height: '100%',
+          }}
+        />
+      );
+    case StateText.Warning:
+      return (
+        <Box
+          component={InvalidIcon}
+          sx={{
+            width: '100%',
+            height: '100%',
+          }}
+        />
+      );
+    case StateText.Running:
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'primary.main',
+            borderRadius: '50%',
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          <Box
+            component="svg"
+            width={24}
+            height={24}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            sx={{
+              width: '92%',
+              height: '92%',
+              color: 'primary.contrastText',
+            }}
+          >
+            <path
+              d="M6 13C6 11.35 6.67 9.85 7.76 8.76L6.34 7.34C4.9 8.79 4 10.79 4 13C4 17.08 7.05 20.44 11 20.93V18.91C8.17 18.43 6 15.97 6 13ZM20 13C20 8.58 16.42 5 12 5C11.94 5 11.88 5.01 11.82 5.01L12.91 3.92L11.5 2.5L8 6L11.5 9.5L12.91 8.09L11.83 7.01C11.89 7.01 11.95 7 12 7C15.31 7 18 9.69 18 13C18 15.97 15.83 18.43 13 18.91V20.93C16.95 20.44 20 17.08 20 13Z"
+              fill="currentColor"
+            />
+          </Box>
+        </Box>
+      );
+
+    default:
+      break;
+  }
+  return null;
+}
+
+export function getTitleText(brief: string, status: string) {
+  const prefix = getSubmitTitleByBrief(brief);
+  const statusLangMap: { [key: string]: string } = {
+    [StateText.Success]: t`Succeeded`,
+    [StateText.Failed]: t`Failed`,
+    [StateText.Running]: t`Pending`,
+    [StateText.Warning]: t`Reset`,
+  };
+  const suffix = statusLangMap[status];
+  return suffix ? `${prefix} ${suffix}` : prefix;
+}
+
+export function getSubmitTitleByBrief(brief: string) {
+  const prefixTypeTextMap: {
+    [key: string]: string;
+  } = {
+    'common.approve.resetBrief': t`Reset`,
+    'common.approve.brief': t`Approve`,
+  };
+  const matchPrefixKey = Object.keys(prefixTypeTextMap).find(
+    (prefixKey) => brief.indexOf(prefixKey) === 0,
+  );
+  if (matchPrefixKey) {
+    return prefixTypeTextMap[matchPrefixKey];
+  }
+  switch (brief) {
+    case 'tradingCard.submissionBrief':
+    case 'limit.main.title':
+    case 'exchange.tabs.RFQ':
+    case 'bridge.order.execute-bridge':
+      return t`Swap`;
+    case 'bridge.order.execute-bridge':
+      return t`Transfer`;
+    case 'liquidity.operate.title':
+    case 'pool.amm-v2.add-liquidity.title':
+    case 'pool.amm-v3.add-liquidity.title':
+      return t`Add Liquidity`;
+    case 'liquidity.operate.remove.title':
+    case 'pool.amm-v2.remove-liquidity.title':
+    case 'pool.amm-v3.remove-liquidity.title':
+      return t`Remove Liquidity`;
+    case 'pool.my-pools.create-a-pool':
+    case 'pool.amm-v2.create.title':
+    case 'pool.amm-v3.create.title':
+      return t`Pool Creation`;
+    case 'mining.stake':
+      return t`Stake`;
+    case 'mining.submit.remove-title':
+      return t`End mining\n`;
+    case 'mining.deposit.receive-reward':
+    case 'pool.amm-v3.receive-reward.title':
+      return t`Claim Rewards`;
+    case 'nav.create-mining':
+      return t`Create Liquidity Mining`;
+
+    case 'wallet.account.card.operate.send':
+      return t`Send`;
+
+    default:
+      return null;
+  }
+}
+
+type IconMap = {
+  [key: string]: React.ReactElement;
+};
+export function SubmissionTypeIcon({
+  brief,
+  chainId,
+}: {
+  brief: string;
+  chainId: number;
+}) {
+  const { getChain } = useWalletConnectContext();
+  const prefixTypeIconMap: IconMap = {
+    'common.approve.resetBrief': (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 13C6 11.35 6.67 9.85 7.76 8.76L6.34 7.34C4.9 8.79 4 10.79 4 13C4 17.08 7.05 20.44 11 20.93V18.91C8.17 18.43 6 15.97 6 13ZM20 13C20 8.58 16.42 5 12 5C11.94 5 11.88 5.01 11.82 5.01L12.91 3.92L11.5 2.5L8 6L11.5 9.5L12.91 8.09L11.83 7.01C11.89 7.01 11.95 7 12 7C15.31 7 18 9.69 18 13C18 15.97 15.83 18.43 13 18.91V20.93C16.95 20.44 20 17.08 20 13Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+    'common.approve.brief': (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM9 6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H9V6ZM14 14C14 14.7364 13.5967 15.3831 13 15.7303V18H11V15.7303C10.4033 15.3831 10 14.7364 10 14C10 12.9 10.9 12 12 12C13.1 12 14 12.9 14 14Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  };
+  const matchPrefixKey = Object.keys(prefixTypeIconMap).find(
+    (prefixKey) => brief.indexOf(prefixKey) === 0,
+  );
+  if (matchPrefixKey) {
+    return (
+      <Box
+        sx={{
+          width: 24,
+          height: 24,
+          color: 'text.secondary',
+        }}
+      >
+        {prefixTypeIconMap[matchPrefixKey]}
+      </Box>
+    );
+  }
+
+  if (brief === 'wallet.account.card.operate.send') {
+    return <ArrowBack className="w-6 h-6 rotate-90" />;
+  }
+
+  const swapTypes = [
+    'tradingCard.submissionBrief',
+    'limit.main.title',
+    'exchange.tabs.RFQ',
+    'bridge.order.execute-bridge',
+  ];
+  if (swapTypes.includes(brief)) {
+    const chainLogo = getChain(chainId)?.logo;
+    if (!chainLogo) return null;
+    return (
+      <Box
+        sx={{
+          width: 24,
+          height: 24,
+          color: 'text.secondary',
+        }}
+      >
+        {chainLogo}
+      </Box>
+    );
+  }
+
+  const PoolIcon = (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className="active-color"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 3.77979C7.47668 3.77979 7.8871 4.11624 7.98058 4.58367C8.22292 5.79538 8.95318 6.97446 9.92213 7.76492C11.2407 8.84061 12 10.2058 12 11.7298C12 14.4891 9.76515 16.7798 7 16.7798C4.23484 16.7798 2 14.4891 2 11.7298C2 10.2237 2.74214 8.83345 4.0853 7.75892C5.05247 6.98519 5.77579 5.80184 6.01942 4.58367C6.1129 4.11624 6.52332 3.77979 7 3.77979Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 1.5C14.4794 1.5 14.8913 1.84022 14.982 2.31097C15.4329 4.65329 16.7694 6.47608 18.6541 8.07351C20.8277 9.91584 22 12.1786 22 14.6364C22 19.2681 18.3582 22.5 14 22.5C11.1133 22.5 8.5408 21.082 7.13281 18.7785C10.9673 18.7065 14 15.5225 14 11.7298C14 9.47755 12.8621 7.58357 11.1898 6.21802C12.0968 5.07887 12.732 3.79698 13.018 2.31097C13.1086 1.84022 13.5206 1.5 14 1.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+
+  const MiningIcon = (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_331_763)">
+        <path
+          d="M9.69961 7.1L9.39961 8H14.6996L13.0996 3.3L12.6996 2H11.3996L9.69961 7.1Z"
+          fill="currentColor"
+        />
+        <path
+          d="M9.39961 10L12.0996 18.2L14.6996 10H9.39961Z"
+          fill="currentColor"
+        />
+        <path
+          d="M16.7996 8H22.4996C22.4996 7.9 22.3996 7.9 22.3996 7.8L18.0996 2.6C17.9996 2.5 17.8996 2.3 17.6996 2.2C17.5996 2.1 17.3996 2 17.1996 2C16.9996 2 16.8996 2 16.6996 2H14.7996L16.7996 8Z"
+          fill="currentColor"
+        />
+        <path
+          d="M16.7996 10L13.1996 21.1C13.2996 21 13.3996 20.9 13.3996 20.9L22.3996 10.2C22.3996 10.1 22.4996 10.1 22.4996 10H16.7996Z"
+          fill="currentColor"
+        />
+        <path
+          className="active-color"
+          d="M7.29961 8L9.09961 2.7L9.29961 2H7.39961C7.29961 2 7.09961 2 6.89961 2.1C6.69961 2.1 6.59961 2.2 6.39961 2.3C6.29961 2.4 6.19961 2.5 6.09961 2.6L1.69961 7.9L1.59961 8H7.29961Z"
+          fill="currentColor"
+        />
+        <path
+          className="active-color"
+          d="M7.29961 10H1.59961C1.59961 10.1 1.69961 10.1 1.69961 10.2L10.6996 21C10.7996 21.1 10.7996 21.2 10.8996 21.3L7.29961 10Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_331_763">
+          <rect
+            width="20.9"
+            height="19.2"
+            fill="white"
+            transform="translate(1.59961 2)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+
+  const typeIconMap: IconMap = {
+    'pool.my-pools.create-a-pool': PoolIcon,
+    'pool.detail.modify-dpp-parameters': PoolIcon,
+    'liquidity.operate.remove.title': PoolIcon,
+    'liquidity.operate.title': PoolIcon,
+    'pool.amm-v2.create.title': PoolIcon,
+    'pool.amm-v2.remove-liquidity.title': PoolIcon,
+    'pool.amm-v2.add-liquidity.title': PoolIcon,
+    'pool.amm-v3.create.title': PoolIcon,
+    'pool.amm-v3.add-liquidity.title': PoolIcon,
+    'pool.amm-v3.remove-liquidity.title': PoolIcon,
+    'pool.amm-v3.receive-reward.title': PoolIcon,
+    'nav.create-mining': MiningIcon,
+    'mining.deposit.receive-reward': MiningIcon,
+    'mining.stake': MiningIcon,
+    'mining.submit.remove-title': MiningIcon,
+  };
+  const Icon = typeIconMap[brief];
+  if (!Icon) return null;
+  return (
+    <Box
+      sx={{
+        width: 24,
+        height: 24,
+        color: 'text.secondary',
+      }}
+    >
+      {Icon}
+    </Box>
+  );
+}