feat: add address and copy button to wallets (#378)

* feat: add address and copy button to wallets

* feat: move header to left margin

* feat: add pointer style

src/components/Notifications/Notifications.styled.ts

@@ -4,7 +4,7 @@ export const Container = styled('div')({
   maxWidth: '660px'
 })
 
-export const Header = styled('div')({ marginLeft: '24px', marginTop: '14px' })
+export const Header = styled('div')({ marginTop: '14px' })
 
 export const Wrapper = styled('div')({
   marginTop: '16px'

src/components/Wallets/AccountCard/AccountTransactions/AccountTransaction/AccountTransaction.tsx

@@ -5,6 +5,7 @@ import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { NetworkGatewayType, gatewaysNames } from 'decentraland-ui'
 import { Deposit, TransactionStatus, TransactionType, Transfer, Withdrawal, WithdrawalStatus } from '../../../../../modules/mana/types'
 import { getStatusMessage, isPendingAccountTransaction } from '../../../../../modules/mana/utils'
+import { shortening } from '../../../../../modules/wallet/utils'
 import { Props } from './AccountTransaction.types'
 
 import './AccountTransaction.css'
@@ -21,8 +22,6 @@ const AccountTransaction = ({ transaction, onTransactionDetail, onPendingWithdra
     }
   }, [now])
 
-  const shortening = (address: string): string => (address ? `${address.slice(0, 4)}...${address.slice(-4)}` : '')
-
   let data: any = null
   let description = ''
   if (type === TransactionType.DEPOSIT) {

src/components/Wallets/AccountCardContainer/AccountCardContainer.css

@@ -3,6 +3,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   padding-right: 50px;
+  margin-top: 16px;
 }
 @media (max-width: 991px) {
   .AccountCardContainer {

src/components/Wallets/Wallets.container.ts

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { getTransactionByNetwork, getWalletDeposits, getWalletWithdrawals } from '../../modules/mana/selectors'
 import { RootState } from '../../modules/reducer'
 import Wallets from './Wallets'
@@ -8,7 +9,8 @@ const mapState = (state: RootState): MapStateProps => {
   return {
     transactionsByNetwork: getTransactionByNetwork(state),
     withdrawals: getWalletWithdrawals(state),
-    deposits: getWalletDeposits(state)
+    deposits: getWalletDeposits(state),
+    address: getAddress(state)!
   }
 }
 

src/components/Wallets/Wallets.styled.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled'
+import ContentCopyRoundedIconMui from '@mui/icons-material/ContentCopyRounded'
+import { Typography as TypographyMui } from 'decentraland-ui2'
+import { Description as DescriptionGlobal } from '../Typography'
+
+export const Header = styled('div')({ marginTop: '14px' })
+
+export const Description = styled(DescriptionGlobal)({ display: 'flex', alignItems: 'center' })
+
+export const Address = styled(TypographyMui)({
+  color: '#fcfcfc99',
+  fontSize: '14px',
+  lineHeight: '24px',
+  fontWeight: 500,
+  marginLeft: '8px',
+  marginRight: '8px'
+})
+
+export const ContentCopyRoundedIcon = styled(ContentCopyRoundedIconMui)({
+  cursor: 'pointer'
+})

src/components/Wallets/Wallets.tsx

@@ -1,21 +1,64 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import { Network } from '@dcl/schemas'
+import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Tooltip } from 'decentraland-ui2'
 import { DepositStatus, WithdrawalStatus } from '../../modules/mana/types'
+import { shortening } from '../../modules/wallet/utils'
 import DepositTooltip from '../Tooltips/DepositTooltip'
 import WithdrawalTooltip from '../Tooltips/WithdrawalTooltip'
+import { Title } from '../Typography'
 import { AccountCard } from './AccountCard'
 import AccountCardContainer from './AccountCardContainer/AccountCardContainer'
+import { Address, ContentCopyRoundedIcon, Description, Header } from './Wallets.styled'
 import { Props } from './Wallets.types'
 
-const Wallets: React.FC<Props> = ({ withdrawals, deposits, transactionsByNetwork }) => {
+const Wallets: React.FC<Props> = props => {
+  const { withdrawals, deposits, transactionsByNetwork, address } = props
+  const [openTooltip, setOpenTooltip] = useState(false)
   const ethereumTransactions = transactionsByNetwork[Network.ETHEREUM]
   const maticTransactions = transactionsByNetwork[Network.MATIC]
 
   const isFirstWithdrawal = withdrawals.length === 1 && withdrawals[0].status === WithdrawalStatus.PENDING
   const isFirstDeposits = deposits.length === 1 && deposits[0].status === DepositStatus.PENDING
 
+  const handleCopyAddres = useCallback(() => {
+    setOpenTooltip(true)
+    navigator.clipboard.writeText(address)
+    setTimeout(() => {
+      setOpenTooltip(false)
+    }, 1200)
+  }, [address])
+
+  const handleTooltipClose = useCallback(() => {
+    setOpenTooltip(false)
+  }, [])
+
   return (
     <>
+      <Header>
+        <Title variant="h3">{t('main_page.wallets')}</Title>
+        <Description variant="subtitle1">
+          <AccountBalanceWalletRoundedIcon />
+          <Address>{shortening(address)}</Address>
+          <Tooltip
+            PopperProps={{
+              disablePortal: true
+            }}
+            onClose={handleTooltipClose}
+            open={openTooltip}
+            disableFocusListener
+            disableHoverListener
+            disableTouchListener
+            title={t('main_page.copied')}
+            leaveDelay={1200}
+            placement="right"
+            arrow
+          >
+            <ContentCopyRoundedIcon onClick={handleCopyAddres} />
+          </Tooltip>
+        </Description>
+      </Header>
       <AccountCardContainer>
         <AccountCard network={Network.ETHEREUM} title="Ethereum MANA" transactions={ethereumTransactions} />
         <AccountCard network={Network.MATIC} title="Polygon MANA" transactions={maticTransactions} />

src/components/Wallets/Wallets.types.tsx

@@ -6,7 +6,8 @@ export type Props = {
   transactionsByNetwork: Record<Network, Transaction[]>
   withdrawals: Withdrawal[]
   deposits: Deposit[]
+  address: string
 }
-export type MapStateProps = Pick<Props, 'transactionsByNetwork' | 'withdrawals' | 'deposits'>
+export type MapStateProps = Pick<Props, 'transactionsByNetwork' | 'withdrawals' | 'deposits' | 'address'>
 export type MapDispatchProps = {}
 export type MapDispatch = Dispatch

src/locales/en.json

@@ -11,7 +11,8 @@
   "main_page": {
     "wallets": "Wallets",
     "email_notifications": "Email Notifications",
-    "title": "Account Settings"
+    "title": "Account Settings",
+    "copied": "Copied!"
   },
   "account_header": {
     "actions": {

src/locales/es.json

@@ -12,7 +12,8 @@
   "main_page": {
     "wallets": "Wallets",
     "email_notifications": "Notificaciones",
-    "title": "Configuración de la cuenta"
+    "title": "Configuración de la cuenta",
+    "copied": "Copiado!"
   },
   "account_header": {
     "actions": {

src/locales/zh.json

@@ -11,7 +11,8 @@
   "main_page": {
     "wallets": "錢包",
     "email_notifications": "電子郵件通知",
-    "title": "帳戶設定"
+    "title": "帳戶設定",
+    "copied": "已复制！"
   },
   "account_header": {
     "actions": {

src/modules/wallet/utils.ts

@@ -0,0 +1,3 @@
+export function shortening(address: string): string {
+  return address ? `${address.slice(0, 4)}...${address.slice(-4)}` : ''
+}