Last active
October 6, 2023 03:02
-
-
Save dabit3/8ee40e57a6b6df16e584f0806b970a88 to your computer and use it in GitHub Desktop.
React Native WalletConnectModal Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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' | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment