react-native-connect-embed/App.tsx at main · tone-711/react-native-connect-embed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import {
  Box,
  ConnectEmbed,
  ConnectWallet,
  embeddedWallet,
  localWallet,
  metamaskWallet,
  rainbowWallet,
  Text,
  ThirdwebProvider,
  trustWallet,
  useAddress,
  useContract,
  walletConnect,
  smartWallet,
} from '@thirdweb-dev/react-native';
import React from 'react';
import {TW_CLIENT_ID, TW_WALLET_FACTORY, SEVEN_COIN} from '@env';
import {BinanceTestnet} from '@thirdweb-dev/chains';

const App = () => {
  return (
    <ThirdwebProvider
      activeChain={BinanceTestnet}
      clientId={TW_CLIENT_ID}
      supportedWallets={[
        // metamaskWallet({
        //   recommended: true,
        // }),
        // rainbowWallet(),
        // walletConnect({
        //   recommended: true,
        // }),
        smartWallet(
          embeddedWallet({
            auth: {
              // you need to enable EmbeddedWallets under your API Key in your thirdweb dashboard:
              // https://thirdweb.com/dashboard/settings/api-keys
              options: ['email', 'google'],
              // you need to add this deeplink in your allowed `Redirect URIs` under your API Key in your thirdweb dashboard:
              // https://thirdweb.com/dashboard/settings/api-keys
              redirectUrl: 'rnstarter://',
            },
          }),
          {
            factoryAddress: TW_WALLET_FACTORY,
            gasless: true,
          },
        ),
        // embeddedWallet({
        //   auth: {
        //     // you need to enable EmbeddedWallets under your API Key in your thirdweb dashboard:
        //     // https://thirdweb.com/dashboard/settings/api-keys
        //     options: ['email', 'google'],
        //     // you need to add this deeplink in your allowed `Redirect URIs` under your API Key in your thirdweb dashboard:
        //     // https://thirdweb.com/dashboard/settings/api-keys
        //     redirectUrl: 'rnstarter://',
        //   },
        // }),
        // trustWallet(),
        // localWallet(),
      ]}>
      <AppInner />
    </ThirdwebProvider>
  );
};

const AppInner = () => {
  const address = useAddress();

  return (
    <Box
      height="100%"
      justifyContent="center"
      paddingHorizontal="xmd"
      backgroundColor="background">
      {address ? (
        <Box gap="md">
          <Text textAlign="center">Welcome!</Text>
          <ConnectWallet
            supportedTokens={{
              [BinanceTestnet.chainId]: [
                {
                  address: SEVEN_COIN, // token contract address
                  name: 'SevenCoin',
                  symbol: '7C',
                  icon: 'https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508',
                },
              ],
            }}
            displayBalanceToken={{
              [BinanceTestnet.chainId]: SEVEN_COIN, // show SEVENCOIN token balance when connected to Base mainnet
            }}
          />
        </Box>
      ) : (
        <Box gap="md">
          <Text textAlign="center">Welcome!</Text>
          <ConnectEmbed modalTitle="" modalTitleIconUrl="" />
        </Box>
      )}
    </Box>
  );
};

export default App;