status-im/safe-react
2
0
Fork 0
mirror of https://github.com/status-im/safe-react.git synced 2025-02-23 06:58:07 +00:00
Code Issues Projects Releases Wiki Activity

Known Addresses V1 (#2113)

Browse Source 
* Tx Custom: Add toInfo (icon+name) in table row.

* Custom tx: add to info if available

* update EthHashInfo API usage

Co-authored-by: Fernando <fernando.greco@gmail.com>
This commit is contained in:
nicolas 2021-04-07 08:10:48 -03:00 committed by GitHub
parent c96e3192ff
commit 9f3ff69a75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 93 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -161,7 +161,7 @@
"@gnosis.pm/safe-apps-sdk": "1.0.3",
"@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
"@gnosis.pm/safe-contracts": "1.1.1-dev.2",
"@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#7ebc414",
"@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#2e427ee",
"@gnosis.pm/util-contracts": "2.0.6",
"@ledgerhq/hw-transport-node-hid-singleton": "5.45.0",
"@material-ui/core": "^4.11.0",

4
src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx
View File

@ -89,8 +89,8 @@ const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps):
<EthHashInfo
hash={userAddress}
shortenHash={4}
showIdenticon
identiconSize="xs"
showAvatar
avatarSize="xs"
textColor={addressColor}
textSize="sm"
/>

6
src/components/CustomIconText/index.tsx
View File

@ -12,9 +12,11 @@ const Icon = styled.img`
margin-right: 9px;
`
export const CustomIconText = ({ iconUrl, text }: { iconUrl: string; text?: string }): ReactElement => (
type Props = { iconUrl: string | null | undefined; text?: string }
export const CustomIconText = ({ iconUrl, text }: Props): ReactElement => (
<Wrapper>
<Icon alt={text} src={iconUrl} />
{iconUrl && <Icon alt={text} src={iconUrl} />}
{text && <Text size="xl">{text}</Text>}
</Wrapper>
)

4
src/components/DecodeTxs/index.tsx
View File

@ -69,7 +69,7 @@ export const BasicTxInfo = ({
</Text>
<EthHashInfo
hash={txRecipient}
showIdenticon
showAvatar
textSize="lg"
showCopyBtn
explorerUrl={getExplorerInfo(txRecipient)}
@ -96,7 +96,7 @@ export const getParameterElement = (parameter: DecodedDataBasicParameter, index:
valueElement = (
<EthHashInfo
hash={parameter.value}
showIdenticon
showAvatar
textSize="lg"
showCopyBtn
explorerUrl={getExplorerInfo(parameter.value)}

2
src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
View File

@ -62,7 +62,7 @@ export const AddressWrapper = (props: Props): React.ReactElement => {
return (
<div className={classes.wrapper}>
<EthHashInfo hash={safe.address} name={safe.name} showIdenticon shortenHash={4} />
<EthHashInfo hash={safe.address} name={safe.name} showAvatar shortenHash={4} />
<div className={classes.addressDetails}>
<Text size="xl">{`${formatAmount(safe.ethBalance)} ${nativeCoin.name}`}</Text>

15
src/logic/contracts/safeContracts.ts
View File

@ -123,23 +123,22 @@ export const estimateGasForDeployingSafe = async (
data: proxyFactoryData,
from: userAccount,
to: proxyFactoryMaster.options.address,
}).then(value => value * 2)
}).then((value) => value * 2)
}
export const getGnosisSafeInstanceAt = (safeAddress: string): GnosisSafe => {
const web3 = getWeb3()
return (new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown) as GnosisSafe
}
/**
* Creates a Contract instance of the SpendingLimitModule contract
*/
export const getSpendingLimitContract = () => {
export const getSpendingLimitContract = () => {
const web3 = getWeb3()
return (new web3.eth.Contract(
SpendingLimitModule.abi as AbiItem[],
SPENDING_LIMIT_MODULE_ADDRESS,
) as unknown) as AllowanceModule
}
return (new web3.eth.Contract(
SpendingLimitModule.abi as AbiItem[],
SPENDING_LIMIT_MODULE_ADDRESS,
) as unknown) as AllowanceModule
}

2
src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
View File

@ -219,7 +219,7 @@ export const ReviewConfirm = ({
<Container>
{/* Safe */}
<EthHashInfo name={safeName} hash={safeAddress} showIdenticon showCopyBtn explorerUrl={explorerUrl} />
<EthHashInfo name={safeName} hash={safeAddress} showAvatar showCopyBtn explorerUrl={explorerUrl} />
<StyledBlock>
<Text size="md">Balance:</Text>
<Text size="md" strong>{`${ethBalance} ${nativeCoin.symbol}`}</Text>

2
src/routes/safe/components/Balances/SendModal/SafeInfo/index.tsx
View File

@ -32,7 +32,7 @@ const SafeInfo = (): React.ReactElement => {
hash={safeAddress}
name={safeName}
explorerUrl={getExplorerInfo(safeAddress)}
showIdenticon
showAvatar
showCopyBtn
/>
{ethBalance && (

2
src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx
View File

@ -148,7 +148,7 @@ const BaseAddressBookInput = ({
/>
)}
getOptionLabel={({ address }) => address}
renderOption={({ address, name }) => <EthHashInfo hash={address} name={name} showIdenticon />}
renderOption={({ address, name }) => <EthHashInfo hash={address} name={name} showAvatar />}
role="listbox"
style={{ display: 'flex', flexGrow: 1 }}
/>

2
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
View File

@ -151,7 +151,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
</Paragraph>
</Row>
<Row align="center" margin="md">
<EthHashInfo hash={tx.contractAddress as string} showIdenticon showCopyBtn explorerUrl={explorerUrl} />
<EthHashInfo hash={tx.contractAddress as string} showAvatar showCopyBtn explorerUrl={explorerUrl} />
</Row>
<Row margin="xs">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>

2
src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
View File

@ -265,7 +265,7 @@ const SendFunds = ({
<EthHashInfo
hash={selectedEntry.address}
name={selectedEntry.name}
showIdenticon
showAvatar
showCopyBtn
explorerUrl={getExplorerInfo(selectedEntry.address)}
/>

2
src/routes/safe/components/Settings/SpendingLimit/FormFields/Beneficiary.tsx
View File

@ -81,7 +81,7 @@ const Beneficiary = (): ReactElement => {
hash={selectedEntry.address}
name={selectedEntry.name}
showCopyBtn
showIdenticon
showAvatar
textSize="lg"
shortenHash={4}
explorerUrl={getExplorerInfo(selectedEntry.address)}

2
src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx
View File

@ -24,7 +24,7 @@ const AddressInfo = ({ address, cut = 4, title }: AddressInfoProps): ReactElemen
hash={address}
name={sameString(name, 'UNKNOWN') ? undefined : name}
showCopyBtn
showIdenticon
showAvatar
textSize="lg"
explorerUrl={explorerUrl}
shortenHash={cut}

13
src/routes/safe/components/Transactions/TxList/AddressInfo.tsx
View File

@ -5,7 +5,13 @@ import { getExplorerInfo } from 'src/config'
import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'
export const AddressInfo = ({ address }: { address: string }): ReactElement | null => {
type Props = {
address: string
name?: string | undefined
avatarUrl?: string | undefined
}
export const AddressInfo = ({ address, name, avatarUrl }: Props): ReactElement | null => {
const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, address))
if (address === '') {
@ -15,8 +21,9 @@ export const AddressInfo = ({ address }: { address: string }): ReactElement | nu
return (
<EthHashInfo
hash={address}
name={recipientName === 'UNKNOWN' ? undefined : recipientName}
showIdenticon
name={recipientName === 'UNKNOWN' ? name : recipientName}
showAvatar
customAvatar={avatarUrl}
showCopyBtn
explorerUrl={getExplorerInfo(address)}
/>

2
src/routes/safe/components/Transactions/TxList/OwnerRow.tsx
View File

@ -12,7 +12,7 @@ export const OwnerRow = ({ ownerAddress }: { ownerAddress: string }): ReactEleme
<EthHashInfo
hash={ownerAddress}
name={ownerName === 'UNKNOWN' ? '' : ownerName}
showIdenticon
showAvatar
showCopyBtn
explorerUrl={getExplorerInfo(ownerAddress)}
shortenHash={4}

47
src/routes/safe/components/Transactions/TxList/TxData.tsx
View File

@ -1,7 +1,12 @@
import React, { ReactElement, ReactNode } from 'react'
import { getNetworkInfo } from 'src/config'
import { ExpandedTxDetails, TransactionData } from 'src/logic/safe/store/models/types/gateway.d'
import {
ExpandedTxDetails,
isCustomTxInfo,
TransactionData,
TransactionInfo,
} from 'src/logic/safe/store/models/types/gateway.d'
import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
import {
DeleteSpendingLimitDetails,
@ -20,23 +25,39 @@ const { nativeCoin } = getNetworkInfo()
type DetailsWithTxInfoProps = {
children: ReactNode
txData: TransactionData
txInfo: TransactionInfo
}
const DetailsWithTxInfo = ({ children, txData }: DetailsWithTxInfoProps): ReactElement => (
<>
<TxInfoDetails
address={txData.to}
title={`Send ${txData.value ? fromTokenUnit(txData.value, nativeCoin.decimals) : 'n/a'} ${nativeCoin.symbol} to:`}
/>
{children}
</>
)
const DetailsWithTxInfo = ({ children, txData, txInfo }: DetailsWithTxInfoProps): ReactElement => {
const amount = txData.value ? fromTokenUnit(txData.value, nativeCoin.decimals) : 'n/a'
let name
let avatarUrl
if (isCustomTxInfo(txInfo)) {
name = txInfo.toInfo.name
avatarUrl = txInfo.toInfo.logoUri
}
return (
<>
<TxInfoDetails
address={txData.to}
name={name}
avatarUrl={avatarUrl}
title={`Send ${amount} ${nativeCoin.symbol} to:`}
/>
{children}
</>
)
}
type TxDataProps = {
txData: ExpandedTxDetails['txData']
txInfo: TransactionInfo
}
export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
export const TxData = ({ txData, txInfo }: TxDataProps): ReactElement | null => {
// nothing to render
if (!txData) {
return null
@ -51,7 +72,7 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
// we render the hex encoded data
return (
<DetailsWithTxInfo txData={txData}>
<DetailsWithTxInfo txData={txData} txInfo={txInfo}>
<HexEncodedData title="Data (hex encoded)" hexData={txData.hexData} />
</DetailsWithTxInfo>
)
@ -74,7 +95,7 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
// we render the decoded data
return (
<DetailsWithTxInfo txData={txData}>
<DetailsWithTxInfo txData={txData} txInfo={txInfo}>
<MethodDetails data={txData.dataDecoded} />
</DetailsWithTxInfo>
)

2
src/routes/safe/components/Transactions/TxList/TxDetails.tsx
View File

@ -74,7 +74,7 @@ const TxDataGroup = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElem
return null
}
return <TxData txData={txDetails.txData} />
return <TxData txData={txDetails.txData} txInfo={txDetails.txInfo} />
}
type TxDetailsProps = {

12
src/routes/safe/components/Transactions/TxList/TxInfo.tsx
View File

@ -1,18 +1,10 @@
import React, { ReactElement } from 'react'
import {
ExpandedTxDetails,
isSettingsChangeTxInfo,
isTransferTxInfo,
} from 'src/logic/safe/store/models/types/gateway.d'
import { TransactionInfo, isSettingsChangeTxInfo, isTransferTxInfo } from 'src/logic/safe/store/models/types/gateway.d'
import { TxInfoSettings } from './TxInfoSettings'
import { TxInfoTransfer } from './TxInfoTransfer'
type TxInfoProps = {
txInfo: ExpandedTxDetails['txInfo']
}
export const TxInfo = ({ txInfo }: TxInfoProps): ReactElement | null => {
export const TxInfo = ({ txInfo }: { txInfo: TransactionInfo }): ReactElement | null => {
if (isSettingsChangeTxInfo(txInfo)) {
return <TxInfoSettings settingsInfo={txInfo.settingsInfo} />
}

14
src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx
View File

@ -21,11 +21,20 @@ const SingleRow = styled.div`
type TxInfoDetailsProps = {
title: string
address: string
name?: string | undefined
avatarUrl?: string | undefined
isTransferType?: boolean
txInfo?: Transfer
}
export const TxInfoDetails = ({ title, address, isTransferType, txInfo }: TxInfoDetailsProps): ReactElement => {
export const TxInfoDetails = ({
title,
address,
isTransferType,
txInfo,
name,
avatarUrl,
}: TxInfoDetailsProps): ReactElement => {
const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, address))
const knownAddress = recipientName !== 'UNKNOWN'
@ -59,6 +68,7 @@ export const TxInfoDetails = ({ title, address, isTransferType, txInfo }: TxInfo
selectedToken: ZERO_ADDRESS,
tokenAmount: '0',
})
useEffect(() => {
if (txInfo) {
const isCollectible = txInfo.transferInfo.type === 'ERC721'
@ -76,7 +86,7 @@ export const TxInfoDetails = ({ title, address, isTransferType, txInfo }: TxInfo
return (
<InfoDetails title={title}>
<SingleRow>
<AddressInfo address={address} />
<AddressInfo address={address} name={name} avatarUrl={avatarUrl} />
<EllipsisTransactionDetails
address={address}
knownAddress={knownAddress}

8
src/routes/safe/components/Transactions/TxList/hooks/useTransactionType.ts
View File

@ -10,7 +10,7 @@ import OutgoingTxIcon from 'src/routes/safe/components/Transactions/TxList/asset
import SettingsTxIcon from 'src/routes/safe/components/Transactions/TxList/assets/settings.svg'
export type TxTypeProps = {
icon: string
icon: string | null
text: string
}
@ -50,6 +50,12 @@ export const useTransactionType = (tx: Transaction): TxTypeProps => {
break
}
const toInfo = tx.txInfo.toInfo
if (toInfo) {
setType({ icon: toInfo.logoUri, text: toInfo.name })
break
}
setType({ icon: CustomTxIcon, text: 'Contract interaction' })
break
}

4
yarn.lock
View File

@ -1596,9 +1596,9 @@
solc "0.5.14"
truffle "^5.1.21"
"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#7ebc414":
"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#2e427ee":
version "0.5.0"
resolved "https://github.com/gnosis/safe-react-components.git#7ebc414ae975d60846704c5a8db5e61c30348d12"
resolved "https://github.com/gnosis/safe-react-components.git#2e427ee36694c7964301fc155b0c080101a34bed"
dependencies:
classnames "^2.2.6"
react-media "^1.10.0"