How to add transactions to your React Native Wallet App

export const Edit: React.FunctionComponent<Props> = ({
  isLoading,
  currencyName,
  estimatedGasPrice,
  errorMessage,
  transactionAmount,
  setTransactionAmount,
  transactionToAddress,
  addressErrorMessage,
  setTransactionToAddress,
  setVisible,
  onContinue,
}) => (
  <>
    <View>
      <Header title={`Send ${currencyName}`} type="secondary" />
 
      <Text style={styles.description}>
        Send a selected amount to the entered address. Make sure you typed the address correctly, we can not restore the
        ammount after a wrongly addressed transaction!
      </Text>
    </View>
 
    <View style={styles.sectionContainer}>
      <Input
        placeholder="Enter the address"
        value={transactionToAddress}
        onChange={setTransactionToAddress}
        errorMessage={addressErrorMessage ? addressErrorMessage.toString() : undefined}
        autoFocus
      />
      <Input
        placeholder="Enter the amount"
        keyboardType="numeric"
        value={transactionAmount}
        onChange={setTransactionAmount}
        postfix={currencyName}
        errorMessage={errorMessage ? errorMessage.toString() : undefined}
      />
      {estimatedGasPrice ? (
        <View style={styles.estimatedGasContainer}>
          <Text style={styles.estimatedGas}>{`Estimated gas fee: ${estimatedGasPrice} ${currencyName}`}</Text>
        </View>
      ) : null}
    </View>
    <View style={styles.sectionContainer}>
      <Button
        isLoading={isLoading}
        disabled={!transactionToAddress || !transactionAmount || !!errorMessage || !!addressErrorMessage}
        onPress={onContinue}
      >
        Review
      </Button>
      <Button type="tertiary" onPress={() => setVisible(false)}>
        Cancel
      </Button>
    </View>
  </>
);

export const Review: React.FunctionComponent<Props> = ({
  isLoading,
  currencyName,
  transactionFromAddress,
  transactionToAddress,
  estimatedGasPrice,
  transactionAmount,
  setVisible,
  onContinue,
  onBack,
}) => (
  <>
    <View>
      <Header title="Review the transaction" type="secondary" onBack={onBack} />
      <Text style={styles.description}>
        Send a selected amount to the entered address. Make sure you typed the address correctly, we can not restore the
        ammount after a wrongly addressed transaction!
      </Text>
    </View>
 
    <View style={[styles.sectionContainer, styles.transactionContainer]}>
      <View>
        <Text style={styles.label}>Sending transaction from</Text>
        <Text style={styles.value}>{transactionFromAddress}</Text>
      </View>
      <View>
        <Text style={styles.label}>Sending transaction to</Text>
        <Text style={styles.value}>{transactionToAddress}</Text>
      </View>
      <View>
        <Text style={styles.label}>Transaction amount</Text>
        <Text style={styles.value}>{`${transactionAmount} ${currencyName}`}</Text>
      </View>
      <View>
        <Text style={styles.label}>Estimated gas fee</Text>
        <Text style={styles.value}>{`${estimatedGasPrice} ${currencyName}` ?? "N/A"}</Text>
      </View>
    </View>
 
    <View style={styles.sectionContainer}>
      <Button onPress={onContinue} isLoading={isLoading}>
        Send
      </Button>
      <Button disabled={isLoading} type="tertiary" onPress={() => setVisible(false)}>
        Cancel
      </Button>
    </View>
  </>
);

export const TransactionSheet: React.FunctionComponent<Props> = ({
  account,
  currencyKey,
  currencyName,
  isVisible,
  setVisible,
}) => {
  const { lib } = useConfig(currencyKey);
  const [isReviewStep, setReviewStep] = useState(false);
 
  const {
    isLoading,
    errorMessage,
    estimatedGasPrice,
    transactionAmount,
    setTransactionAmount,
    transactionToAddress,
    addressErrorMessage,
    setTransactionToAddress,
    sendTransaction,
  } = useTransaction({
    account,
    web3Instance: lib,
  });
 
  const onReview = () => {
    if (transactionToAddress && transactionAmount && !errorMessage && !addressErrorMessage) {
      setReviewStep(true);
    }
  };
 
  const onSendTransaction = async () => {
    await sendTransaction();
    setVisible(false);
  };
 
  useEffect(() => {
    if (!isVisible) {
      // cleanup
      setTransactionAmount("");
      setTransactionToAddress("");
      setReviewStep(false);
    }
 
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isVisible]);
 
  if (!account) {
    return null;
  }
 
  return (
    <ActionSheet isVisible={isVisible} setVisible={setVisible}>
      {!isReviewStep ? (
        <Edit
          isLoading={isLoading}
          currencyName={currencyName}
          errorMessage={errorMessage}
          estimatedGasPrice={estimatedGasPrice}
          transactionAmount={transactionAmount}
          addressErrorMessage={addressErrorMessage}
          setTransactionAmount={setTransactionAmount}
          transactionToAddress={transactionToAddress}
          setTransactionToAddress={setTransactionToAddress}
          setVisible={setVisible}
          onContinue={onReview}
        />
      ) : (
        <Review
          isLoading={isLoading}
          currencyName={currencyName}
          transactionFromAddress={account.address}
          estimatedGasPrice={estimatedGasPrice}
          transactionToAddress={transactionToAddress}
          transactionAmount={transactionAmount}
          setVisible={setVisible}
          onContinue={onSendTransaction}
          onBack={() => setReviewStep(false)}
        />
      )}
    </ActionSheet>
  );
};

const estimateGasPrice = async (address: string, amount: string): Promise<string> => {
  const gasPriceText = await web3Instance.eth.getGasPrice();
  const gasPrice = convertStringToNumSafely(gasPriceText);
  const amountValue = web3Instance.utils.toWei(amount, "ether");
  const estimatedGas = await web3Instance.eth.estimateGas({
    from: address,
    value: amountValue,
  });
 
  return web3Instance.utils.fromWei(String(gasPrice * estimatedGas), "ether");
};
 
const isValidAddress = (address: string) => web3Instance.utils.isAddress(address);
 
const sendTransaction = async (props: TransactionProps): Promise<TransactionReceipt | null> => {
  const nonce = await web3Instance.eth.getTransactionCount(props.addressFrom, "latest");
  const valueToWei = web3Instance.utils.toWei(props.amount, "ether");
 
  const gasPrice = await web3Instance.eth.getGasPrice();
 
  const estimatedGas = await web3Instance.eth.estimateGas({
    from: props.addressFrom,
    value: valueToWei,
  });
 
  const rawTransaction: TransactionConfig = {
    from: props.addressFrom,
    to: props.addressTo,
    value: valueToWei,
    nonce,
    gasPrice,
    gas: estimatedGas,
  };
 
  const signedTransaction = await web3Instance.eth.accounts.signTransaction(rawTransaction, props.privateKey);
 
  if (!signedTransaction.rawTransaction) {
    throw new Error("Transaction signature failed!");
  }
 
  return web3Instance.eth.sendSignedTransaction(signedTransaction.rawTransaction);
};

export const useTransaction: UseTransaction = ({ account, web3Instance }) => {
  const { isLoading, withLoading } = useLoading();
  const [transactionToAddress, setTransactionToAddress] = useState<string>("");
  const [transactionAmount, setTransactionAmount] = useState<string>("");
  const [estimatedGasPrice, setEstimatedGasPrice] = useState<string | null>(null);
  const [errorMessage, setErrorMessage] = useState<TransactionsErrorMessages | null>(null);
 
  const debouncedTransactionAmount = useDebounce(transactionAmount, 500);
  const debouncedTransactionToAddress = useDebounce(transactionToAddress, 500);
 
  const addressErrorMessage =
    !web3Instance || !debouncedTransactionToAddress || web3Instance.isValidAddress(debouncedTransactionToAddress)
      ? null
      : TransactionsErrorMessages.INVALID_RECEIVER_ADDRESS;
 
  const estimateGasPrice = (amount: string): Promise<string | null> =>
    withLoading(async () => {
      try {
        if (account && web3Instance && parseFloat(amount)) {
          const price = await web3Instance.estimateGasPrice(account.address, amount);
          return price;
        }
        return null;
      } catch (error) {
        const message = (error as Error).message;
        if (message.includes("insufficient funds")) {
          setErrorMessage(TransactionsErrorMessages.INSUFFICIENT_FUND);
        }
        return null;
      }
    });
 
  const _setTransactionAmount = (value: string) => {
    setErrorMessage(null);
    setTransactionAmount(value);
  };
 
  const sendTransaction = () =>
    withLoading(async () => {
      try {
        if (!web3Instance || !account) {
          throw new Error("Internal error, the transaction cannot be fulfilled!");
        }
        const res = await web3Instance?.sendTransaction({
          addressFrom: account.address,
          addressTo: debouncedTransactionToAddress,
          amount: debouncedTransactionAmount,
          privateKey: account.privateKey,
        });
 
        return res;
      } catch (error) {
        return null;
      }
    });
 
  useEffect(() => {
    if (web3Instance) {
      estimateGasPrice(debouncedTransactionAmount).then(setEstimatedGasPrice);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedTransactionAmount]);
 
  return {
    isLoading,
    errorMessage,
    addressErrorMessage,
    estimatedGasPrice,
    transactionAmount,
    setTransactionAmount: _setTransactionAmount,
    transactionToAddress,
    setTransactionToAddress,
    sendTransaction,
  };
};

export const HomeScreen: React.FunctionComponent<Props> = ({}) => {
  ...
  const [isSendOpen, setSendOpen] = useState(false);
 
  const _setActiveCurrency = (active: number) => {
    setSendOpen(false);
    setSelectedIndex(active);
  };
 
  ...
 
  return (
    <SafeArea>
      <View style={styles.container}>
        <View style={styles.content}>
          {isLoading ? (
            <ActivityIndicator size={'small'} color={BLUE} />
          ) : (
            <>
              <Pager onPageSelected={_setActiveCurrency}>
                {data.map(currencyData => (
                  <CurrencyCard
                    key={currencyData.name}
                    name={currencyData.name}
                    balance={currencyData.balance}
                    postfix={currencyData.postfix}
                    onReceive={() => ({})}
                    onSend={() => setSendOpen(true)}
                  />
                ))}
              </Pager>
            </>
          )}
        </View>
      </View>
 
      <SendCurrencySheet
        account={data[selectedIndex].account}
        currencyName={data[selectedIndex].postfix}
        currencyKey={data[selectedIndex].name}
        isVisible={isSendOpen}
        setVisible={setSendOpen}
      />
    </SafeArea>
  );
};