From efe1394b80d2a4ae52aaa39f5f1016dec183a5ad Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Wed, 22 Feb 2023 12:52:39 -0600 Subject: [PATCH] fix(wallet): View Contract in Transaction Panel --- .../common/slices/api.slice.ts | 23 +++++++ .../confirm-transaction-panel.tsx | 67 ++++++++++++++----- .../confirm-transaction-panel/style.ts | 30 +++++++++ .../utils/block-explorer-utils.ts | 6 +- 4 files changed, 104 insertions(+), 22 deletions(-) diff --git a/components/brave_wallet_ui/common/slices/api.slice.ts b/components/brave_wallet_ui/common/slices/api.slice.ts index 997366a3033b..5d790a67e87a 100644 --- a/components/brave_wallet_ui/common/slices/api.slice.ts +++ b/components/brave_wallet_ui/common/slices/api.slice.ts @@ -2403,6 +2403,27 @@ export function createWalletApi ( } } }), + getAddressByteCode: query({ + queryFn: async (arg, api, extraOptions, baseQuery) => { + try { + const { jsonRpcService } = baseQuery(undefined).data + const { bytecode, error, errorMessage } = await jsonRpcService.getCode(arg.address, arg.coin, arg.chainId) + if (error !== 0 && errorMessage) { + return { + error: errorMessage + } + } + return { + data: bytecode + } + } catch (error) { + console.log(error) + return { + error: `Was unable to fetch bytecode for address: ${arg.address}.` + } + } + }, + }), // // Transactions Fees // @@ -2524,6 +2545,7 @@ export const { useCancelTransactionMutation, useGetAccountInfosRegistryQuery, useGetAccountTokenCurrentBalanceQuery, + useGetAddressByteCodeQuery, useGetAllNetworksQuery, useGetAllPendingTransactionsQuery, useGetAllTransactionsForAddressCoinTypeQuery, @@ -2547,6 +2569,7 @@ export const { useIsEip1559ChangedMutation, useLazyGetAccountInfosRegistryQuery, useLazyGetAccountTokenCurrentBalanceQuery, + useLazyGetAddressByteCodeQuery, useLazyGetAllNetworksQuery, useLazyGetAllPendingTransactionsQuery, useLazyGetAllTransactionsForAddressCoinTypeQuery, diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx index e39d6e6d9226..604712c1c5c3 100644 --- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx +++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx @@ -6,6 +6,7 @@ import * as React from 'react' import { useSelector } from 'react-redux' +// Types import { WalletState } from '../../../constants/types' // Utils @@ -15,6 +16,7 @@ import { getLocale } from '../../../../common/locale' // Hooks import { usePendingTransactions } from '../../../common/hooks/use-pending-transaction' +import { useExplorer } from '../../../common/hooks' // Components import CreateSiteOrigin from '../../shared/create-site-origin/index' @@ -43,10 +45,11 @@ import { TransactionTypeText, AccountCircleWrapper, ArrowIcon, - FromToRow, EditButton, WarningIcon, - AssetIcon + AssetIcon, + ContractButton, + ExplorerIcon } from './style' import { Skeleton } from '../../shared/loading-skeleton/styles' @@ -63,11 +66,13 @@ import { LearnMoreButton, WarningBoxTitleRow } from '../shared-panel-styles' +import { Column, Row } from '../../shared/style' import { Footer } from './common/footer' import { TransactionQueueStep } from './common/queue' import { Origin } from './common/origin' import { EditPendingTransactionGas } from './common/gas' +import { useGetAddressByteCodeQuery } from '../../../common/slices/api.slice' type confirmPanelTabs = 'transaction' | 'details' @@ -117,6 +122,19 @@ export const ConfirmTransactionPanel = ({ updateUnapprovedTransactionNonce } = usePendingTransactions() + // queries + const { data: byteCode, isLoading } = useGetAddressByteCodeQuery({ + address: transactionDetails?.recipient ?? '', + coin: transactionDetails?.coinType ?? -1, + chainId: transactionDetails?.chainId ?? '' + }, { skip: !transactionDetails }) + + // computed + const isContract = !isLoading && byteCode !== '0x' + + // hooks + const onClickViewOnBlockExplorer = useExplorer(transactionsNetwork) + // state const [selectedTab, setSelectedTab] = React.useState('transaction') const [isEditing, setIsEditing] = React.useState(false) @@ -222,23 +240,36 @@ export const ConfirmTransactionPanel = ({ eTldPlusOne={originInfo.eTldPlusOne} /> - - - {fromAccountName} - + + + + {fromAccountName} + + - - {reduceAddress(transactionDetails.recipient)} - - + {isContract ? ( + + + {getLocale('braveWalletNFTDetailContractAddress')} + + + {reduceAddress(transactionDetails.recipient)} + + + ) : ( + + {reduceAddress(transactionDetails.recipient)} + + )} + {transactionTitle} diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts index b310cc50bc01..91af29ceb9de 100644 --- a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts +++ b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts @@ -5,6 +5,7 @@ import styled from 'styled-components' import { ArrowRightIcon, LoaderIcon } from 'brave-ui/components/icons' +import LinkIcon from '../../../assets/svg-icons/link-icon.svg' import { WarningBoxIcon } from '../shared-panel-styles' import { @@ -280,3 +281,32 @@ export const SmallLoadIcon = styled(LoaderIcon)` opacity: .4; padding-left: 5px; ` + +export const ContractButton = styled(WalletButton)` + display: flex; + align-items: center; + justify-content: center; + font-family: Poppins; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.01em; + color: ${(p) => p.theme.color.interactive05}; + background: none; + cursor: pointer; + outline: none; + border: none; + margin: 0px; + padding: 0px; +` + +export const ExplorerIcon = styled.div` + -webkit-mask-image: url(${LinkIcon}); + mask-image: url(${LinkIcon}); + width: 12px; + height: 12px; + margin-left: 8px; + mask-size: contain; + background-color: ${(p) => p.theme.color.interactive05}; +` diff --git a/components/brave_wallet_ui/utils/block-explorer-utils.ts b/components/brave_wallet_ui/utils/block-explorer-utils.ts index e7e7f9dfba4d..eb61625a144a 100644 --- a/components/brave_wallet_ui/utils/block-explorer-utils.ts +++ b/components/brave_wallet_ui/utils/block-explorer-utils.ts @@ -27,9 +27,7 @@ export const buildExplorerUrl = ( } if (type === 'contract') { - return id - ? `${explorerURL}/${value}?a=${new Amount(id).format()}` - : fallbackURL + return `${explorerURL}/address/${value}/#code` } const isFileCoinNet = @@ -86,7 +84,7 @@ export const openBlockExplorerURL = ({ const url = buildExplorerUrl(network, type, value, id) if (!chrome.tabs) { - window.open(url, '_blank') + window.open(url, '_blank', 'noreferrer') } else { chrome.tabs.create({ url: url }, () => { if (chrome.runtime.lastError) {