Hello World React Native Tutorial

export default function ConnectButton({ onConnect }: ConnectButtonProps) {
  const onPress = async () => {
    await transact(async (wallet) => {
      // Transact starts a session with the wallet app during which our app
      // can send actions (like `authorize`) to the wallet.
      const authResult: AuthorizationResult = await wallet.authorize({
        cluster: "devnet",
        identity: APP_IDENTITY,
      });
      const { accounts, auth_token } = authResult;

      // After authorizing, store the authResult with the onConnect callback we pass into the button
      onConnect({
        address: accounts[0].address,
        label: accounts[0].label,
        authToken: auth_token,
        publicKey: getPublicKeyFromAddress(accounts[0].address),
      });
    });
  };
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>Connect Wallet</Text>
    </TouchableOpacity>
  );
}

export default function DisconnectButton({
  onDisconnect,
  authorization,
}: DisconnectButtonProps) {
  const onPress = async () => {
    await transact(async (wallet) => {
      // The deauthorize request will invalidate the authToken.
      await wallet.deauthorize({
        auth_token: authorization.authToken,
      });
      // Set stored authorization state to null through onDisconnect callback
      onDisconnect();
    });
  };
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>Disconnect Wallet</Text>
    </TouchableOpacity>
  );
}

export default function AccountInfoSection({
  authorization,
  balance,
}: AccountInfoProps) {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.walletBalance}>
          {balance !== null
            ? `Balance: ${convertLamportsToSOL(balance)} SOL`
            : 'Loading balance...'}
        </Text>
        <Text style={styles.walletName}>
          {authorization.label ?? 'Wallet name not found'}
        </Text>
        <Text style={styles.walletNameSubtitle}>{authorization.address}</Text>
      </View>
    </View>
  );
}

export default function RequestAirdropButton({
  authorization,
  onAirdropComplete,
}: AccountInfoProps) {
  const { connection } = useConnection();

  const requestAirdrop = async () => {
    // SOL/Lamports will be airdropped to the wallet's address (public key).
    // Use Promise.all to also fetch the latest block hash in parallel.
    const [signature, latestBlockhash] = await Promise.all([
      connection.requestAirdrop(authorization.publicKey, LAMPORTS_PER_AIRDROP),
      connection.getLatestBlockhash(),
    ]);

    // Confirm that the airdrop was successful.
    return await connection.confirmTransaction({
      signature: signature,
      ...latestBlockhash,
    });
  };

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={async () => {
        const result = await requestAirdrop();
        const error = result?.value?.err;
        if (error) {
          console.log(
            "Failed to fund account: " +
              (error instanceof Error ? error.message : error),
          );
        } else {
          // Fetch and update balance if airdrop is successful
          onAirdropComplete(authorization);
        }
      }}
    >
      <Text style={styles.buttonText}>Request airdrop</Text>
    </TouchableOpacity>
  );
}