@dodoex/wallet-web3-react 0.0.1-beta.0

package/src/WalletConnect/ActivityList.tsx

@@ -0,0 +1,597 @@
+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 />
+          <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,
+                ...(url
+                  ? {
+                      cursor: 'pointer',
+                      '&:hover': {
+                        backgroundColor: 'hover.default',
+                      },
+                      '&:not(:hover) > svg:last-child': {
+                        visibility: 'hidden',
+                      },
+                    }
+                  : {}),
+              }}
+            >
+              <Box
+                sx={{
+                  position: 'relative',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  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
+          fill-rule="evenodd"
+          clip-rule="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>
+  );
+}