@celo/wallet-walletconnect create react app demo

App.js

import './App.css';
import React from "react";
import ReactDOM from "react-dom";
import { WalletConnectWallet } from '@celo/wallet-walletconnect'
import QRCode from 'qrcode.react'

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      wallet: null,
      uri: ""
    }
  }

  componentDidMount(){
    this.connect()
  }

  async connect() {

    const wallet = new WalletConnectWallet({
      connect: {
        metadata: {
          name: 'The name of your awesome DApp',
          description: 'Your DApp description',
          url: 'https://example.com',
          icons: ['https://example.com/favicon.ico'],
        },
      },
    })
  
    const uri = await wallet.getUri()

    this.setState({
      uri: uri
    })

    console.log(uri)

    wallet.init()
    // display this uri as a QR code to the user
  }

  render(){
    return (
      <div className="App">
        <header className="App-header">
          <div>
            <QRCode value={this.state.uri} size="200"/>
          </div>
        </header>
      </div>
    );
  }
}

export default App;