From 8fbb3d9b0e5e8954e8c8bff95eedc750ce7a4b20 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Tue, 25 Apr 2023 15:03:30 +0100 Subject: [PATCH 01/14] initial commit --- .../Views/SendFlow/SendTo/SendAddressFrom.js | 101 ++++++ .../Views/SendFlow/SendTo/SendToAddressTo.js | 201 ++++++++++++ app/components/Views/SendFlow/SendTo/index.js | 287 +++++++----------- app/components/Views/SendFlow/SendTo/utils.js | 88 ++++++ ios/Podfile.lock | 4 +- 5 files changed, 499 insertions(+), 182 deletions(-) create mode 100644 app/components/Views/SendFlow/SendTo/SendAddressFrom.js create mode 100644 app/components/Views/SendFlow/SendTo/SendToAddressTo.js create mode 100644 app/components/Views/SendFlow/SendTo/utils.js diff --git a/app/components/Views/SendFlow/SendTo/SendAddressFrom.js b/app/components/Views/SendFlow/SendTo/SendAddressFrom.js new file mode 100644 index 00000000000..77cddeeb066 --- /dev/null +++ b/app/components/Views/SendFlow/SendTo/SendAddressFrom.js @@ -0,0 +1,101 @@ +import React, { useEffect } from 'react'; +import { AddressFrom } from '../../../UI/AddressInputs'; +import { useSelector, useDispatch } from 'react-redux'; +import { useNavigation } from '@react-navigation/native'; +import { + selectTicker, + selectNetwork, +} from '../../../../selectors/networkController'; +import Routes from '../../../../constants/navigation/Routes'; +import { renderFromWei } from '../../../../util/number'; +import { getTicker, getEther } from '../../../../util/transactions'; +import { doENSReverseLookup } from '../../../../util/ENSUtils'; +import { hexToBN } from '@metamask/controller-utils'; +import { setSelectedAsset } from '../../../../actions/transaction'; + +const SendToAddressFrom = () => { + const navigation = useNavigation(); + const identities = useSelector( + (state) => state.engine.backgroundState.PreferencesController.identities, + ); + + const accounts = useSelector( + (state) => state.engine.backgroundState.AccountTrackerController.accounts, + ); + + const network = useSelector((state) => selectNetwork(state)); + const ticker = useSelector(selectTicker); + + const selectedAddress = useSelector( + (state) => + state.engine.backgroundState.PreferencesController.selectedAddress, + ); + + const [state, setState] = React.useState({ + address: '', + accName: '', + balance: '', + isBalanceZero: false, + }); + + useEffect(() => { + async function getAccount() { + const ens = await doENSReverseLookup(selectedAddress, network); + const fromAccountBalance1 = `${renderFromWei( + accounts[selectedAddress].balance, + )} ${getTicker(ticker)}`; + setState({ + ...state, + balance: fromAccountBalance1, + accName: ens || identities[selectedAddress].name, + balanceIsZero: hexToBN(accounts[selectedAddress].balance).isZero(), + }); + } + getAccount(); + }, [accounts, selectedAddress, ticker, state.balance, state.accName]); + + const dispatch = useDispatch(); + + const selectedAssetAction = (selectedAsset) => + dispatch(setSelectedAsset(selectedAsset)); + + const onSelectAccount = async (address) => { + const { name } = identities[address]; + const balance = `${renderFromWei(accounts[address].balance)} ${getTicker( + ticker, + )}`; + const ens = await doENSReverseLookup(address); + const accName = ens || name; + selectedAssetAction(getEther(ticker)); + const isBalanceZero = hexToBN(accounts[address].balance).isZero(); + setState({ + address, + accName, + balance, + isBalanceZero, + }); + }; + + const openAccountSelector = () => { + navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, { + screen: Routes.SHEET.ACCOUNT_SELECTOR, + params: { + isSelectOnly: true, + onSelectAccount, + }, + }); + }; + + const { address, balance, accName } = state; + + return ( + + ); +}; + +export default SendToAddressFrom; diff --git a/app/components/Views/SendFlow/SendTo/SendToAddressTo.js b/app/components/Views/SendFlow/SendTo/SendToAddressTo.js new file mode 100644 index 00000000000..cd98cca654b --- /dev/null +++ b/app/components/Views/SendFlow/SendTo/SendToAddressTo.js @@ -0,0 +1,201 @@ +import React from 'react'; +import { Alert } from 'react-native'; +import { AddressTo } from '../../../UI/AddressInputs'; +import { useNavigation } from '@react-navigation/native'; +import { useSelector, useDispatch } from 'react-redux'; +import { createQRScannerNavDetails } from '../../QRScanner'; +import { handleNetworkSwitch } from '../../../../util/networks'; +import Routes from '../../../../constants/navigation/Routes'; +import { toChecksumAddress } from 'ethereumjs-util'; +import { + selectNetwork, + selectChainId, +} from '../../../../selectors/networkController'; +import { validateAddressOrENS } from '../../../../util/address'; +import Engine from '../../../../core/Engine'; +import { strings } from '../../../../../locales/i18n'; +import { NetworkSwitchErrorType } from '../../../../constants/error'; +import { showAlert } from '../../../../actions/alert'; + +const SendToAddressTo = ({ + inputRef, + highlighted, + addressToReady, + toSelectedAddress, + toSelectedAddressName, + onSubmit, + inputWidth, + confusableCollectionArray, + isFromAddressBook, + updateParentState, +}) => { + const navigation = useNavigation(); + const dispatch = useDispatch(); + + const identities = useSelector( + (state) => state.engine.backgroundState.PreferencesController.identities, + ); + + const addressBook = useSelector( + (state) => state.engine.backgroundState.AddressBookController.addressBook, + ); + + const network = useSelector(selectNetwork); + const chainId = useSelector(selectChainId); + + const frequentRpcList = useSelector( + (state) => + state.engine.backgroundState.PreferencesController.frequentRpcList, + ); + + const showAlertAction = (config) => dispatch(showAlert(config)); + + const handleNetworkSwitched = (chain_id) => { + try { + const { NetworkController, CurrencyRateController } = Engine.context; + const networkSwitch = handleNetworkSwitch(chain_id, frequentRpcList, { + networkController: NetworkController, + currencyRateController: CurrencyRateController, + }); + + if (!networkSwitch) return; + + showAlertAction({ + isVisible: true, + autodismiss: 5000, + content: 'clipboard-alert', + data: { msg: strings('send.warn_network_change') + network }, + }); + } catch (e) { + let alertMessage; + switch (e.message) { + case NetworkSwitchErrorType.missingNetworkId: + alertMessage = strings('send.network_missing_id'); + break; + default: + alertMessage = strings('send.network_not_found_description', { + chain_id, + }); + } + Alert.alert(strings('send.network_not_found_title'), alertMessage); + } + }; + + const getAddressNameFromBookOrIdentities = (toAccount) => { + if (!toAccount) return; + + const networkAddressBook = addressBook[network] || {}; + + const checksummedAddress = toChecksumAddress(toAccount); + + return networkAddressBook[checksummedAddress] + ? networkAddressBook[checksummedAddress].name + : identities[checksummedAddress] + ? identities[checksummedAddress].name + : null; + }; + + const validateAddressOrENSFromInput = async (toAccount) => { + const { + addressError, + toEnsName, + addressReady, + toEnsAddress, + addToAddressToAddressBook, + toAddressName, + errorContinue, + isOnlyWarning, + confusableCollection, + } = await validateAddressOrENS({ + toAccount, + network, + addressBook, + identities, + chainId, + }); + + return { + addressError, + toEnsName, + toSelectedAddressReady: addressReady, + toEnsAddressResolved: toEnsAddress, + addToAddressToAddressBook, + toSelectedAddressName: toAddressName, + errorContinue, + isOnlyWarning, + confusableCollection, + }; + }; + + const onToSelectedAddressChange = async (toAccount) => { + console.log('called'); + const addressName = getAddressNameFromBookOrIdentities(toAccount); + + /** + * If the address is from addressBook or identities + * then validation is not necessary since it was already validated + */ + if (addressName) { + updateParentState({ + toAccount, + toSelectedAddressReady: true, + isFromAddressBook: true, + toSelectedAddressName: addressName, + }); + } else { + const validatedInput = await validateAddressOrENSFromInput(toAccount); + /** + * Because validateAddressOrENSFromInput is an asynchronous function + * we are setting the state here synchronously, so it does not block the UI + * */ + + updateParentState({ + toAccount, + isFromAddressBook: false, + ...validatedInput, + }); + } + }; + const onScan = () => { + navigation.navigate( + ...createQRScannerNavDetails({ + onScanSuccess: (meta) => { + if (meta.chain_id) { + handleNetworkSwitched(meta.chain_id); + } + if (meta.target_address) { + const somedata = onToSelectedAddressChange(meta.target_address, addressBook, network, identities, chainId) + updateParentState({...somedata}) + } + }, + origin: Routes.SEND_FLOW.SEND_TO, + }), + ); + }; + + const onToInputFocus = () => { + updateParentState({ highlighted: !highlighted }); + }; + const onClear = () => onToSelectedAddressChange(); + + return ( + + ); +}; + +export default SendToAddressTo; diff --git a/app/components/Views/SendFlow/SendTo/index.js b/app/components/Views/SendFlow/SendTo/index.js index 3f88467bc6c..ae9296c8a01 100644 --- a/app/components/Views/SendFlow/SendTo/index.js +++ b/app/components/Views/SendFlow/SendTo/index.js @@ -11,7 +11,6 @@ import { import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { toChecksumAddress } from 'ethereumjs-util'; -import { hexToBN } from '@metamask/controller-utils'; import { SafeAreaView } from 'react-native-safe-area-context'; import Icon from 'react-native-vector-icons/FontAwesome'; import Engine from '../../../../core/Engine'; @@ -19,7 +18,7 @@ import Analytics from '../../../../core/Analytics/Analytics'; import AddressList from './../AddressList'; import { createQRScannerNavDetails } from '../../QRScanner'; import Text from '../../../Base/Text'; -import { AddressFrom, AddressTo } from '../../../UI/AddressInputs'; +import { AddressTo } from '../../../UI/AddressInputs'; import WarningMessage from '../WarningMessage'; import { getSendFlowTitle } from '../../../UI/Navbar'; import ActionModal from '../../../UI/ActionModal'; @@ -27,9 +26,7 @@ import StyledButton from '../../../UI/StyledButton'; import { MetaMetricsEvents } from '../../../../core/Analytics'; import AnalyticsV2 from '../../../../util/analyticsV2'; -import { doENSReverseLookup } from '../../../../util/ENSUtils'; import { handleNetworkSwitch } from '../../../../util/networks'; -import { renderFromWei } from '../../../../util/number'; import { isENS, isValidHexAddress, @@ -76,6 +73,9 @@ import { } from '../../../../selectors/networkController'; import { isNetworkBuyNativeTokenSupported } from '../../../UI/FiatOnRampAggregator/utils'; import { getRampNetworks } from '../../../../reducers/fiatOrders'; +import SendToAddressFrom from './SendAddressFrom'; +// import {onToSelectedAddressChange} from './utils' +import SendToAddressTo from './SendToAddressTo'; const dummy = () => true; @@ -84,10 +84,6 @@ const dummy = () => true; */ class SendFlow extends PureComponent { static propTypes = { - /** - * Map of accounts to information objects including balances - */ - accounts: PropTypes.object, /** * Map representing the address book */ @@ -190,33 +186,19 @@ class SendFlow extends PureComponent { componentDidMount = async () => { const { addressBook, - selectedAddress, - accounts, ticker, network, navigation, providerType, route, isPaymentRequest, + identities, + chainId, } = this.props; - const { fromAccountName } = this.state; this.updateNavBar(); // For analytics navigation.setParams({ providerType, isPaymentRequest }); const networkAddressBook = addressBook[network] || {}; - const ens = await doENSReverseLookup(selectedAddress, network); - const fromAccountBalance = `${renderFromWei( - accounts[selectedAddress].balance, - )} ${getTicker(ticker)}`; - - setTimeout(() => { - this.setState({ - fromAccountName: ens || fromAccountName, - fromAccountBalance, - balanceIsZero: hexToBN(accounts[selectedAddress].balance).isZero(), - inputWidth: { width: '100%' }, - }); - }, 100); if (!Object.keys(networkAddressBook).length) { setTimeout(() => { this.addressToInputRef && @@ -228,7 +210,8 @@ class SendFlow extends PureComponent { const targetAddress = route.params?.txMeta?.target_address; if (targetAddress) { this.props.newAssetTransaction(getEther(ticker)); - this.onToSelectedAddressChange(targetAddress); + const selectAddressChange = this.onToSelectedAddressChange(targetAddress, addressBook, network, identities, chainId); + this.setState({...selectAddressChange}); } }; @@ -243,55 +226,6 @@ class SendFlow extends PureComponent { }); }; - onSelectAccount = async (accountAddress) => { - const { ticker, accounts, identities } = this.props; - const { name } = identities[accountAddress]; - const fromAccountBalance = `${renderFromWei( - accounts[accountAddress].balance, - )} ${getTicker(ticker)}`; - const ens = await doENSReverseLookup(accountAddress); - const fromAccountName = ens || name; - // If new account doesn't have the asset - this.props.setSelectedAsset(getEther(ticker)); - this.setState({ - fromAccountName, - fromAccountBalance, - fromSelectedAddress: accountAddress, - balanceIsZero: hexToBN(accounts[accountAddress].balance).isZero(), - }); - }; - - openAccountSelector = () => { - const { navigation } = this.props; - navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, { - screen: Routes.SHEET.ACCOUNT_SELECTOR, - params: { - isSelectOnly: true, - onSelectAccount: this.onSelectAccount, - }, - }); - }; - - /** - * This returns the address name from the address book or user accounts if the selectedAddress exist there - * @param {String} toAccount - Address input - * @returns {String | null} - Address or null if toAccount is not in the addressBook or identities array - */ - getAddressNameFromBookOrIdentities = (toAccount) => { - if (!toAccount) return; - - const { addressBook, network, identities } = this.props; - const networkAddressBook = addressBook[network] || {}; - - const checksummedAddress = toChecksumAddress(toAccount); - - return networkAddressBook[checksummedAddress] - ? networkAddressBook[checksummedAddress].name - : identities[checksummedAddress] - ? identities[checksummedAddress].name - : null; - }; - isAddressSaved = () => { const { toAccount } = this.state; const { addressBook, network, identities } = this.props; @@ -302,71 +236,6 @@ class SendFlow extends PureComponent { ); }; - /** - * This set to the state all the information - * that come from validating an ENS or address - * @param {*} toSelectedAddress - The address or the ens writted on the destination input - */ - validateAddressOrENSFromInput = async (toAccount) => { - const { network, addressBook, identities, chainId } = this.props; - const { - addressError, - toEnsName, - addressReady, - toEnsAddress, - addToAddressToAddressBook, - toAddressName, - errorContinue, - isOnlyWarning, - confusableCollection, - } = await validateAddressOrENS({ - toAccount, - network, - addressBook, - identities, - chainId, - }); - - this.setState({ - addressError, - toEnsName, - toSelectedAddressReady: addressReady, - toEnsAddressResolved: toEnsAddress, - addToAddressToAddressBook, - toSelectedAddressName: toAddressName, - errorContinue, - isOnlyWarning, - confusableCollection, - }); - }; - - onToSelectedAddressChange = (toAccount) => { - const addressName = this.getAddressNameFromBookOrIdentities(toAccount); - - /** - * If the address is from addressBook or identities - * then validation is not necessary since it was already validated - */ - if (addressName) { - this.setState({ - toAccount, - toSelectedAddressReady: true, - isFromAddressBook: true, - toSelectedAddressName: addressName, - }); - } else { - this.validateAddressOrENSFromInput(toAccount); - /** - * Because validateAddressOrENSFromInput is an asynchronous function - * we are setting the state here synchronously, so it does not block the UI - * */ - this.setState({ - toAccount, - isFromAddressBook: false, - }); - } - }; - validateToAddress = () => { const { toAccount, toEnsAddressResolved } = this.state; let addressError; @@ -381,10 +250,6 @@ class SendFlow extends PureComponent { return addressError; }; - onToClear = () => { - this.onToSelectedAddressChange(); - }; - onChangeAlias = (alias) => { this.setState({ alias }); }; @@ -438,22 +303,6 @@ class SendFlow extends PureComponent { } }; - onScan = () => { - this.props.navigation.navigate( - ...createQRScannerNavDetails({ - onScanSuccess: (meta) => { - if (meta.chain_id) { - this.handleNetworkSwitch(meta.chain_id); - } - if (meta.target_address) { - this.onToSelectedAddressChange(meta.target_address); - } - }, - origin: Routes.SEND_FLOW.SEND_TO, - }), - ); - }; - onTransactionDirectionSet = async () => { const { setRecipient, navigation, providerType, addRecent } = this.props; const { @@ -468,6 +317,7 @@ class SendFlow extends PureComponent { const addressError = this.validateToAddress(); if (addressError) return; } + const toAddress = toEnsAddressResolved || toAccount; addRecent(toAddress); setRecipient( @@ -594,19 +444,106 @@ class SendFlow extends PureComponent { addressError ); + updateParentState = (state) => { + this.setState({ ...state }); + }; + + + getAddressNameFromBookOrIdentities = (toAccount) => { + const { addressBook, identities, network } = this.props; + if (!toAccount) return; + + const networkAddressBook = addressBook[network] || {}; + + const checksummedAddress = toChecksumAddress(toAccount); + + return networkAddressBook[checksummedAddress] + ? networkAddressBook[checksummedAddress].name + : identities[checksummedAddress] + ? identities[checksummedAddress].name + : null; + }; + + validateAddressOrENSFromInput = async (toAccount) => { + const {addressBook,identities, chainId, network } = this.props; + const { + addressError, + toEnsName, + addressReady, + toEnsAddress, + addToAddressToAddressBook, + toAddressName, + errorContinue, + isOnlyWarning, + confusableCollection, + } = await validateAddressOrENS({ + toAccount, + network, + addressBook, + identities, + chainId, + }); + + return { + addressError, + toEnsName, + toSelectedAddressReady: addressReady, + toEnsAddressResolved: toEnsAddress, + addToAddressToAddressBook, + toSelectedAddressName: toAddressName, + errorContinue, + isOnlyWarning, + confusableCollection, + }; + }; + + + onToSelectedAddressChange = async (toAccount) => { + // const {addressBook,identities, chainId } = this.props; + const addressName = this.getAddressNameFromBookOrIdentities(toAccount); + + /** + * If the address is from addressBook or identities + * then validation is not necessary since it was already validated + */ + if (addressName) { + this.setState({ + toAccount, + toSelectedAddressReady: true, + isFromAddressBook: true, + toSelectedAddressName: addressName, + }); + } else { + await this.validateAddressOrENSFromInput(toAccount); + /** + * Because validateAddressOrENSFromInput is an asynchronous function + * we are setting the state here synchronously, so it does not block the UI + * */ + + this.setState({ + toAccount, + isFromAddressBook: false, + // ...validatedInput, + }); + } + }; + + onAccountPress = async (toAccount) => { + const {network, identities, chainId, addressBook} = this.props + const selectAddressChange = await this.onToSelectedAddressChange(toAccount,addressBook, network, identities, chainId) + console.log(selectAddressChange, 'selectAddressChange'); + this.setState({ ...selectAddressChange }); + } + render = () => { const { ticker, addressBook, network } = this.props; const { - fromSelectedAddress, - fromAccountName, - fromAccountBalance, toAccount, toSelectedAddressReady, toSelectedAddressName, addToAddressToAddressBook, addressError, balanceIsZero, - toInputHighlighted, inputWidth, errorContinue, isOnlyWarning, @@ -639,29 +576,20 @@ class SendFlow extends PureComponent { {...generateTestId(Platform, SEND_SCREEN_ID)} > - - + @@ -680,7 +608,7 @@ class SendFlow extends PureComponent { {!toSelectedAddressReady ? ( this.onAccountPress(toAccount)} onAccountLongPress={dummy} /> ) : ( @@ -795,7 +723,6 @@ class SendFlow extends PureComponent { SendFlow.contextType = ThemeContext; const mapStateToProps = (state) => ({ - accounts: state.engine.backgroundState.AccountTrackerController.accounts, addressBook: state.engine.backgroundState.AddressBookController.addressBook, chainId: selectChainId(state), selectedAddress: diff --git a/app/components/Views/SendFlow/SendTo/utils.js b/app/components/Views/SendFlow/SendTo/utils.js new file mode 100644 index 00000000000..4595d23ad1e --- /dev/null +++ b/app/components/Views/SendFlow/SendTo/utils.js @@ -0,0 +1,88 @@ +import { toChecksumAddress } from 'ethereumjs-util'; +import { + validateAddressOrENS, + } from '../../../../util/address'; + + /** + * This returns the address name from the address book or user accounts if the selectedAddress exist there + * @param {String} toAccount - Address input + * @returns {String | null} - Address or null if toAccount is not in the addressBook or identities array + */ + const getAddressNameFromBookOrIdentities = (toAccount, addressBook, network, identities) => { + if (!toAccount) return; + const networkAddressBook = addressBook[network] || {}; + + const checksummedAddress = toChecksumAddress(toAccount); + + return networkAddressBook[checksummedAddress] + ? networkAddressBook[checksummedAddress].name + : identities[checksummedAddress] + ? identities[checksummedAddress].name + : null; + }; + + /** + * This set to the state all the information + * that come from validating an ENS or address + * @param {*} toSelectedAddress - The address or the ens writted on the destination input + */ + const validateAddressOrENSFromInput = async (toAccount, network, identities, addressBook, chainId) => { + // const { network, addressBook, identities, chainId } = this.props; + const { + addressError, + toEnsName, + addressReady, + toEnsAddress, + addToAddressToAddressBook, + toAddressName, + errorContinue, + isOnlyWarning, + confusableCollection, + } = await validateAddressOrENS({ + toAccount, + network, + addressBook, + identities, + chainId, + }) + + return { + addressError, + toEnsName, + addressReady, + toEnsAddress, + addToAddressToAddressBook, + toAddressName, + errorContinue, + isOnlyWarning, + confusableCollection, + } + }; + +export const onToSelectedAddressChange = async (toAccount, addressBook, network, identities, chainId) => { + if(!toAccount) return; + const addressName = getAddressNameFromBookOrIdentities(toAccount, addressBook, network, identities); + /** + * If the address is from addressBook or identities + * then validation is not necessary since it was already validated + */ + if (addressName) { + return { + toAccount, + toSelectedAddressReady: true, + isFromAddressBook: true, + toSelectedAddressName: addressName, + } + } else { + const validateInput = await validateAddressOrENSFromInput(toAccount, addressBook, network, identities, chainId); + /** + * Because validateAddressOrENSFromInput is an asynchronous function + * we are setting the state here synchronously, so it does not block the UI + * */ + return { + toAccount, + isFromAddressBook: false, + ...validateInput, + } + } + }; \ No newline at end of file diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 6d88d82ad81..46cbc0c63d6 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -777,7 +777,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: a7c83b31436843459a1961bfd74b96033dc77234 - Branch: 4ac024cb3c29b0ef628048694db3c4cfa679beb0 + Branch: 74cc856025984f691833c8fa332834ac38a0cf4e BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 @@ -874,4 +874,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 74e503a275b4ed097cb01c171027882e9cdc699d -COCOAPODS: 1.11.2 +COCOAPODS: 1.11.3 From 05fcb57ac83e240b5eb6c4ae41fde5dea2c41e0d Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Tue, 25 Apr 2023 16:02:45 +0100 Subject: [PATCH 02/14] draft --- .../Views/SendFlow/SendTo/SendToAddressTo.js | 6 +- app/components/Views/SendFlow/SendTo/index.js | 39 +++----- app/components/Views/SendFlow/SendTo/utils.js | 88 ------------------- 3 files changed, 12 insertions(+), 121 deletions(-) delete mode 100644 app/components/Views/SendFlow/SendTo/utils.js diff --git a/app/components/Views/SendFlow/SendTo/SendToAddressTo.js b/app/components/Views/SendFlow/SendTo/SendToAddressTo.js index cd98cca654b..0e561da2eb5 100644 --- a/app/components/Views/SendFlow/SendTo/SendToAddressTo.js +++ b/app/components/Views/SendFlow/SendTo/SendToAddressTo.js @@ -128,9 +128,7 @@ const SendToAddressTo = ({ }; const onToSelectedAddressChange = async (toAccount) => { - console.log('called'); const addressName = getAddressNameFromBookOrIdentities(toAccount); - /** * If the address is from addressBook or identities * then validation is not necessary since it was already validated @@ -156,6 +154,7 @@ const SendToAddressTo = ({ }); } }; + const onScan = () => { navigation.navigate( ...createQRScannerNavDetails({ @@ -164,8 +163,7 @@ const SendToAddressTo = ({ handleNetworkSwitched(meta.chain_id); } if (meta.target_address) { - const somedata = onToSelectedAddressChange(meta.target_address, addressBook, network, identities, chainId) - updateParentState({...somedata}) + onToSelectedAddressChange(meta.target_address); } }, origin: Routes.SEND_FLOW.SEND_TO, diff --git a/app/components/Views/SendFlow/SendTo/index.js b/app/components/Views/SendFlow/SendTo/index.js index ae9296c8a01..23e44dbb083 100644 --- a/app/components/Views/SendFlow/SendTo/index.js +++ b/app/components/Views/SendFlow/SendTo/index.js @@ -16,9 +16,7 @@ import Icon from 'react-native-vector-icons/FontAwesome'; import Engine from '../../../../core/Engine'; import Analytics from '../../../../core/Analytics/Analytics'; import AddressList from './../AddressList'; -import { createQRScannerNavDetails } from '../../QRScanner'; import Text from '../../../Base/Text'; -import { AddressTo } from '../../../UI/AddressInputs'; import WarningMessage from '../WarningMessage'; import { getSendFlowTitle } from '../../../UI/Navbar'; import ActionModal from '../../../UI/ActionModal'; @@ -74,7 +72,6 @@ import { import { isNetworkBuyNativeTokenSupported } from '../../../UI/FiatOnRampAggregator/utils'; import { getRampNetworks } from '../../../../reducers/fiatOrders'; import SendToAddressFrom from './SendAddressFrom'; -// import {onToSelectedAddressChange} from './utils' import SendToAddressTo from './SendToAddressTo'; const dummy = () => true; @@ -152,6 +149,7 @@ class SendFlow extends PureComponent { * Boolean that indicates if the network supports buy */ isNativeTokenBuySupported: PropTypes.bool, + updateParentState: PropTypes.func, }; addressToInputRef = React.createRef(); @@ -161,8 +159,6 @@ class SendFlow extends PureComponent { balanceIsZero: false, addToAddressBookModalVisible: false, fromSelectedAddress: this.props.selectedAddress, - fromAccountName: this.props.identities[this.props.selectedAddress].name, - fromAccountBalance: undefined, toAccount: undefined, toSelectedAddressName: undefined, toSelectedAddressReady: false, @@ -192,8 +188,6 @@ class SendFlow extends PureComponent { providerType, route, isPaymentRequest, - identities, - chainId, } = this.props; this.updateNavBar(); // For analytics @@ -210,8 +204,7 @@ class SendFlow extends PureComponent { const targetAddress = route.params?.txMeta?.target_address; if (targetAddress) { this.props.newAssetTransaction(getEther(ticker)); - const selectAddressChange = this.onToSelectedAddressChange(targetAddress, addressBook, network, identities, chainId); - this.setState({...selectAddressChange}); + this.onToSelectedAddressChange(targetAddress); } }; @@ -255,6 +248,7 @@ class SendFlow extends PureComponent { }; onSaveToAddressBook = () => { + console.log('onSaveToAddressBook'); const { network } = this.props; const { toAccount, alias, toEnsAddressResolved } = this.state; const { AddressBookController } = Engine.context; @@ -310,7 +304,6 @@ class SendFlow extends PureComponent { toAccount, toEnsName, toSelectedAddressName, - fromAccountName, toEnsAddressResolved, } = this.state; if (!this.isAddressSaved()) { @@ -325,7 +318,6 @@ class SendFlow extends PureComponent { toAddress, toEnsName, toSelectedAddressName, - fromAccountName, ); InteractionManager.runAfterInteractions(() => { Analytics.trackEventWithParameters( @@ -448,7 +440,6 @@ class SendFlow extends PureComponent { this.setState({ ...state }); }; - getAddressNameFromBookOrIdentities = (toAccount) => { const { addressBook, identities, network } = this.props; if (!toAccount) return; @@ -465,7 +456,7 @@ class SendFlow extends PureComponent { }; validateAddressOrENSFromInput = async (toAccount) => { - const {addressBook,identities, chainId, network } = this.props; + const { addressBook, identities, chainId, network } = this.props; const { addressError, toEnsName, @@ -484,7 +475,7 @@ class SendFlow extends PureComponent { chainId, }); - return { + this.setState({ addressError, toEnsName, toSelectedAddressReady: addressReady, @@ -494,12 +485,10 @@ class SendFlow extends PureComponent { errorContinue, isOnlyWarning, confusableCollection, - }; + }); }; - - onToSelectedAddressChange = async (toAccount) => { - // const {addressBook,identities, chainId } = this.props; + onToSelectedAddressChange = (toAccount) => { const addressName = this.getAddressNameFromBookOrIdentities(toAccount); /** @@ -514,27 +503,18 @@ class SendFlow extends PureComponent { toSelectedAddressName: addressName, }); } else { - await this.validateAddressOrENSFromInput(toAccount); + this.validateAddressOrENSFromInput(toAccount); /** * Because validateAddressOrENSFromInput is an asynchronous function * we are setting the state here synchronously, so it does not block the UI * */ - this.setState({ toAccount, isFromAddressBook: false, - // ...validatedInput, }); } }; - onAccountPress = async (toAccount) => { - const {network, identities, chainId, addressBook} = this.props - const selectAddressChange = await this.onToSelectedAddressChange(toAccount,addressBook, network, identities, chainId) - console.log(selectAddressChange, 'selectAddressChange'); - this.setState({ ...selectAddressChange }); - } - render = () => { const { ticker, addressBook, network } = this.props; const { @@ -551,6 +531,7 @@ class SendFlow extends PureComponent { isFromAddressBook, toEnsAddressResolved, } = this.state; + const colors = this.context.colors || mockTheme.colors; const styles = createStyles(colors); @@ -608,7 +589,7 @@ class SendFlow extends PureComponent { {!toSelectedAddressReady ? ( this.onAccountPress(toAccount)} + onAccountPress={this.onToSelectedAddressChange} onAccountLongPress={dummy} /> ) : ( diff --git a/app/components/Views/SendFlow/SendTo/utils.js b/app/components/Views/SendFlow/SendTo/utils.js deleted file mode 100644 index 4595d23ad1e..00000000000 --- a/app/components/Views/SendFlow/SendTo/utils.js +++ /dev/null @@ -1,88 +0,0 @@ -import { toChecksumAddress } from 'ethereumjs-util'; -import { - validateAddressOrENS, - } from '../../../../util/address'; - - /** - * This returns the address name from the address book or user accounts if the selectedAddress exist there - * @param {String} toAccount - Address input - * @returns {String | null} - Address or null if toAccount is not in the addressBook or identities array - */ - const getAddressNameFromBookOrIdentities = (toAccount, addressBook, network, identities) => { - if (!toAccount) return; - const networkAddressBook = addressBook[network] || {}; - - const checksummedAddress = toChecksumAddress(toAccount); - - return networkAddressBook[checksummedAddress] - ? networkAddressBook[checksummedAddress].name - : identities[checksummedAddress] - ? identities[checksummedAddress].name - : null; - }; - - /** - * This set to the state all the information - * that come from validating an ENS or address - * @param {*} toSelectedAddress - The address or the ens writted on the destination input - */ - const validateAddressOrENSFromInput = async (toAccount, network, identities, addressBook, chainId) => { - // const { network, addressBook, identities, chainId } = this.props; - const { - addressError, - toEnsName, - addressReady, - toEnsAddress, - addToAddressToAddressBook, - toAddressName, - errorContinue, - isOnlyWarning, - confusableCollection, - } = await validateAddressOrENS({ - toAccount, - network, - addressBook, - identities, - chainId, - }) - - return { - addressError, - toEnsName, - addressReady, - toEnsAddress, - addToAddressToAddressBook, - toAddressName, - errorContinue, - isOnlyWarning, - confusableCollection, - } - }; - -export const onToSelectedAddressChange = async (toAccount, addressBook, network, identities, chainId) => { - if(!toAccount) return; - const addressName = getAddressNameFromBookOrIdentities(toAccount, addressBook, network, identities); - /** - * If the address is from addressBook or identities - * then validation is not necessary since it was already validated - */ - if (addressName) { - return { - toAccount, - toSelectedAddressReady: true, - isFromAddressBook: true, - toSelectedAddressName: addressName, - } - } else { - const validateInput = await validateAddressOrENSFromInput(toAccount, addressBook, network, identities, chainId); - /** - * Because validateAddressOrENSFromInput is an asynchronous function - * we are setting the state here synchronously, so it does not block the UI - * */ - return { - toAccount, - isFromAddressBook: false, - ...validateInput, - } - } - }; \ No newline at end of file From bd04c5a48bf3d1efe5dd062de8edd115841fb5d3 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Wed, 26 Apr 2023 07:23:02 +0100 Subject: [PATCH 03/14] cleaned up --- .../AddressFrom/SendToAddressFrom.test.tsx | 64 +++++++++++ .../SendToAddressFrom.tsx} | 29 +++-- .../SendToAddressFrom.test.tsx.snap | 53 +++++++++ .../Views/SendFlow/AddressFrom/index.ts | 1 + .../AddressTo/SendToAddressTo.test.tsx | 72 +++++++++++++ .../SendToAddressTo.tsx} | 102 ++---------------- .../AddressTo/SendToAddressTo.types.ts | 0 .../SendToAddressTo.test.tsx.snap | 45 ++++++++ .../Views/SendFlow/AddressTo/index.ts | 1 + .../{index.test.tsx => SendTo.test.tsx} | 2 +- ...dex.test.tsx.snap => SendTo.test.tsx.snap} | 7 -- app/components/Views/SendFlow/SendTo/index.js | 21 ++-- app/components/Views/SendFlow/SendTo/types.ts | 21 ++++ app/constants/navigation/Routes.ts | 1 + app/constants/test-ids.js | 4 + 15 files changed, 303 insertions(+), 120 deletions(-) create mode 100644 app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx rename app/components/Views/SendFlow/{SendTo/SendAddressFrom.js => AddressFrom/SendToAddressFrom.tsx} (79%) create mode 100644 app/components/Views/SendFlow/AddressFrom/__snapshots__/SendToAddressFrom.test.tsx.snap create mode 100644 app/components/Views/SendFlow/AddressFrom/index.ts create mode 100644 app/components/Views/SendFlow/AddressTo/SendToAddressTo.test.tsx rename app/components/Views/SendFlow/{SendTo/SendToAddressTo.js => AddressTo/SendToAddressTo.tsx} (54%) create mode 100644 app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts create mode 100644 app/components/Views/SendFlow/AddressTo/__snapshots__/SendToAddressTo.test.tsx.snap create mode 100644 app/components/Views/SendFlow/AddressTo/index.ts rename app/components/Views/SendFlow/SendTo/{index.test.tsx => SendTo.test.tsx} (98%) rename app/components/Views/SendFlow/SendTo/__snapshots__/{index.test.tsx.snap => SendTo.test.tsx.snap} (90%) create mode 100644 app/components/Views/SendFlow/SendTo/types.ts diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx new file mode 100644 index 00000000000..92861e90681 --- /dev/null +++ b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import { render } from 'enzyme'; +import SendToAddressFrom from '.'; +import { Provider } from 'react-redux'; +import Engine from '../../../../core/Engine'; + +Engine.init(); +jest.mock('@react-navigation/native', () => ({ + useNavigation: () => ({ + navigation: {}, + }), + createNavigatorFactory: () => ({}), +})); + +const initialState = { + settings: {}, + engine: { + backgroundState: { + AccountTrackerController: { + accounts: { + '0x0': { + balance: 200, + }, + }, + }, + PreferencesController: { + selectedAddress: '0x0', + identities: { + '0x0': { + address: '0x0', + name: 'Account 1', + }, + }, + }, + }, + }, +}; + +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useSelector: jest + .fn() + .mockImplementation((callback) => callback(initialState)), +})); + +const mockStore = configureMockStore(); +const store = mockStore(initialState); + +describe('SendToAddressFrom', () => { + it('should render correctly', () => { + const wrapper = render( + + undefined} + /> + , + ); + expect(wrapper).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/app/components/Views/SendFlow/SendTo/SendAddressFrom.js b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx similarity index 79% rename from app/components/Views/SendFlow/SendTo/SendAddressFrom.js rename to app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx index 77cddeeb066..25f3d324677 100644 --- a/app/components/Views/SendFlow/SendTo/SendAddressFrom.js +++ b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx @@ -12,22 +12,25 @@ import { getTicker, getEther } from '../../../../util/transactions'; import { doENSReverseLookup } from '../../../../util/ENSUtils'; import { hexToBN } from '@metamask/controller-utils'; import { setSelectedAsset } from '../../../../actions/transaction'; +import { SelectedAssetProp } from '../SendTo/types'; const SendToAddressFrom = () => { const navigation = useNavigation(); const identities = useSelector( - (state) => state.engine.backgroundState.PreferencesController.identities, + (state: any) => + state.engine.backgroundState.PreferencesController.identities, ); const accounts = useSelector( - (state) => state.engine.backgroundState.AccountTrackerController.accounts, + (state: any) => + state.engine.backgroundState.AccountTrackerController.accounts, ); - const network = useSelector((state) => selectNetwork(state)); + const network = useSelector((state: any) => selectNetwork(state)); const ticker = useSelector(selectTicker); const selectedAddress = useSelector( - (state) => + (state: any) => state.engine.backgroundState.PreferencesController.selectedAddress, ); @@ -41,25 +44,35 @@ const SendToAddressFrom = () => { useEffect(() => { async function getAccount() { const ens = await doENSReverseLookup(selectedAddress, network); + const address = selectedAddress; const fromAccountBalance1 = `${renderFromWei( accounts[selectedAddress].balance, )} ${getTicker(ticker)}`; setState({ ...state, + address, balance: fromAccountBalance1, accName: ens || identities[selectedAddress].name, balanceIsZero: hexToBN(accounts[selectedAddress].balance).isZero(), }); } getAccount(); - }, [accounts, selectedAddress, ticker, state.balance, state.accName]); + }, [ + accounts, + selectedAddress, + ticker, + state.balance, + state.accName, + network, + identities, + ]); const dispatch = useDispatch(); - const selectedAssetAction = (selectedAsset) => + const selectedAssetAction = (selectedAsset: SelectedAssetProp) => dispatch(setSelectedAsset(selectedAsset)); - const onSelectAccount = async (address) => { + const onSelectAccount = async (address: string) => { const { name } = identities[address]; const balance = `${renderFromWei(accounts[address].balance)} ${getTicker( ticker, @@ -86,7 +99,7 @@ const SendToAddressFrom = () => { }); }; - const { address, balance, accName } = state; + const { address, balance, accName } = state; return ( + + + From: + + + + + + + + + + Balance: + + + + + +  + + + + + +`; diff --git a/app/components/Views/SendFlow/AddressFrom/index.ts b/app/components/Views/SendFlow/AddressFrom/index.ts new file mode 100644 index 00000000000..001d459ffee --- /dev/null +++ b/app/components/Views/SendFlow/AddressFrom/index.ts @@ -0,0 +1 @@ +export { default } from './SendToAddressFrom'; \ No newline at end of file diff --git a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.test.tsx b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.test.tsx new file mode 100644 index 00000000000..d1db46e84fb --- /dev/null +++ b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.test.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import { render } from 'enzyme'; +import SendToAddressTo from './'; +import { Provider } from 'react-redux'; +import Engine from '../../../../core/Engine'; + +Engine.init(); +jest.mock('@react-navigation/native', () => ({ + useNavigation: () => ({ + navigation: {}, + }), + createNavigatorFactory: () => ({}), +})); + +const initialState = { + settings: {}, + engine: { + backgroundState: { + AccountTrackerController: { + accounts: { + '0x0': { + balance: 200, + }, + }, + }, + AddressBookController: { + addressBook: {}, + }, + PreferencesController: { + selectedAddress: '0x0', + identities: { + '0x0': { + address: '0x0', + name: 'Account 1', + }, + }, + }, + }, + }, +}; + +const mockStore = configureMockStore(); +const store = mockStore(initialState); + +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useSelector: jest + .fn() + .mockImplementation((callback) => callback(initialState)), +})); + +describe('SendToAddressTo', () => { + it('should render correctly', () => { + const wrapper = render( + + undefined} + inputWidth={undefined} + confusableCollectionArray={undefined} + isFromAddressBook={undefined} + updateParentState={undefined} onToSelectedAddressChange={undefined} /> + , + ); + expect(wrapper).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/app/components/Views/SendFlow/SendTo/SendToAddressTo.js b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx similarity index 54% rename from app/components/Views/SendFlow/SendTo/SendToAddressTo.js rename to app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx index 0e561da2eb5..659a302a417 100644 --- a/app/components/Views/SendFlow/SendTo/SendToAddressTo.js +++ b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx @@ -6,16 +6,12 @@ import { useSelector, useDispatch } from 'react-redux'; import { createQRScannerNavDetails } from '../../QRScanner'; import { handleNetworkSwitch } from '../../../../util/networks'; import Routes from '../../../../constants/navigation/Routes'; -import { toChecksumAddress } from 'ethereumjs-util'; -import { - selectNetwork, - selectChainId, -} from '../../../../selectors/networkController'; -import { validateAddressOrENS } from '../../../../util/address'; +import { selectNetwork } from '../../../../selectors/networkController'; import Engine from '../../../../core/Engine'; import { strings } from '../../../../../locales/i18n'; import { NetworkSwitchErrorType } from '../../../../constants/error'; import { showAlert } from '../../../../actions/alert'; +import { STAddressToProps } from '../SendTo/types'; const SendToAddressTo = ({ inputRef, @@ -28,29 +24,21 @@ const SendToAddressTo = ({ confusableCollectionArray, isFromAddressBook, updateParentState, -}) => { + onToSelectedAddressChange, +}: STAddressToProps) => { const navigation = useNavigation(); const dispatch = useDispatch(); - const identities = useSelector( - (state) => state.engine.backgroundState.PreferencesController.identities, - ); - - const addressBook = useSelector( - (state) => state.engine.backgroundState.AddressBookController.addressBook, - ); - const network = useSelector(selectNetwork); - const chainId = useSelector(selectChainId); const frequentRpcList = useSelector( - (state) => + (state: any) => state.engine.backgroundState.PreferencesController.frequentRpcList, ); - const showAlertAction = (config) => dispatch(showAlert(config)); + const showAlertAction = (config: any) => dispatch(showAlert(config)); - const handleNetworkSwitched = (chain_id) => { + const handleNetworkSwitched = (chain_id: string) => { try { const { NetworkController, CurrencyRateController } = Engine.context; const networkSwitch = handleNetworkSwitch(chain_id, frequentRpcList, { @@ -66,7 +54,7 @@ const SendToAddressTo = ({ content: 'clipboard-alert', data: { msg: strings('send.warn_network_change') + network }, }); - } catch (e) { + } catch (e: any) { let alertMessage; switch (e.message) { case NetworkSwitchErrorType.missingNetworkId: @@ -81,80 +69,6 @@ const SendToAddressTo = ({ } }; - const getAddressNameFromBookOrIdentities = (toAccount) => { - if (!toAccount) return; - - const networkAddressBook = addressBook[network] || {}; - - const checksummedAddress = toChecksumAddress(toAccount); - - return networkAddressBook[checksummedAddress] - ? networkAddressBook[checksummedAddress].name - : identities[checksummedAddress] - ? identities[checksummedAddress].name - : null; - }; - - const validateAddressOrENSFromInput = async (toAccount) => { - const { - addressError, - toEnsName, - addressReady, - toEnsAddress, - addToAddressToAddressBook, - toAddressName, - errorContinue, - isOnlyWarning, - confusableCollection, - } = await validateAddressOrENS({ - toAccount, - network, - addressBook, - identities, - chainId, - }); - - return { - addressError, - toEnsName, - toSelectedAddressReady: addressReady, - toEnsAddressResolved: toEnsAddress, - addToAddressToAddressBook, - toSelectedAddressName: toAddressName, - errorContinue, - isOnlyWarning, - confusableCollection, - }; - }; - - const onToSelectedAddressChange = async (toAccount) => { - const addressName = getAddressNameFromBookOrIdentities(toAccount); - /** - * If the address is from addressBook or identities - * then validation is not necessary since it was already validated - */ - if (addressName) { - updateParentState({ - toAccount, - toSelectedAddressReady: true, - isFromAddressBook: true, - toSelectedAddressName: addressName, - }); - } else { - const validatedInput = await validateAddressOrENSFromInput(toAccount); - /** - * Because validateAddressOrENSFromInput is an asynchronous function - * we are setting the state here synchronously, so it does not block the UI - * */ - - updateParentState({ - toAccount, - isFromAddressBook: false, - ...validatedInput, - }); - } - }; - const onScan = () => { navigation.navigate( ...createQRScannerNavDetails({ diff --git a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/app/components/Views/SendFlow/AddressTo/__snapshots__/SendToAddressTo.test.tsx.snap b/app/components/Views/SendFlow/AddressTo/__snapshots__/SendToAddressTo.test.tsx.snap new file mode 100644 index 00000000000..becd2ca61ea --- /dev/null +++ b/app/components/Views/SendFlow/AddressTo/__snapshots__/SendToAddressTo.test.tsx.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SendToAddressTo should render correctly 1`] = ` + + + + To: + + + + + + + + +  + + + + +`; diff --git a/app/components/Views/SendFlow/AddressTo/index.ts b/app/components/Views/SendFlow/AddressTo/index.ts new file mode 100644 index 00000000000..3cde2f7dd85 --- /dev/null +++ b/app/components/Views/SendFlow/AddressTo/index.ts @@ -0,0 +1 @@ +export { default } from './SendToAddressTo'; \ No newline at end of file diff --git a/app/components/Views/SendFlow/SendTo/index.test.tsx b/app/components/Views/SendFlow/SendTo/SendTo.test.tsx similarity index 98% rename from app/components/Views/SendFlow/SendTo/index.test.tsx rename to app/components/Views/SendFlow/SendTo/SendTo.test.tsx index b303f77636f..d4a384c52b4 100644 --- a/app/components/Views/SendFlow/SendTo/index.test.tsx +++ b/app/components/Views/SendFlow/SendTo/SendTo.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import SendTo from './'; +import SendTo from '.'; import configureMockStore from 'redux-mock-store'; import { Provider } from 'react-redux'; diff --git a/app/components/Views/SendFlow/SendTo/__snapshots__/index.test.tsx.snap b/app/components/Views/SendFlow/SendTo/__snapshots__/SendTo.test.tsx.snap similarity index 90% rename from app/components/Views/SendFlow/SendTo/__snapshots__/index.test.tsx.snap rename to app/components/Views/SendFlow/SendTo/__snapshots__/SendTo.test.tsx.snap index 05a7be90971..45835b957a5 100644 --- a/app/components/Views/SendFlow/SendTo/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/SendFlow/SendTo/__snapshots__/SendTo.test.tsx.snap @@ -2,13 +2,6 @@ exports[`SendTo should render correctly 1`] = ` true; @@ -248,7 +251,6 @@ class SendFlow extends PureComponent { }; onSaveToAddressBook = () => { - console.log('onSaveToAddressBook'); const { network } = this.props; const { toAccount, alias, toEnsAddressResolved } = this.state; const { AddressBookController } = Engine.context; @@ -496,6 +498,7 @@ class SendFlow extends PureComponent { * then validation is not necessary since it was already validated */ if (addressName) { + // return this.setState({ toAccount, toSelectedAddressReady: true, @@ -570,6 +573,7 @@ class SendFlow extends PureComponent { (!existingContact && confusableCollection) || [] } isFromAddressBook={isFromAddressBook} + onToSelectedAddressChange={this.onToSelectedAddressChange} highlighted={false} /> @@ -596,10 +600,7 @@ class SendFlow extends PureComponent { {addressError && addressError !== CONTACT_ALREADY_SAVED && ( - + + {!errorContinue && ( void; + inputWidth: any; + confusableCollectionArray: any; + isFromAddressBook: any; + updateParentState: any; + onToSelectedAddressChange: any; +} diff --git a/app/constants/navigation/Routes.ts b/app/constants/navigation/Routes.ts index 0914aa9a15e..044d1b0d388 100644 --- a/app/constants/navigation/Routes.ts +++ b/app/constants/navigation/Routes.ts @@ -45,6 +45,7 @@ const Routes = { }, SEND_FLOW: { SEND_TO: 'SendTo', + AMOUNT: 'Amount', }, ACCOUNT_BACKUP: { STEP_1_B: 'AccountBackupStep1B', diff --git a/app/constants/test-ids.js b/app/constants/test-ids.js index 572b8e1f63d..421fcf81980 100644 --- a/app/constants/test-ids.js +++ b/app/constants/test-ids.js @@ -58,6 +58,10 @@ export const WHATS_NEW_MODAL_GOT_IT_BUTTON_ID = 'whats-new-modal-got-it-button'; export const INPUT_NETWORK_NAME = 'input-network-name'; export const ADDRESS_BOOK_NEXT_BUTTON = 'address-book-next-button'; +export const NO_ETH_MESSAGE = 'no-eth-message'; +export const SEND_SCREEN = 'send-screen'; +export const ADDRESS_ERROR = 'address-error'; +export const ADD_ADDRESS_BUTTON_ID = 'add-address-button'; // Design System test ids export const CELL_DISPLAY_TEST_ID = 'cell-display'; From 39525a9bcebbcd3e07bbc29bc1a1c5ddc4715acf Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Wed, 26 Apr 2023 08:25:25 +0100 Subject: [PATCH 04/14] lint --- .../Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx | 2 +- .../Views/SendFlow/AddressFrom/SendToAddressFrom.tsx | 3 +-- app/components/Views/SendFlow/AddressFrom/index.ts | 2 +- .../Views/SendFlow/AddressTo/SendToAddressTo.test.tsx | 6 ++++-- app/components/Views/SendFlow/AddressTo/index.ts | 2 +- ios/Podfile.lock | 4 ++-- 6 files changed, 10 insertions(+), 9 deletions(-) diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx index 92861e90681..f850d11f3d3 100644 --- a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx +++ b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx @@ -61,4 +61,4 @@ describe('SendToAddressFrom', () => { ); expect(wrapper).toMatchSnapshot(); }); -}); \ No newline at end of file +}); diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx index 25f3d324677..28365e0476e 100644 --- a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx +++ b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx @@ -49,7 +49,6 @@ const SendToAddressFrom = () => { accounts[selectedAddress].balance, )} ${getTicker(ticker)}`; setState({ - ...state, address, balance: fromAccountBalance1, accName: ens || identities[selectedAddress].name, @@ -99,7 +98,7 @@ const SendToAddressFrom = () => { }); }; - const { address, balance, accName } = state; + const { address, balance, accName } = state; return ( { inputWidth={undefined} confusableCollectionArray={undefined} isFromAddressBook={undefined} - updateParentState={undefined} onToSelectedAddressChange={undefined} /> + updateParentState={undefined} + onToSelectedAddressChange={undefined} + /> , ); expect(wrapper).toMatchSnapshot(); }); -}); \ No newline at end of file +}); diff --git a/app/components/Views/SendFlow/AddressTo/index.ts b/app/components/Views/SendFlow/AddressTo/index.ts index 3cde2f7dd85..00524ff8226 100644 --- a/app/components/Views/SendFlow/AddressTo/index.ts +++ b/app/components/Views/SendFlow/AddressTo/index.ts @@ -1 +1 @@ -export { default } from './SendToAddressTo'; \ No newline at end of file +export { default } from './SendToAddressTo'; diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 46cbc0c63d6..6d88d82ad81 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -777,7 +777,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: a7c83b31436843459a1961bfd74b96033dc77234 - Branch: 74cc856025984f691833c8fa332834ac38a0cf4e + Branch: 4ac024cb3c29b0ef628048694db3c4cfa679beb0 BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 @@ -874,4 +874,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 74e503a275b4ed097cb01c171027882e9cdc699d -COCOAPODS: 1.11.3 +COCOAPODS: 1.11.2 From 6f7b16ed8daf35ae60c2e7835bd906cfaff4f94c Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Wed, 26 Apr 2023 10:19:22 +0100 Subject: [PATCH 05/14] include isBalanceZero for fromaddress --- .../AddressFrom/SendToAddressFrom.test.tsx | 7 +-- .../AddressFrom/SendToAddressFrom.tsx | 57 ++++++++----------- .../AddressFrom/SendToAddressFrom.types.ts | 3 + .../SendFlow/AddressTo/SendToAddressTo.tsx | 2 +- .../AddressTo/SendToAddressTo.types.ts | 13 +++++ app/components/Views/SendFlow/SendTo/index.js | 8 ++- app/components/Views/SendFlow/SendTo/types.ts | 21 ------- 7 files changed, 49 insertions(+), 62 deletions(-) create mode 100644 app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.types.ts delete mode 100644 app/components/Views/SendFlow/SendTo/types.ts diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx index f850d11f3d3..dd3f7af7af7 100644 --- a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx +++ b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx @@ -51,12 +51,7 @@ describe('SendToAddressFrom', () => { it('should render correctly', () => { const wrapper = render( - undefined} - /> + , ); expect(wrapper).toMatchSnapshot(); diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx index 28365e0476e..7225cb41af4 100644 --- a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx +++ b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { AddressFrom } from '../../../UI/AddressInputs'; import { useSelector, useDispatch } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; @@ -10,11 +10,11 @@ import Routes from '../../../../constants/navigation/Routes'; import { renderFromWei } from '../../../../util/number'; import { getTicker, getEther } from '../../../../util/transactions'; import { doENSReverseLookup } from '../../../../util/ENSUtils'; -import { hexToBN } from '@metamask/controller-utils'; import { setSelectedAsset } from '../../../../actions/transaction'; -import { SelectedAssetProp } from '../SendTo/types'; +import { hexToBN } from '@metamask/controller-utils'; +import { STAddressFromProps } from './SendToAddressFrom.types'; -const SendToAddressFrom = () => { +const SendToAddressFrom = ({ fromAccountBalanceState }: STAddressFromProps) => { const navigation = useNavigation(); const identities = useSelector( (state: any) => @@ -34,41 +34,36 @@ const SendToAddressFrom = () => { state.engine.backgroundState.PreferencesController.selectedAddress, ); - const [state, setState] = React.useState({ - address: '', - accName: '', - balance: '', - isBalanceZero: false, - }); + const [accountAddress, setAccountAddress] = useState(selectedAddress); + const [accountName, setAccountName] = useState( + identities[selectedAddress].name, + ); + const [accountBalance, setAccountBalance] = useState(''); useEffect(() => { async function getAccount() { const ens = await doENSReverseLookup(selectedAddress, network); - const address = selectedAddress; - const fromAccountBalance1 = `${renderFromWei( + const balance = `${renderFromWei( accounts[selectedAddress].balance, )} ${getTicker(ticker)}`; - setState({ - address, - balance: fromAccountBalance1, - accName: ens || identities[selectedAddress].name, - balanceIsZero: hexToBN(accounts[selectedAddress].balance).isZero(), - }); + const balanceIsZero = hexToBN(accounts[selectedAddress].balance).isZero(); + setAccountName(ens || identities[selectedAddress].name); + setAccountBalance(balance); + fromAccountBalanceState(balanceIsZero); } getAccount(); }, [ accounts, selectedAddress, ticker, - state.balance, - state.accName, network, identities, + fromAccountBalanceState, ]); const dispatch = useDispatch(); - const selectedAssetAction = (selectedAsset: SelectedAssetProp) => + const selectedAssetAction = (selectedAsset: any) => dispatch(setSelectedAsset(selectedAsset)); const onSelectAccount = async (address: string) => { @@ -78,14 +73,12 @@ const SendToAddressFrom = () => { )}`; const ens = await doENSReverseLookup(address); const accName = ens || name; + const balanceIsZero = hexToBN(accounts[address].balance).isZero(); selectedAssetAction(getEther(ticker)); - const isBalanceZero = hexToBN(accounts[address].balance).isZero(); - setState({ - address, - accName, - balance, - isBalanceZero, - }); + setAccountAddress(address); + setAccountName(accName); + setAccountBalance(balance); + fromAccountBalanceState(balanceIsZero); }; const openAccountSelector = () => { @@ -98,14 +91,12 @@ const SendToAddressFrom = () => { }); }; - const { address, balance, accName } = state; - return ( ); }; diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.types.ts b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.types.ts new file mode 100644 index 00000000000..09a03302c45 --- /dev/null +++ b/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.types.ts @@ -0,0 +1,3 @@ +export interface STAddressFromProps { + fromAccountBalanceState: (value: boolean) => void; +} diff --git a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx index 659a302a417..fc6daf02c04 100644 --- a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx +++ b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx @@ -11,7 +11,7 @@ import Engine from '../../../../core/Engine'; import { strings } from '../../../../../locales/i18n'; import { NetworkSwitchErrorType } from '../../../../constants/error'; import { showAlert } from '../../../../actions/alert'; -import { STAddressToProps } from '../SendTo/types'; +import { STAddressToProps } from './SendToAddressTo.types'; const SendToAddressTo = ({ inputRef, diff --git a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts index e69de29bb2d..c87dbdc8eb1 100644 --- a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts +++ b/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts @@ -0,0 +1,13 @@ +export interface STAddressToProps { + inputRef: any; + highlighted: boolean; + addressToReady: boolean; + toSelectedAddress: any; + toSelectedAddressName: any; + onSubmit: (address: string) => void; + inputWidth: any; + confusableCollectionArray: any; + isFromAddressBook: any; + updateParentState: any; + onToSelectedAddressChange: any; +} diff --git a/app/components/Views/SendFlow/SendTo/index.js b/app/components/Views/SendFlow/SendTo/index.js index 245053b07f6..f7610a1f928 100644 --- a/app/components/Views/SendFlow/SendTo/index.js +++ b/app/components/Views/SendFlow/SendTo/index.js @@ -442,6 +442,10 @@ class SendFlow extends PureComponent { this.setState({ ...state }); }; + fromAccountBalanceState = (value) => { + this.setState({ balanceIsZero: value }); + }; + getAddressNameFromBookOrIdentities = (toAccount) => { const { addressBook, identities, network } = this.props; if (!toAccount) return; @@ -560,7 +564,9 @@ class SendFlow extends PureComponent { {...generateTestId(Platform, SEND_SCREEN_ID)} > - + void; - inputWidth: any; - confusableCollectionArray: any; - isFromAddressBook: any; - updateParentState: any; - onToSelectedAddressChange: any; -} From 6ea88d036598399251fc9846025c7f559faaee3b Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Wed, 26 Apr 2023 10:35:13 +0100 Subject: [PATCH 06/14] fix snapshot --- .../SendToAddressFrom.test.tsx.snap | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/app/components/Views/SendFlow/AddressFrom/__snapshots__/SendToAddressFrom.test.tsx.snap b/app/components/Views/SendFlow/AddressFrom/__snapshots__/SendToAddressFrom.test.tsx.snap index 28226eedb0c..eb973c3c61d 100644 --- a/app/components/Views/SendFlow/AddressFrom/__snapshots__/SendToAddressFrom.test.tsx.snap +++ b/app/components/Views/SendFlow/AddressFrom/__snapshots__/SendToAddressFrom.test.tsx.snap @@ -18,7 +18,24 @@ exports[`SendToAddressFrom should render correctly 1`] = ` > + > + + + + + + + @@ -27,7 +44,9 @@ exports[`SendToAddressFrom should render correctly 1`] = ` > + > + Account 1 + Date: Fri, 28 Apr 2023 10:06:40 +0100 Subject: [PATCH 07/14] resolved feedback --- ...ressFrom.test.tsx => AddressFrom.test.tsx} | 11 +++--- ...{SendToAddressFrom.tsx => AddressFrom.tsx} | 20 +++++----- ...ressFrom.types.ts => AddressFrom.types.ts} | 0 ...est.tsx.snap => AddressFrom.test.tsx.snap} | 0 .../Views/SendFlow/AddressFrom/index.ts | 2 +- ...oAddressTo.test.tsx => AddressTo.test.tsx} | 9 +++-- .../{SendToAddressTo.tsx => AddressTo.tsx} | 38 ++++++++++--------- ...oAddressTo.types.ts => AddressTo.types.ts} | 14 +++---- ....test.tsx.snap => AddressTo.test.tsx.snap} | 0 .../Views/SendFlow/AddressTo/index.ts | 2 +- app/components/Views/SendFlow/SendTo/index.js | 1 - ios/Podfile.lock | 4 +- 12 files changed, 53 insertions(+), 48 deletions(-) rename app/components/Views/SendFlow/AddressFrom/{SendToAddressFrom.test.tsx => AddressFrom.test.tsx} (90%) rename app/components/Views/SendFlow/AddressFrom/{SendToAddressFrom.tsx => AddressFrom.tsx} (94%) rename app/components/Views/SendFlow/AddressFrom/{SendToAddressFrom.types.ts => AddressFrom.types.ts} (100%) rename app/components/Views/SendFlow/AddressFrom/__snapshots__/{SendToAddressFrom.test.tsx.snap => AddressFrom.test.tsx.snap} (100%) rename app/components/Views/SendFlow/AddressTo/{SendToAddressTo.test.tsx => AddressTo.test.tsx} (98%) rename app/components/Views/SendFlow/AddressTo/{SendToAddressTo.tsx => AddressTo.tsx} (93%) rename app/components/Views/SendFlow/AddressTo/{SendToAddressTo.types.ts => AddressTo.types.ts} (100%) rename app/components/Views/SendFlow/AddressTo/__snapshots__/{SendToAddressTo.test.tsx.snap => AddressTo.test.tsx.snap} (100%) diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx similarity index 90% rename from app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx rename to app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx index dd3f7af7af7..7cf9cbbe863 100644 --- a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.test.tsx +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx @@ -1,11 +1,12 @@ -import React from 'react'; -import configureMockStore from 'redux-mock-store'; import { render } from 'enzyme'; -import SendToAddressFrom from '.'; +import React from 'react'; import { Provider } from 'react-redux'; +import configureMockStore from 'redux-mock-store'; + import Engine from '../../../../core/Engine'; +import SendToAddressFrom from './'; -Engine.init(); +Engine.init({}); jest.mock('@react-navigation/native', () => ({ useNavigation: () => ({ navigation: {}, @@ -51,7 +52,7 @@ describe('SendToAddressFrom', () => { it('should render correctly', () => { const wrapper = render( - + undefined} /> , ); expect(wrapper).toMatchSnapshot(); diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx b/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx similarity index 94% rename from app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx rename to app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx index 7225cb41af4..f08cbf4bb83 100644 --- a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.tsx +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx @@ -1,18 +1,20 @@ import React, { useEffect, useState } from 'react'; -import { AddressFrom } from '../../../UI/AddressInputs'; -import { useSelector, useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; + +import { hexToBN } from '@metamask/controller-utils'; import { useNavigation } from '@react-navigation/native'; + +import { setSelectedAsset } from '../../../../actions/transaction'; +import Routes from '../../../../constants/navigation/Routes'; import { - selectTicker, selectNetwork, + selectTicker, } from '../../../../selectors/networkController'; -import Routes from '../../../../constants/navigation/Routes'; -import { renderFromWei } from '../../../../util/number'; -import { getTicker, getEther } from '../../../../util/transactions'; import { doENSReverseLookup } from '../../../../util/ENSUtils'; -import { setSelectedAsset } from '../../../../actions/transaction'; -import { hexToBN } from '@metamask/controller-utils'; -import { STAddressFromProps } from './SendToAddressFrom.types'; +import { renderFromWei } from '../../../../util/number'; +import { getEther, getTicker } from '../../../../util/transactions'; +import { AddressFrom } from '../../../UI/AddressInputs'; +import { STAddressFromProps } from './AddressFrom.types'; const SendToAddressFrom = ({ fromAccountBalanceState }: STAddressFromProps) => { const navigation = useNavigation(); diff --git a/app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.types.ts b/app/components/Views/SendFlow/AddressFrom/AddressFrom.types.ts similarity index 100% rename from app/components/Views/SendFlow/AddressFrom/SendToAddressFrom.types.ts rename to app/components/Views/SendFlow/AddressFrom/AddressFrom.types.ts diff --git a/app/components/Views/SendFlow/AddressFrom/__snapshots__/SendToAddressFrom.test.tsx.snap b/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap similarity index 100% rename from app/components/Views/SendFlow/AddressFrom/__snapshots__/SendToAddressFrom.test.tsx.snap rename to app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap diff --git a/app/components/Views/SendFlow/AddressFrom/index.ts b/app/components/Views/SendFlow/AddressFrom/index.ts index 4b35fb0184f..b81c7b9cd14 100644 --- a/app/components/Views/SendFlow/AddressFrom/index.ts +++ b/app/components/Views/SendFlow/AddressFrom/index.ts @@ -1 +1 @@ -export { default } from './SendToAddressFrom'; +export { default } from './AddressFrom'; diff --git a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.test.tsx b/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx similarity index 98% rename from app/components/Views/SendFlow/AddressTo/SendToAddressTo.test.tsx rename to app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx index fe410d1f891..584ebfd27c5 100644 --- a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.test.tsx +++ b/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx @@ -1,11 +1,12 @@ -import React from 'react'; -import configureMockStore from 'redux-mock-store'; import { render } from 'enzyme'; -import SendToAddressTo from './'; +import React from 'react'; import { Provider } from 'react-redux'; +import configureMockStore from 'redux-mock-store'; + import Engine from '../../../../core/Engine'; +import SendToAddressTo from './'; -Engine.init(); +Engine.init({}); jest.mock('@react-navigation/native', () => ({ useNavigation: () => ({ navigation: {}, diff --git a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx b/app/components/Views/SendFlow/AddressTo/AddressTo.tsx similarity index 93% rename from app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx rename to app/components/Views/SendFlow/AddressTo/AddressTo.tsx index fc6daf02c04..91821cf730a 100644 --- a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.tsx +++ b/app/components/Views/SendFlow/AddressTo/AddressTo.tsx @@ -1,30 +1,32 @@ import React from 'react'; import { Alert } from 'react-native'; -import { AddressTo } from '../../../UI/AddressInputs'; +import { useDispatch, useSelector } from 'react-redux'; + import { useNavigation } from '@react-navigation/native'; -import { useSelector, useDispatch } from 'react-redux'; -import { createQRScannerNavDetails } from '../../QRScanner'; -import { handleNetworkSwitch } from '../../../../util/networks'; -import Routes from '../../../../constants/navigation/Routes'; -import { selectNetwork } from '../../../../selectors/networkController'; -import Engine from '../../../../core/Engine'; + import { strings } from '../../../../../locales/i18n'; -import { NetworkSwitchErrorType } from '../../../../constants/error'; import { showAlert } from '../../../../actions/alert'; -import { STAddressToProps } from './SendToAddressTo.types'; +import { NetworkSwitchErrorType } from '../../../../constants/error'; +import Routes from '../../../../constants/navigation/Routes'; +import Engine from '../../../../core/Engine'; +import { selectNetwork } from '../../../../selectors/networkController'; +import { handleNetworkSwitch } from '../../../../util/networks'; +import { AddressTo } from '../../../UI/AddressInputs'; +import { createQRScannerNavDetails } from '../../QRScanner'; +import { STAddressToProps } from './AddressTo.types'; const SendToAddressTo = ({ - inputRef, - highlighted, addressToReady, - toSelectedAddress, - toSelectedAddressName, - onSubmit, - inputWidth, confusableCollectionArray, + highlighted, + inputRef, + inputWidth, isFromAddressBook, - updateParentState, + onSubmit, onToSelectedAddressChange, + toSelectedAddress, + toSelectedAddressName, + updateParentState, }: STAddressToProps) => { const navigation = useNavigation(); const dispatch = useDispatch(); @@ -38,7 +40,7 @@ const SendToAddressTo = ({ const showAlertAction = (config: any) => dispatch(showAlert(config)); - const handleNetworkSwitched = (chain_id: string) => { + const onHandleNetworkSwitch = (chain_id: string) => { try { const { NetworkController, CurrencyRateController } = Engine.context; const networkSwitch = handleNetworkSwitch(chain_id, frequentRpcList, { @@ -74,7 +76,7 @@ const SendToAddressTo = ({ ...createQRScannerNavDetails({ onScanSuccess: (meta) => { if (meta.chain_id) { - handleNetworkSwitched(meta.chain_id); + onHandleNetworkSwitch(meta.chain_id); } if (meta.target_address) { onToSelectedAddressChange(meta.target_address); diff --git a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts b/app/components/Views/SendFlow/AddressTo/AddressTo.types.ts similarity index 100% rename from app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts rename to app/components/Views/SendFlow/AddressTo/AddressTo.types.ts index c87dbdc8eb1..83a34dd6d14 100644 --- a/app/components/Views/SendFlow/AddressTo/SendToAddressTo.types.ts +++ b/app/components/Views/SendFlow/AddressTo/AddressTo.types.ts @@ -1,13 +1,13 @@ export interface STAddressToProps { - inputRef: any; - highlighted: boolean; addressToReady: boolean; - toSelectedAddress: any; - toSelectedAddressName: any; - onSubmit: (address: string) => void; - inputWidth: any; confusableCollectionArray: any; + highlighted: boolean; + inputRef: any; + inputWidth: any; isFromAddressBook: any; - updateParentState: any; + onSubmit: (address: string) => void; onToSelectedAddressChange: any; + toSelectedAddress: any; + toSelectedAddressName: any; + updateParentState: any; } diff --git a/app/components/Views/SendFlow/AddressTo/__snapshots__/SendToAddressTo.test.tsx.snap b/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap similarity index 100% rename from app/components/Views/SendFlow/AddressTo/__snapshots__/SendToAddressTo.test.tsx.snap rename to app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap diff --git a/app/components/Views/SendFlow/AddressTo/index.ts b/app/components/Views/SendFlow/AddressTo/index.ts index 00524ff8226..73015feda7b 100644 --- a/app/components/Views/SendFlow/AddressTo/index.ts +++ b/app/components/Views/SendFlow/AddressTo/index.ts @@ -1 +1 @@ -export { default } from './SendToAddressTo'; +export { default } from './AddressTo'; diff --git a/app/components/Views/SendFlow/SendTo/index.js b/app/components/Views/SendFlow/SendTo/index.js index f7610a1f928..640839e9bb6 100644 --- a/app/components/Views/SendFlow/SendTo/index.js +++ b/app/components/Views/SendFlow/SendTo/index.js @@ -502,7 +502,6 @@ class SendFlow extends PureComponent { * then validation is not necessary since it was already validated */ if (addressName) { - // return this.setState({ toAccount, toSelectedAddressReady: true, diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 6d88d82ad81..46cbc0c63d6 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -777,7 +777,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: a7c83b31436843459a1961bfd74b96033dc77234 - Branch: 4ac024cb3c29b0ef628048694db3c4cfa679beb0 + Branch: 74cc856025984f691833c8fa332834ac38a0cf4e BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 @@ -874,4 +874,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 74e503a275b4ed097cb01c171027882e9cdc699d -COCOAPODS: 1.11.2 +COCOAPODS: 1.11.3 From d9daddc3878a3009d0d3c0f7874874b0a7124006 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Fri, 28 Apr 2023 20:56:37 +0100 Subject: [PATCH 08/14] renaming component names --- .../SendFlow/AddressFrom/AddressFrom.test.tsx | 4 +- .../SendFlow/AddressFrom/AddressFrom.tsx | 8 ++-- .../SendFlow/AddressFrom/AddressFrom.types.ts | 2 +- .../SendFlow/AddressTo/AddressTo.test.tsx | 6 +-- .../Views/SendFlow/AddressTo/AddressTo.tsx | 8 ++-- .../SendFlow/AddressTo/AddressTo.types.ts | 2 +- .../__snapshots__/AddressTo.test.tsx.snap | 46 ++++++++++++++++++- 7 files changed, 61 insertions(+), 15 deletions(-) diff --git a/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx index 7cf9cbbe863..e4698ca41e3 100644 --- a/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx @@ -4,7 +4,7 @@ import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; import Engine from '../../../../core/Engine'; -import SendToAddressFrom from './'; +import SendFlowAddressFrom from './'; Engine.init({}); jest.mock('@react-navigation/native', () => ({ @@ -52,7 +52,7 @@ describe('SendToAddressFrom', () => { it('should render correctly', () => { const wrapper = render( - undefined} /> + undefined} /> , ); expect(wrapper).toMatchSnapshot(); diff --git a/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx b/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx index f08cbf4bb83..ca526d1fcc1 100644 --- a/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx @@ -14,9 +14,11 @@ import { doENSReverseLookup } from '../../../../util/ENSUtils'; import { renderFromWei } from '../../../../util/number'; import { getEther, getTicker } from '../../../../util/transactions'; import { AddressFrom } from '../../../UI/AddressInputs'; -import { STAddressFromProps } from './AddressFrom.types'; +import { SFAddressFromProps } from './AddressFrom.types'; -const SendToAddressFrom = ({ fromAccountBalanceState }: STAddressFromProps) => { +const SendFlowAddressFrom = ({ + fromAccountBalanceState, +}: SFAddressFromProps) => { const navigation = useNavigation(); const identities = useSelector( (state: any) => @@ -103,4 +105,4 @@ const SendToAddressFrom = ({ fromAccountBalanceState }: STAddressFromProps) => { ); }; -export default SendToAddressFrom; +export default SendFlowAddressFrom; diff --git a/app/components/Views/SendFlow/AddressFrom/AddressFrom.types.ts b/app/components/Views/SendFlow/AddressFrom/AddressFrom.types.ts index 09a03302c45..2f05a877ae2 100644 --- a/app/components/Views/SendFlow/AddressFrom/AddressFrom.types.ts +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.types.ts @@ -1,3 +1,3 @@ -export interface STAddressFromProps { +export interface SFAddressFromProps { fromAccountBalanceState: (value: boolean) => void; } diff --git a/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx b/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx index 584ebfd27c5..d0a93e0cf29 100644 --- a/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx +++ b/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx @@ -4,7 +4,7 @@ import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; import Engine from '../../../../core/Engine'; -import SendToAddressTo from './'; +import SendFlowAddressTo from './'; Engine.init({}); jest.mock('@react-navigation/native', () => ({ @@ -51,11 +51,11 @@ jest.mock('react-redux', () => ({ .mockImplementation((callback) => callback(initialState)), })); -describe('SendToAddressTo', () => { +describe('SendFlowAddressTo', () => { it('should render correctly', () => { const wrapper = render( - { +}: SFAddressToProps) => { const navigation = useNavigation(); const dispatch = useDispatch(); @@ -112,4 +112,4 @@ const SendToAddressTo = ({ ); }; -export default SendToAddressTo; +export default SendFlowAddressTo; diff --git a/app/components/Views/SendFlow/AddressTo/AddressTo.types.ts b/app/components/Views/SendFlow/AddressTo/AddressTo.types.ts index 83a34dd6d14..aab56bd1fbe 100644 --- a/app/components/Views/SendFlow/AddressTo/AddressTo.types.ts +++ b/app/components/Views/SendFlow/AddressTo/AddressTo.types.ts @@ -1,4 +1,4 @@ -export interface STAddressToProps { +export interface SFAddressToProps { addressToReady: boolean; confusableCollectionArray: any; highlighted: boolean; diff --git a/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap b/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap index becd2ca61ea..d7cd57e0f16 100644 --- a/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap +++ b/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap @@ -1,6 +1,50 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SendToAddressTo should render correctly 1`] = ` +exports[`SendFlowAddressTo should render correctly 1`] = ` + + + + To: + + + + + + + + +  + + + + +`; + +exports[`SendFlowAddressTo should render correctly 1`] = ` From 3b64ce6b41c6808d5ebd47407375b82a99b50d40 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Fri, 28 Apr 2023 21:06:13 +0100 Subject: [PATCH 09/14] Update app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com> --- app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx index e4698ca41e3..d5e3e8517cf 100644 --- a/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx @@ -48,7 +48,7 @@ jest.mock('react-redux', () => ({ const mockStore = configureMockStore(); const store = mockStore(initialState); -describe('SendToAddressFrom', () => { +describe('SendFlowAddressFrom', () => { it('should render correctly', () => { const wrapper = render( From 51b6f8a7ff463839ac5ef5dc93639401e1e40942 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Fri, 28 Apr 2023 21:06:34 +0100 Subject: [PATCH 10/14] Update app/components/Views/SendFlow/SendTo/index.js Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com> --- app/components/Views/SendFlow/SendTo/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/Views/SendFlow/SendTo/index.js b/app/components/Views/SendFlow/SendTo/index.js index 640839e9bb6..3378d1c1e9b 100644 --- a/app/components/Views/SendFlow/SendTo/index.js +++ b/app/components/Views/SendFlow/SendTo/index.js @@ -74,8 +74,8 @@ import { } from '../../../../selectors/networkController'; import { isNetworkBuyNativeTokenSupported } from '../../../UI/FiatOnRampAggregator/utils'; import { getRampNetworks } from '../../../../reducers/fiatOrders'; -import SendToAddressFrom from '../AddressFrom'; -import SendToAddressTo from '../AddressTo'; +import SendFlowAddressFrom from '../AddressFrom'; +import SendFlowAddressTo from '../AddressTo'; const dummy = () => true; From dbe43caaffd90d86c705b80bda9db01a235d5351 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Fri, 28 Apr 2023 21:11:49 +0100 Subject: [PATCH 11/14] removed redudant snapshot --- .../AddressFrom/__snapshots__/AddressFrom.test.tsx.snap | 2 +- app/components/Views/SendFlow/SendTo/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap b/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap index eb973c3c61d..46105729c1d 100644 --- a/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap +++ b/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SendToAddressFrom should render correctly 1`] = ` +exports[`SendFlowAddressFrom should render correctly 1`] = ` diff --git a/app/components/Views/SendFlow/SendTo/index.js b/app/components/Views/SendFlow/SendTo/index.js index 3378d1c1e9b..9e8ccb8e92c 100644 --- a/app/components/Views/SendFlow/SendTo/index.js +++ b/app/components/Views/SendFlow/SendTo/index.js @@ -563,10 +563,10 @@ class SendFlow extends PureComponent { {...generateTestId(Platform, SEND_SCREEN_ID)} > - - Date: Tue, 2 May 2023 10:13:28 +0100 Subject: [PATCH 12/14] rebased to main --- app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx | 3 ++- app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx | 3 ++- app/components/Views/SendFlow/SendTo/index.js | 1 - ios/Podfile.lock | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx index d5e3e8517cf..ff73aac0ef1 100644 --- a/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.test.tsx @@ -1,8 +1,9 @@ -import { render } from 'enzyme'; import React from 'react'; import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; +import { render } from '@testing-library/react-native'; + import Engine from '../../../../core/Engine'; import SendFlowAddressFrom from './'; diff --git a/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx b/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx index d0a93e0cf29..c50db44e732 100644 --- a/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx +++ b/app/components/Views/SendFlow/AddressTo/AddressTo.test.tsx @@ -1,8 +1,9 @@ -import { render } from 'enzyme'; import React from 'react'; import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; +import { render } from '@testing-library/react-native'; + import Engine from '../../../../core/Engine'; import SendFlowAddressTo from './'; diff --git a/app/components/Views/SendFlow/SendTo/index.js b/app/components/Views/SendFlow/SendTo/index.js index 9e8ccb8e92c..8d1a76ee473 100644 --- a/app/components/Views/SendFlow/SendTo/index.js +++ b/app/components/Views/SendFlow/SendTo/index.js @@ -48,7 +48,6 @@ import { ADD_ADDRESS_MODAL_CONTAINER_ID, ADDRESS_BOOK_NEXT_BUTTON, NO_ETH_MESSAGE, - SEND_SCREEN, ADDRESS_ERROR, ADD_ADDRESS_BUTTON_ID, } from '../../../../constants/test-ids'; diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 46cbc0c63d6..ee1fd13bff4 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -874,4 +874,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 74e503a275b4ed097cb01c171027882e9cdc699d -COCOAPODS: 1.11.3 +COCOAPODS: 1.11.2 From d2526c28049ba25537d9ed3b5f1136f2e0e015f7 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Tue, 2 May 2023 10:36:48 +0100 Subject: [PATCH 13/14] snapshot update --- .../__snapshots__/AddressFrom.test.tsx.snap | 340 +++++++++++++++--- .../__snapshots__/AddressTo.test.tsx.snap | 222 ++++++++---- 2 files changed, 440 insertions(+), 122 deletions(-) diff --git a/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap b/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap index 46105729c1d..39eaa4943df 100644 --- a/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap +++ b/app/components/Views/SendFlow/AddressFrom/__snapshots__/AddressFrom.test.tsx.snap @@ -1,72 +1,316 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SendFlowAddressFrom should render correctly 1`] = ` - - - From: - - - + + - - - - - - - - - + + + - - Account 1 - - - + + Balance: - - - + + - -  - - - - - + + + + + `; diff --git a/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap b/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap index d7cd57e0f16..2af301d8711 100644 --- a/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap +++ b/app/components/Views/SendFlow/AddressTo/__snapshots__/AddressTo.test.tsx.snap @@ -1,89 +1,163 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SendFlowAddressTo should render correctly 1`] = ` - - - To: - - - + + - - - - + -  - - - - -`; - -exports[`SendFlowAddressTo should render correctly 1`] = ` - - - - To: - - - - - - - - -  - - - - + + + + `; From 5a5ba35adcf124f0e1bf677dc6ec5d13bf243ae3 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Tue, 2 May 2023 10:39:53 +0100 Subject: [PATCH 14/14] removed podfile change --- ios/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index ee1fd13bff4..6d88d82ad81 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -777,7 +777,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: a7c83b31436843459a1961bfd74b96033dc77234 - Branch: 74cc856025984f691833c8fa332834ac38a0cf4e + Branch: 4ac024cb3c29b0ef628048694db3c4cfa679beb0 BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662