feat(wallet): Add contract address and tokenId to send page (#18592)

* Add URL params to send screen

* check if the user has selected an asset before setting using dynamic params

* use sendAssetOptions from useSend hook

* Added chainId and accountAddress dynamic params

* Use promise

* Make suggested changes

components/brave_wallet_ui/common/hooks/send.ts

@@ -516,6 +516,7 @@ export default function useSend (isSendTab?: boolean) {
     setShowEnsOffchainWarning,
     enableEnsOffchainLookup,
     searchingForDomain,
-    processAddressOrUrl
+    processAddressOrUrl,
+    sendAssetOptions
   }
 }

components/brave_wallet_ui/components/desktop/card-headers/nft-asset-header.tsx

@@ -25,11 +25,12 @@ import { Row } from '../../shared/style'
 interface Props {
   assetName?: string
   tokenId?: string
+  showSendButton: boolean
   onBack: () => void
   onSend: () => void
 }
 
-export const NftAssetHeader = ({ assetName, tokenId, onBack, onSend }: Props) => {
+export const NftAssetHeader = ({ assetName, tokenId, showSendButton, onBack, onSend }: Props) => {
   return (
     <Row
       padding='26px 0px'
@@ -53,7 +54,7 @@ export const NftAssetHeader = ({ assetName, tokenId, onBack, onSend }: Props) =>
           {assetName}&nbsp;{tokenId ? `#${new Amount(tokenId).toNumber()}` : ''}
         </HeaderTitle>
       </Row>
-      <SendButton onClick={onSend}>{getLocale('braveWalletSend')}</SendButton>
+      {showSendButton && <SendButton onClick={onSend}>{getLocale('braveWalletSend')}</SendButton>}
     </Row>
   )
 }

components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-asset.tsx

@@ -440,7 +440,22 @@ export const PortfolioAsset = (props: Props) => {
     history.push(`${WalletRoutes.DepositFundsPageStart}/${selectedAsset?.symbol}`)
   }, [selectedAsset?.symbol])
 
-  const onSend = React.useCallback(() => history.push(WalletRoutes.Send), [])
+  const onSend = React.useCallback(() => {
+    if (!selectedAsset || !selectedAssetsNetwork) return
+
+    const account = accounts
+      .filter((account) => account.coin === selectedAsset.coin)
+      .find(acc => new Amount(getBalance(acc, selectedAsset)).gte('1'))
+
+    if(!account) return
+
+    history.push(
+      WalletRoutes.SendPage.replace(':chainId?', selectedAssetsNetwork.chainId)
+        .replace(':accountAddress?', account.address)
+        .replace(':contractAddress?', selectedAsset.contractAddress)
+        .replace(':tokenId?', selectedAsset.tokenId)
+    )
+  }, [selectedAsset, accounts, selectedAssetsNetwork])
 
   // effects
   React.useEffect(() => {
@@ -496,6 +511,7 @@ export const PortfolioAsset = (props: Props) => {
             onBack={goBack}  
             assetName={selectedAsset?.name}
             tokenId={selectedAsset?.tokenId}
+            showSendButton={!new Amount(fullAssetBalances?.assetBalance || '').isZero()}
             onSend={onSend}
           />
       }

components/brave_wallet_ui/constants/types.ts

@@ -810,7 +810,12 @@ export enum WalletRoutes {
   Swap = '/swap',
 
   // send
-  Send = '/send',
+  SendPageStart = '/send',
+  SendPage = '/send/' +
+  ':chainId?/' +
+  ':accountAddress?/' +
+  ':contractAddress?/' +
+  ':tokenId?',
 
   // dev bitcoin screen
   DevBitcoin = '/dev-bitcoin',

components/brave_wallet_ui/options/nav-options.ts

@@ -17,7 +17,7 @@ export const BuySendSwapDepositOptions: NavOption[] = [
     id: 'send',
     name: 'braveWalletSend',
     icon: 'send',
-    route: WalletRoutes.Send
+    route: WalletRoutes.SendPageStart
   },
   {
     id: 'swap',

components/brave_wallet_ui/page/container.tsx

@@ -139,7 +139,7 @@ export const Container = () => {
       walletLocation.includes(WalletRoutes.PortfolioNFTs) ||
       walletLocation.includes(WalletRoutes.Market) ||
       walletLocation.includes(WalletRoutes.Swap) ||
-      walletLocation.includes(WalletRoutes.Send) ||
+      walletLocation.includes(WalletRoutes.SendPageStart) ||
       walletLocation.includes(WalletRoutes.LocalIpfsNode ||
         walletLocation.includes(WalletRoutes.InspectNfts))
     ) {
@@ -153,7 +153,7 @@ export const Container = () => {
     if (toobarElement && rootElement) {
       if (
         walletLocation === WalletRoutes.Swap ||
-        walletLocation === WalletRoutes.Send ||
+        walletLocation === WalletRoutes.SendPageStart ||
         walletLocation.includes(WalletRoutes.DepositFundsPage) ||
         walletLocation.includes(WalletRoutes.FundWalletPage) ||
         walletLocation.includes(WalletRoutes.LocalIpfsNode) ||
@@ -296,7 +296,7 @@ export const Container = () => {
             )}
 
             {!isWalletLocked &&
-              <Route path={WalletRoutes.Send} exact={true}>
+              <Route path={WalletRoutes.SendPage} exact>
                 <WalletPageWrapper hideBackground={true}>
                   <SendScreen />
                 </WalletPageWrapper>

components/brave_wallet_ui/page/screens/send/send/send.tsx

@@ -4,6 +4,8 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+import { useParams } from 'react-router'
+import { useDispatch } from 'react-redux'
 import { skipToken } from '@reduxjs/toolkit/query/react'
 
 // Messages
@@ -12,6 +14,9 @@ import { ENSOffchainLookupMessage, FailedChecksumMessage } from '../send-ui-mess
 // Types
 import { BraveWallet, SendOptionTypes, AddressMessageInfo } from '../../../../constants/types'
 
+// Actions
+import { WalletActions } from '../../../../common/actions'
+
 // Selectors
 import { WalletSelectors } from '../../../../common/selectors'
 import { useUnsafeWalletSelector } from '../../../../common/hooks/use-safe-selector'
@@ -29,7 +34,7 @@ import { endsWithAny } from '../../../../utils/string-utils'
 // Hooks
 import { usePreset, useBalanceUpdater, useSend } from '../../../../common/hooks'
 import { useOnClickOutside } from '../../../../common/hooks/useOnClickOutside'
-import { useGetNetworkQuery } from '../../../../common/slices/api.slice'
+import { useGetNetworkQuery, useSetNetworkMutation } from '../../../../common/slices/api.slice'
 
 // Styled Components
 import {
@@ -78,8 +83,18 @@ export const Send = (props: Props) => {
   const selectedAccount = useUnsafeWalletSelector(WalletSelectors.selectedAccount)
   const spotPrices = useUnsafeWalletSelector(WalletSelectors.transactionSpotPrices)
   const defaultCurrencies = useUnsafeWalletSelector(WalletSelectors.defaultCurrencies)
+  const accounts = useUnsafeWalletSelector(WalletSelectors.accounts)
+
+  // routing
+  const { chainId, accountAddress, contractAddress, tokenId } = useParams<{
+    chainId?: string
+    accountAddress?: string
+    contractAddress?: string
+    tokenId?: string
+  }>()
 
   // Hooks
+  const dispatch = useDispatch()
   useBalanceUpdater()
 
   const {
@@ -98,13 +113,15 @@ export const Send = (props: Props) => {
     submitSend,
     selectSendAsset,
     searchingForDomain,
-    processAddressOrUrl
+    processAddressOrUrl,
+    sendAssetOptions
   } = useSend(true)
 
-  // Queries
+  // Queries & Mutations
   const { data: selectedTokensNetwork } = useGetNetworkQuery(
     selectedSendAsset ?? skipToken
   )
+  const [setNetwork] = useSetNetworkMutation()
 
   // Refs
   const ref = React.createRef<HTMLDivElement>()
@@ -320,6 +337,23 @@ export const Send = (props: Props) => {
       showEnsOffchainWarning
   }, [toAddressOrUrl, searchingForDomain, showEnsOffchainWarning])
 
+  const selectedAssetFromParams = React.useMemo(() => {
+    if (!contractAddress) return
+
+    return sendAssetOptions.find((option) =>
+      tokenId
+        ? option.contractAddress.toLowerCase() ===
+            contractAddress.toLowerCase() && option.tokenId === tokenId
+        : option.contractAddress.toLowerCase() === contractAddress.toLowerCase()
+    )
+  }, [sendAssetOptions, contractAddress, tokenId])
+
+  const accountFromParams = React.useMemo(() => {
+    return accounts.find(
+      (account) => account.address === accountAddress
+    )
+  }, [accountAddress, accounts])
+
   // Effects
   React.useEffect(() => {
     // Keeps track of the Swap Containers Height to update
@@ -344,6 +378,28 @@ export const Send = (props: Props) => {
     }
   }, [selectedTokensNetwork])
 
+  React.useEffect(() => {
+    // check if the user has selected an asset
+    if (!chainId || !selectedAssetFromParams || !accountFromParams || selectedSendAsset) return
+
+    dispatch(WalletActions.selectAccount(accountFromParams))
+    setNetwork({
+      chainId: chainId,
+      coin: selectedAssetFromParams.coin
+    })
+      .catch((e) => console.error(e))
+
+    setSelectedSendOption(tokenId ? 'nft' : 'token')
+    selectSendAsset(selectedAssetFromParams)
+  }, [
+    setSelectedSendOption,
+    selectSendAsset,
+    selectedSendAsset,
+    chainId,
+    selectedAssetFromParams,
+    accountFromParams
+  ])
+
   // render
   return (
     <>

components/brave_wallet_ui/utils/string-utils.ts

@@ -89,7 +89,7 @@ export const getWalletLocationTitle = (location: string) => {
   if (location === WalletRoutes.Swap) {
     return getLocale('braveWalletSwap')
   }
-  if (location === WalletRoutes.Send) {
+  if (location === WalletRoutes.SendPageStart) {
     return getLocale('braveWalletSend')
   }
   /** Wallet */