Skip to content

Commit

Permalink
fix: match contract spender
Browse files Browse the repository at this point in the history
  • Loading branch information
richardo2016x committed Jul 25, 2024
1 parent 0d85910 commit 96808e9
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 6 deletions.
22 changes: 16 additions & 6 deletions src/ui/views/ApprovalManagePage/components/RevokeApprovalModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { ApprovalItem, getSpenderApprovalAmount } from '@/utils/approval';
import styled from 'styled-components';
import ApprovalsNameAndAddr from './NameAndAddr';
import {
findContractMatchedSpender,
findIndexRevokeList,
getFirstSpender,
maybeNFTLikeItem,
Expand All @@ -32,6 +33,7 @@ import { ReactComponent as RcIconExternal } from '../icons/icon-share-cc.svg';
import { ensureSuffix } from '@/utils/string';
import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
import { NFTItemBadge, Permit2Badge } from './Badges';
import { getTokenSymbol } from '@/ui/utils/token';

const BOTTOM_BUTTON_AREA = 76;
const ModalStyled = styled(Modal)`
Expand Down Expand Up @@ -172,27 +174,32 @@ export const RevokeApprovalModal = (props: {
if (!item) return null;
if (item?.type === 'contract') {
return item?.list.map((e, index) => {
const isLastOne = index === item.list.length - 1;
const chainItem = findChainByServerID(e.chain);

const maybeContractForNFT = maybeNFTLikeItem(e);

const itemName = !maybeContractForNFT
? e.symbol
? getTokenSymbol(e)
: 'inner_id' in e
? ensureSuffix(e.contract_name || 'Unknown', ` #${e.inner_id}`)
: e.contract_name || 'Unknown';

/**
* @description
* 1. In general, the items from [host].spenders have same properties about nft/nft-collection/permit2, so we just need to check the first of them
* 1. In general, the items from [host].spenders/[host].spender have same properties about nft/nft-collection/amounts, so we just need to check the first of them
* 2. It must not be non-token type contract
*/
const spender = getFirstSpender(e);

const spenderValues = spender
? getSpenderApprovalAmount(spender)
: null;
const isLastOne = index === item.list.length - 1;

/**
* you should find the contract spender from [host].spenders for `permit2_id`
*/
const contractSpender = findContractMatchedSpender(e, item);

return (
<div
Expand Down Expand Up @@ -266,11 +273,14 @@ export const RevokeApprovalModal = (props: {
</div>
) : (
<div className="ml-[8px] text-13 text-r-neutral-title1 font-medium leading-[15px]">
{e.symbol}
{getTokenSymbol(e)}
</div>
)}
{spender && (
<Permit2Badge className="ml-[9px]" contractSpender={spender} />
{contractSpender && (
<Permit2Badge
className="ml-[9px]"
contractSpender={contractSpender}
/>
)}

<div className="ml-auto flex items-center justify-between flex-shrink-0">
Expand Down
22 changes: 22 additions & 0 deletions src/ui/views/ApprovalManagePage/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ApprovalItem,
ContractApprovalItem,
RiskNumMap,
SpenderInTokenApproval,
compareContractApprovalItemByRiskLevel,
} from '@/utils/approval';
import { ApprovalSpenderItemToBeRevoked } from '@/utils-isomorphic/approve';
Expand Down Expand Up @@ -83,6 +84,27 @@ export function getFirstSpender(spenderHost: ApprovalItem['list'][number]) {
return undefined;
}

/**
* @description spenderHost should from `contract.list[number]`
* @param spenderHost
* @param contract
* @returns
*/
export function findContractMatchedSpender(
spenderHost: ApprovalItem['list'][number],
contract: ContractApprovalItem
) {
let spenderItem: Spender | undefined = undefined;
if ('spenders' in spenderHost) {
spenderItem = spenderHost.spenders.find(
(spender: SpenderInTokenApproval) =>
spender.$assetContract && spender.$assetContract?.id == contract.id
);
}

return spenderItem;
}

export function getPermit2IdFromSpenderHost(
spenderHost: ApprovalItem['list'][number]
) {
Expand Down

0 comments on commit 96808e9

Please sign in to comment.