Skip to content

Instantly share code, notes, and snippets.

@dabit3
Last active October 6, 2023 03:02
Show Gist options
  • Save dabit3/8ee40e57a6b6df16e584f0806b970a88 to your computer and use it in GitHub Desktop.
Save dabit3/8ee40e57a6b6df16e584f0806b970a88 to your computer and use it in GitHub Desktop.
React Native WalletConnectModal Example
/*
* 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