@reown/appkit-react-native 0.0.0-canary-20251008180350

package/src/views/w3m-wallet-send-view/index.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  ConnectionsController,
+  CoreHelperUtil,
+  RouterController,
+  SendController
+} from '@reown/appkit-core-react-native';
+import { Button, FlexView, IconBox, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { SendInputToken } from '../../partials/w3m-send-input-token';
+import { useKeyboard } from '../../hooks/useKeyboard';
+import { SendInputAddress } from '../../partials/w3m-send-input-address';
+import styles from './styles';
+
+export function WalletSendView() {
+  const { padding, maxHeight } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const [isBalanceLoading, setBalanceLoading] = useState(false);
+  const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
+    SendController.state
+  );
+
+  const onSendPress = () => {
+    RouterController.push('WalletSendPreview');
+  };
+
+  const getActionText = () => {
+    if (!SendController.state.token) {
+      return 'Select token';
+    }
+
+    if (
+      SendController.state.sendTokenAmount &&
+      SendController.state.token?.quantity &&
+      SendController.state.sendTokenAmount > Number(SendController.state.token.quantity.numeric)
+    ) {
+      return 'Insufficient funds';
+    }
+
+    if (!SendController.state.sendTokenAmount) {
+      return 'Add amount';
+    }
+
+    if (SendController.state.sendTokenAmount && SendController.state.token?.price) {
+      const value = SendController.state.sendTokenAmount * SendController.state.token.price;
+      if (!value) {
+        return 'Incorrect value';
+      }
+    }
+
+    if (
+      SendController.state.receiverAddress &&
+      !CoreHelperUtil.isAddress(
+        SendController.state.receiverAddress,
+        ConnectionsController.state.activeNamespace
+      )
+    ) {
+      return 'Invalid address';
+    }
+
+    if (!SendController.state.receiverAddress) {
+      return 'Add address';
+    }
+
+    return 'Preview send';
+  };
+
+  useEffect(() => {
+    async function fetchBalance() {
+      setBalanceLoading(true);
+      await ConnectionsController.fetchBalance();
+      setBalanceLoading(false);
+    }
+
+    fetchBalance();
+  }, []);
+
+  const actionText = getActionText();
+
+  return (
+    <ScrollView
+      style={[{ paddingHorizontal: padding, maxHeight }]}
+      contentContainerStyle={keyboardShown ? { paddingBottom: keyboardHeight } : undefined}
+      bounces={false}
+      keyboardShouldPersistTaps="always"
+    >
+      <FlexView padding="l" alignItems="center" justifyContent="center">
+        <SendInputToken
+          token={token}
+          sendTokenAmount={sendTokenAmount}
+          style={styles.tokenInput}
+          onTokenPress={() => RouterController.push('WalletSendSelectToken')}
+          loading={isBalanceLoading}
+        />
+        <FlexView alignItems="center" justifyContent="center" style={styles.addressContainer}>
+          <SendInputAddress value={receiverProfileName || receiverAddress} />
+          <IconBox
+            icon="arrowBottom"
+            size="lg"
+            iconColor="fg-275"
+            background
+            backgroundColor="bg-175"
+            border
+            borderColor="bg-100"
+            borderSize={10}
+            style={styles.arrowIcon}
+          />
+        </FlexView>
+        <Button
+          style={styles.sendButton}
+          onPress={onSendPress}
+          disabled={!actionText.includes('Preview send')}
+          loading={loading || isBalanceLoading}
+        >
+          {actionText}
+        </Button>
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-wallet-send-view/styles.ts

@@ -0,0 +1,21 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  sendButton: {
+    width: '100%',
+    marginTop: Spacing.xl,
+    borderRadius: BorderRadius.xs
+  },
+  tokenInput: {
+    marginBottom: Spacing.xs
+  },
+  arrowIcon: {
+    position: 'absolute',
+    top: -30,
+    borderRadius: BorderRadius.s
+  },
+  addressContainer: {
+    width: '100%'
+  }
+});

package/src/views/w3m-what-is-a-network-view/index.tsx

@@ -0,0 +1,48 @@
+import { Linking, ScrollView } from 'react-native';
+import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import styles from './styles';
+
+export function WhatIsANetworkView() {
+  const { padding } = useCustomDimensions();
+  const onLearnMorePress = () => {
+    Linking.openURL('https://ethereum.org/en/developers/docs/networks/');
+  };
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" padding={['l', '4xl', 'm', '4xl']}>
+        <FlexView flexDirection="row" padding={['0', '0', 'xs', '0']}>
+          <Visual name="network" />
+          <Visual name="layers" style={styles.visual} />
+          <Visual name="system" />
+        </FlexView>
+        <Text variant="paragraph-500" style={styles.text}>
+          The system’s nuts and bolts
+        </Text>
+        <Text variant="small-500" color="fg-200" center>
+          A network is what brings the blockchain to life, as this technical infrastructure allows
+          apps to access the ledger and smart contract services.
+        </Text>
+        <FlexView flexDirection="row" padding={['3xl', '0', 'xs', '0']}>
+          <Visual name="noun" />
+          <Visual name="defiAlt" style={styles.visual} />
+          <Visual name="dao" />
+        </FlexView>
+        <Text variant="paragraph-500" style={styles.text}>
+          Designed for different uses
+        </Text>
+        <Text variant="small-500" color="fg-200" center>
+          Each network is designed differently, and may therefore suit certain apps and experiences.
+        </Text>
+        <Button
+          size="sm"
+          iconRight="externalLink"
+          style={styles.learnButton}
+          onPress={onLearnMorePress}
+        >
+          Learn more
+        </Button>
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-what-is-a-network-view/styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  learnButton: {
+    marginTop: Spacing.xl
+  },
+  visual: {
+    marginHorizontal: Spacing.s
+  },
+  text: {
+    marginVertical: Spacing.xs
+  }
+});

package/src/views/w3m-what-is-a-wallet-view/index.tsx

@@ -0,0 +1,67 @@
+import { ScrollView } from 'react-native';
+import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { EventsController, RouterController } from '@reown/appkit-core-react-native';
+import styles from './styles';
+
+export function WhatIsAWalletView() {
+  const { padding } = useCustomDimensions();
+
+  const onGetWalletPress = () => {
+    RouterController.push('GetWallet');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_GET_WALLET_HELP' });
+  };
+
+  return (
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      testID="what-is-a-wallet-view"
+    >
+      <FlexView alignItems="center" padding={['xs', '4xl', 's', '4xl']}>
+        <FlexView flexDirection="row" padding={['0', '0', 's', '0']}>
+          <Visual name="login" />
+          <Visual name="profile" style={styles.visual} />
+          <Visual name="lock" />
+        </FlexView>
+        <Text variant="paragraph-500" style={styles.text}>
+          Your web3 account
+        </Text>
+        <Text variant="small-500" color="fg-200" center>
+          Create a wallet with your email or by choosing a wallet provider.
+        </Text>
+        <FlexView flexDirection="row" padding={['xl', '0', 's', '0']}>
+          <Visual name="defi" />
+          <Visual name="nft" style={styles.visual} />
+          <Visual name="eth" />
+        </FlexView>
+        <Text variant="paragraph-500" style={styles.text}>
+          The home for your digital assets
+        </Text>
+        <Text variant="small-500" color="fg-200" center>
+          Store, send, and receive digital assets like crypto and NFTs.
+        </Text>
+        <FlexView flexDirection="row" padding={['xl', '0', 's', '0']}>
+          <Visual name="browser" />
+          <Visual name="noun" style={styles.visual} />
+          <Visual name="dao" />
+        </FlexView>
+        <Text variant="paragraph-500" style={styles.text}>
+          Your gateway to web3 apps
+        </Text>
+        <Text variant="small-500" color="fg-200" center>
+          Connect your wallet to start exploring DeFi, DAOs, and much more.
+        </Text>
+        <Button
+          size="sm"
+          iconLeft="walletSmall"
+          style={styles.getWalletButton}
+          onPress={onGetWalletPress}
+          testID="get-a-wallet-button"
+        >
+          Get a wallet
+        </Button>
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-what-is-a-wallet-view/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  getWalletButton: {
+    marginTop: Spacing.xl,
+    marginBottom: Spacing.m
+  },
+  visual: {
+    marginHorizontal: Spacing.s
+  },
+  text: {
+    marginVertical: Spacing.xs
+  }
+});