React Native WalletConnectModal Example

react-native-walletconnectmodal.js

/*
*   Resources
*   Medium: https://medium.com/walletconnect/how-to-build-a-react-native-dapp-with-walletconnect-28f08f332ed7
*   YouTube: https://www.youtube.com/watch?v=mGtEPQfqMV8
*   Docs: https://docs.walletconnect.com/2.0/advanced/walletconnectmodal/about?platform=react-native
*/ 

import { WalletConnectModal, useWalletConnectModal } from "@walletconnect/modal-react-native"
import { StyleSheet, Text, View, TouchableHighlight } from "react-native"
const projectId = 'my-project-id' // see https://cloud.walletconnect.com/

const providerMetadata = {
  name: 'React Native Web3',
  description: 'Cool React Native App',
  url: 'https://archiveforever.xyz',
  icons: ['https://f4shnljo4g7olt4wifnpdfz6752po37hr3waoaxakgpxqw64jojq.arweave.net/LyR2rS7hvuXPlkFa8Zc-_3T3b-eO7AcC4FGfeFvcS5M'],
  redirect: {
    native: 'YOUR_APP_SCHEME://',
    universal: 'YOUR_APP_UNIVERSAL_LINK.com'
  }
}

export default function App() {
  const { open, isConnected, address, provider } = useWalletConnectModal()
  const handleButtonPress = async () => {
    if (isConnected) {
      return provider?.disconnect()
    }
    return open()
  }
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>My React Native App</Text>
      <Text>{isConnected ? address : "Not Connected"}</Text>
      <TouchableHighlight underlayColor={'#3392ff'} onPress={handleButtonPress} style={styles.pressableMargin}>
        <Text
          style={styles.buttonText}
        >{isConnected ? "DISCONNECT" : "CONNECT"}</Text>
      </TouchableHighlight>

      <WalletConnectModal
        projectId={projectId}
        providerMetadata={providerMetadata}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  heading: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 16,
  },
  pressableMargin: {
    marginTop: 16,
    backgroundColor: '#0378ff',
    paddingHorizontal: 50,
    paddingVertical: 13,
    borderRadius: 8,
    shadowColor: '#171717',
    shadowOffset: {width: 2, height: 2},
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold'
  }
})