Skip to content

Instantly share code, notes, and snippets.

@dabit3

dabit3/react-native-walletconnectmodal.js

Last active October 6, 2023 03:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dabit3/8ee40e57a6b6df16e584f0806b970a88 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dabit3/8ee40e57a6b6df16e584f0806b970a88 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dabit3 revised this gist Aug 17, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-native-walletconnectmodal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /*
    * Tutorial and docs:
    * 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
  2. dabit3 revised this gist Aug 17, 2023. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions react-native-walletconnectmodal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,10 @@
    /*
    * Tutorial and docs:
    * 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/
  3. dabit3 revised this gist Aug 17, 2023. 1 changed file with 7 additions and 8 deletions.
    15 changes: 7 additions & 8 deletions react-native-walletconnectmodal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,6 @@
    import { WalletConnectModal, useWalletConnectModal } from "@walletconnect/modal-react-native";
    import { StyleSheet, Text, View, Pressable } from "react-native";

    const projectId = 'your-project-id'
    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',
    @@ -15,7 +14,7 @@ const providerMetadata = {
    }

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

    <WalletConnectModal
    projectId={projectId}
    @@ -67,4 +66,4 @@ const styles = StyleSheet.create({
    color: 'white',
    fontWeight: 'bold'
    }
    });
    })
  4. dabit3 created this gist Aug 17, 2023.
    70 changes: 70 additions & 0 deletions react-native-walletconnectmodal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    import { WalletConnectModal, useWalletConnectModal } from "@walletconnect/modal-react-native";
    import { StyleSheet, Text, View, Pressable } from "react-native";

    const projectId = 'your-project-id'

    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>
    <Pressable onPress={handleButtonPress} style={styles.pressableMargin}>
    <Text
    style={styles.buttonText}
    >{isConnected ? "DISCONNECT" : "CONNECT"}</Text>
    </Pressable>

    <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'
    }
    });