Merge pull request #17333 from brave/view-contract-in-transaction-panel

fix(wallet): View Contract in Transaction Panel
brave · Feb 23, 2023 · 27caa02 · 27caa02
2 parents 87e9d6d + efe1394
commit 27caa02
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 22 deletions.
diff --git a/components/brave_wallet_ui/common/slices/api.slice.ts b/components/brave_wallet_ui/common/slices/api.slice.ts
@@ -2406,6 +2406,27 @@ export function createWalletApi (
           }
         }
       }),
+      getAddressByteCode: query<string, { address: string, coin: number, chainId: string }>({
+        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
       //
@@ -2527,6 +2548,7 @@ export const {
   useCancelTransactionMutation,
   useGetAccountInfosRegistryQuery,
   useGetAccountTokenCurrentBalanceQuery,
+  useGetAddressByteCodeQuery,
   useGetAllNetworksQuery,
   useGetAllPendingTransactionsQuery,
   useGetAllTransactionsForAddressCoinTypeQuery,
@@ -2550,6 +2572,7 @@ export const {
   useIsEip1559ChangedMutation,
   useLazyGetAccountInfosRegistryQuery,
   useLazyGetAccountTokenCurrentBalanceQuery,
+  useLazyGetAddressByteCodeQuery,
   useLazyGetAllNetworksQuery,
   useLazyGetAllPendingTransactionsQuery,
   useLazyGetAllTransactionsForAddressCoinTypeQuery,

diff --git a/...ve_wallet_ui/components/extension/confirm-transaction-panel/confirm-transaction-panel.tsx b/...ve_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<confirmPanelTabs>('transaction')
   const [isEditing, setIsEditing] = React.useState<boolean>(false)
@@ -222,23 +240,36 @@ export const ConfirmTransactionPanel = ({
               eTldPlusOne={originInfo.eTldPlusOne}
             />
           </URLText>
-          <FromToRow>
-            <Tooltip
-              text={fromAddress}
-              isAddress={true}
-              position='left'
-            >
-              <AccountNameText>{fromAccountName}</AccountNameText>
-            </Tooltip>
+          <Row marginBottom={8} maxWidth={isContract ? '90%' : 'unset'} width='unset'>
+            <Row maxWidth={isContract ? '70px' : 'unset'} width='unset'>
+              <Tooltip
+                text={fromAddress}
+                isAddress={true}
+                position='left'
+              >
+                <AccountNameText>{fromAccountName}</AccountNameText>
+              </Tooltip>
+            </Row>
             <ArrowIcon />
-            <Tooltip
-              text={transactionDetails.recipient}
-              isAddress={true}
-              position='right'
-            >
-              <AccountNameText>{reduceAddress(transactionDetails.recipient)}</AccountNameText>
-            </Tooltip>
-          </FromToRow>
+            {isContract ? (
+              <Column alignItems='flex-start' justifyContent='flex-start'>
+                <NetworkText>
+                  {getLocale('braveWalletNFTDetailContractAddress')}
+                </NetworkText>
+                <ContractButton onClick={onClickViewOnBlockExplorer('contract', `${transactionDetails.recipient}`)}>
+                  {reduceAddress(transactionDetails.recipient)} <ExplorerIcon />
+                </ContractButton>
+              </Column>
+            ) : (
+              <Tooltip
+                text={transactionDetails.recipient}
+                isAddress={true}
+                position='right'
+              >
+                <AccountNameText>{reduceAddress(transactionDetails.recipient)}</AccountNameText>
+              </Tooltip>
+            )}
+          </Row>
 
           <TransactionTypeText>{transactionTitle}</TransactionTypeText>
 

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
@@ -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
@@ -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) {