+
+
+
+
+ {Array(4)
+ .fill(0)
+ .map((_e, i) => (
+
+
+
+ {t('global.Nonce')}
+
+ {isShowOptionList ? (
+
+
+ ) : null}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ 
+
+ );
+ }
+
+ return (
+
+
+ Fail to load pending transactions,{' '}
+ {
+ refreshAsync();
+ }}
+ className="underline cursor-pointer"
+ >
+ Retry
+
+
+
+
+ {recommendNonce != null ? (
+
+ );
+};
+
+const PendingOptionContent = ({
+ data,
+ chainId,
+}: {
+ data: SafeTransactionItem;
+ chainId: number;
+}) => {
+ const wallet = useWallet();
+ const { t } = useTranslation();
+ const { data: res, loading } = useRequest(
+ async () => {
+ const chain = findChainByID(chainId)!;
+ return wallet.openapi.parseTx({
+ chainId: chain.serverId,
+ tx: {
+ chainId,
+ from: data.safe,
+ to: data.to,
+ data: data.data || '0x',
+ value: `0x${Number(data.value).toString(16)}`,
+ nonce: intToHex(data.nonce),
+ gasPrice: '0x0',
+ gas: '0x0',
+ },
+ origin: origin || '',
+ addr: data.safe,
+ });
+ },
+ {
+ cacheKey: `gnosis-parse-tx-${data.safe}-${data.to}-${data.nonce}-${data?.data}`,
+ staleTime: 10000,
+ }
+ );
+
+ const content = useMemo(() => {
+ return getActionTypeTextByType(res?.action?.type || '');
+ }, [res?.action?.type]);
+
+ return (
+
+ {
+ onChange?.(recommendNonce);
+ }}
+ >
+ {recommendNonce} - {t('page.signTx.SafeNonceSelector.option.new')}
+
+
+ ) : null}
+ {pendingList?.length ? (
+
+ {t('page.signTx.SafeNonceSelector.optionGroup.recommendTitle')}
+
+
+ {
+ onChange?.(item.nonce);
+ }}
+ >
+
+ );
+ })}
+
+ ) : null}
+
+ {t('page.signTx.SafeNonceSelector.optionGroup.replaceTitle')}
+
+ {pendingOptionlist?.map((item) => {
+ return (
+
+ {data.nonce} - {loading ? '' : content}
+
+ );
+};
+
+const OptionListItem = ({
+ children,
+ checked,
+ onClick,
+}: {
+ children?: ReactNode;
+ checked?: boolean;
+ onClick?: MouseEventHandler
+ {children}
+ {checked ? (
+ 
+ ) : (
+ 
+ )}
+
+ );
+};
diff --git a/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx b/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx
index 1be664f31ed..c32717c662c 100644
--- a/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx
+++ b/src/ui/views/GnosisTransactionQueue/GnosisTransactionQueueList.tsx
@@ -1,47 +1,50 @@
-import React, { useEffect, useState } from 'react';
-import { Button, message, Skeleton, Tabs, Tooltip } from 'antd';
-import clsx from 'clsx';
-import Safe, { BasicSafeInfo } from '@rabby-wallet/gnosis-sdk';
+import { BasicSafeInfo } from '@rabby-wallet/gnosis-sdk';
+import { SafeTransactionItem } from '@rabby-wallet/gnosis-sdk/dist/api';
+import { Button, Skeleton, Tooltip, message } from 'antd';
import {
- SafeTransactionItem,
- SafeInfo,
-} from '@rabby-wallet/gnosis-sdk/dist/api';
-import { useTranslation, Trans } from 'react-i18next';
-import { toChecksumAddress, numberToHex } from 'web3-utils';
-import dayjs from 'dayjs';
-import { groupBy, sortBy } from 'lodash';
-import { ExplainTxResponse } from 'background/service/openapi';
+ ApproveAction,
+ ExplainTxResponse,
+ ParseTxResponse,
+ RevokeTokenApproveAction,
+ SendAction,
+} from 'background/service/openapi';
import { Account } from 'background/service/preference';
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import { get, groupBy } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { numberToHex, toChecksumAddress } from 'web3-utils';
-import { intToHex } from 'ethereumjs-util';
-import { timeago, isSameAddress, useWallet } from 'ui/utils';
-import {
- validateEOASign,
- validateETHSign,
- crossCompareOwners,
-} from 'ui/utils/gnosis';
+import { useGnosisSafeInfo } from '@/ui/hooks/useGnosisSafeInfo';
+import { useAccount } from '@/ui/store-hooks';
+import { LoadingOutlined } from '@ant-design/icons';
import { SafeTransactionDataPartial } from '@gnosis.pm/safe-core-sdk-types';
-import { splitNumberByStep } from 'ui/utils/number';
-import { PageHeader, NameAndAddress } from 'ui/component';
-import AccountSelectDrawer from 'ui/component/AccountSelectDrawer';
import {
CHAINS,
CHAINS_ENUM,
INTERNAL_REQUEST_ORIGIN,
KEYRING_CLASS,
} from 'consts';
-import IconUnknown from 'ui/assets/icon-unknown.svg';
+import { intToHex } from 'ethereumjs-util';
+import { useHistory } from 'react-router-dom';
import IconUser from 'ui/assets/address-management.svg';
import IconChecked from 'ui/assets/checked.svg';
-import IconUnCheck from 'ui/assets/uncheck.svg';
-import { SvgIconLoading } from 'ui/assets';
-import IconTagYou from 'ui/assets/tag-you.svg';
+import IconUnknown from 'ui/assets/icon-unknown.svg';
import IconInformation from 'ui/assets/information.svg';
+import IconTagYou from 'ui/assets/tag-you.svg';
+import IconUnCheck from 'ui/assets/uncheck.svg';
+import { NameAndAddress } from 'ui/component';
+import AccountSelectDrawer from 'ui/component/AccountSelectDrawer';
+import { isSameAddress, timeago, useWallet } from 'ui/utils';
+import { validateEOASign, validateETHSign } from 'ui/utils/gnosis';
+import { splitNumberByStep } from 'ui/utils/number';
+import { ReplacePopup } from './components/ReplacePopup';
import './style.less';
-import { useRabbyDispatch, useRabbySelector } from '@/ui/store';
-import { LoadingOutlined } from '@ant-design/icons';
-import { useGnosisSafeInfo } from '@/ui/hooks/useGnosisSafeInfo';
-import { useAccount } from '@/ui/store-hooks';
+import { findChainByID } from '@/utils/chain';
+import { getTokenSymbol } from '@/ui/utils/token';
+import { useRequest } from 'ahooks';
+import { getProtocol } from '../Approval/components/Actions/utils';
interface TransactionConfirmationsProps {
confirmations: SafeTransactionItem['confirmations'];
@@ -165,25 +168,47 @@ const TransactionExplain = ({
explain,
onView,
isViewLoading,
+ serverId,
}: {
- explain: ExplainTxResponse;
+ explain: ParseTxResponse;
isViewLoading: boolean;
onView(): void;
+ serverId: string;
}) => {
const { t } = useTranslation();
let icon: React.ReactNode = (
= safeInfo.threshold &&
- data.nonce === safeInfo.nonce,
- })}
- >
- setIsShowReplacePopup(false)}
+ onSelect={handleReplace}
+ />
+
);
};
diff --git a/src/ui/views/GnosisTransactionQueue/components/ReplacePopup.tsx b/src/ui/views/GnosisTransactionQueue/components/ReplacePopup.tsx
new file mode 100644
index 00000000000..6216d77fd2c
--- /dev/null
+++ b/src/ui/views/GnosisTransactionQueue/components/ReplacePopup.tsx
@@ -0,0 +1,117 @@
+import { Popup } from '@/ui/component';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled, { createGlobalStyle } from 'styled-components';
+import IconArrowRight from 'ui/assets/dashboard/settings/icon-right-arrow.svg';
+
+const GlobalStyle = createGlobalStyle`
+ .safe-replace-popup {
+ .ant-drawer-title {
+ color: var(--r-neutral-title-1, #192945);
+ font-size: 17px;
+ line-height: 20px;
+ font-weight: 500;
+ text-align: left;
+ }
+ .ant-drawer-body {
+ padding-top: 12px;
+ padding-bottom: 22px
+ }
+ }
+`;
+
+const Wrapper = styled.div`
+ .desc {
+ color: var(--r-neutral-body, #3e495e);
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 20px;
+ line-height: 17px;
+ }
+ .option-list {
+ &-item {
+ display: flex;
+ align-items: center;
+ border-radius: 6px;
+ background: var(--r-neutral-card-2, #f2f4f7);
+ border: 1px solid transparent;
+ padding: 15px;
+ cursor: pointer;
+
+ &:not(:last-child) {
+ margin-bottom: 12px;
+ }
+
+ &:hover {
+ border: 1px solid var(--r-blue-default, #7084ff);
+ background: var(--r-blue-light-1, #eef1ff);
+ }
+
+ &-content {
+ color: var(--r-neutral-title-1, #192945);
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 18px;
+ }
+ &-right {
+ margin-left: auto;
+ }
+ }
+ }
+`;
+
+interface ReplacePopupProps {
+ visible?: boolean;
+ onClose?: () => void;
+ onSelect?: (value: string) => void;
+}
+export const ReplacePopup = ({
+ visible,
+ onClose,
+ onSelect,
+}: ReplacePopupProps) => {
+ const { t } = useTranslation();
+ const options = [
+ {
+ label: t('page.safeQueue.ReplacePopup.options.send'),
+ value: 'send',
+ },
+ {
+ label: t('page.safeQueue.ReplacePopup.options.reject'),
+ value: 'reject',
+ },
+ ];
+ return (
+
+
+
+
+ );
+};
diff --git a/src/ui/views/GnosisTransactionQueue/style.less b/src/ui/views/GnosisTransactionQueue/style.less
index c7ec593e523..1bdf0218abe 100644
--- a/src/ui/views/GnosisTransactionQueue/style.less
+++ b/src/ui/views/GnosisTransactionQueue/style.less
@@ -92,17 +92,31 @@
}
&__footer {
display: flex;
- justify-content: center;
- margin-top: 20px;
- .submit-btn {
- width: 172px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-top: 12px;
+
+ .ant-btn {
+ font-size: 13px;
+ border-radius: 4px;
height: 36px;
padding: 0;
- .ant-btn {
- width: 172px;
- height: 36px;
- padding: 0;
+ }
+ .ant-btn-primary[disabled],
+ .ant-btn-primary[disabled]:hover,
+ .ant-btn-primary[disabled]:focus,
+ .ant-btn-primary[disabled]:active {
+ background-color: rgba(112, 132, 255, 0.4);
+ border: none;
+ &:before {
+ display: none;
}
+ }
+
+ .submit-btn {
+ width: 204px;
+
span {
font-weight: 500;
font-size: 13px;
@@ -110,6 +124,16 @@
text-align: center;
}
}
+ .replace-btn {
+ width: 120px;
+ &:hover {
+ &::before {
+ display: none;
+ }
+ background-color: #8697ff1a !important;
+ box-shadow: none;
+ }
+ }
}
.tx-confirm {
background: @color-bg;
diff --git a/src/ui/views/SendToken/index.tsx b/src/ui/views/SendToken/index.tsx
index 78efbb1770a..14fa3a79dcd 100644
--- a/src/ui/views/SendToken/index.tsx
+++ b/src/ui/views/SendToken/index.tsx
@@ -48,6 +48,7 @@ import { filterRbiSource, useRbiSource } from '@/ui/utils/ga-event';
import { UIContactBookItem } from '@/background/service/contactBook';
import {
findChainByEnum,
+ findChainByID,
findChainByServerID,
makeTokenFromChain,
} from '@/utils/chain';
@@ -303,10 +304,19 @@ const SendToken = () => {
time_at: 0,
amount: 0,
});
+
+ const [safeInfo, setSafeInfo] = useState<{
+ chainId: number;
+ nonce: number;
+ } | null>(null);
const persistPageStateCache = useCallback(
async (nextStateCache?: {
values?: FormSendToken;
currentToken?: TokenItem | null;
+ safeInfo?: {
+ chainId: number;
+ nonce: number;
+ };
}) => {
await wallet.setPageStateCache({
path: history.location.pathname,
@@ -315,11 +325,12 @@ const SendToken = () => {
states: {
values: form.getFieldsValue(),
currentToken,
+ safeInfo,
...nextStateCache,
},
});
},
- [wallet, history, form, currentToken]
+ [wallet, history, form, currentToken, safeInfo]
);
const [inited, setInited] = useState(false);
const [gasList, setGasList] = useState([]);
@@ -533,6 +544,9 @@ const SendToken = () => {
data: abiCoder.encodeFunctionCall(dataInput[0], dataInput[1]),
isSend: true,
};
+ if (safeInfo?.nonce != null) {
+ params.nonce = safeInfo.nonce;
+ }
if (isNativeToken) {
params.to = to;
delete params.data;
@@ -908,7 +922,12 @@ const SendToken = () => {
};
const handleClickBack = () => {
- history.replace('/');
+ const from = (history.location.state as any)?.from;
+ if (from) {
+ history.replace(from);
+ } else {
+ history.replace('/');
+ }
};
const loadCurrentToken = async (
@@ -938,6 +957,27 @@ const SendToken = () => {
}
setChain(target.enum);
loadCurrentToken(id, tokenChain, account.address);
+ } else if ((history.location.state as any)?.safeInfo) {
+ const safeInfo: {
+ nonce: number;
+ chainId: number;
+ } = (history.location.state as any)?.safeInfo;
+
+ const chain = findChainByID(safeInfo.chainId);
+ let nativeToken: TokenItem | null = null;
+ if (chain) {
+ setChain(chain.enum);
+ nativeToken = await loadCurrentToken(
+ chain.nativeTokenAddress,
+ chain.serverId,
+ account.address
+ );
+ }
+ setSafeInfo(safeInfo);
+ persistPageStateCache({
+ safeInfo,
+ currentToken: nativeToken || currentToken,
+ });
} else {
let tokenFromOrder: TokenItem | null = null;
@@ -968,6 +1008,9 @@ const SendToken = () => {
setCurrentToken(cache.states.currentToken);
needLoadToken = cache.states.currentToken;
}
+ if (cache.states.safeInfo) {
+ setSafeInfo(cache.states.safeInfo);
+ }
}
}
@@ -1124,6 +1167,7 @@ const SendToken = () => {
onChange={handleChainChanged}
disabledTips={'Not supported'}
supportChains={undefined}
+ readonly={!!safeInfo}
/>
- {agoText}
-
- {t('global.nonce')}: {data.nonce}
-
-
-
- {explain ? (
-
-
-
+ = safeInfo.threshold &&
+ data.nonce === safeInfo.nonce,
+ })}
+ >
+
-
+ {agoText}
+
+ {t('global.nonce')}: {data.nonce}
+
+
+
+ {explain ? (
+
+
+
+
+
+
-
+ {t('page.safeQueue.ReplacePopup.desc')}
+
+ {options.map((item) => {
+ return (
+
+ {
+ onSelect?.(item.value);
+ }}
+ >
+
+ );
+ })}
+ {item.label}
+
+ 
+
+
{t('page.sendToken.sectionFrom.title')}