WalletConnect Modal to Reown AppKit Core

// Remove the code lines below the comment that says "Remove the code line below"
// Add the code lines in green

import { UniversalProvider } from '@walletconnect/universal-provider'

// Remove the code line below
import { WalletConnectModal } from '@walletconnect/modal'

// Add the code lines below
import { mainnet, solana } from '@reown/appkit/networks'
import { createAppKit } from '@reown/appkit/core'

const provider = await UniversalProvider.init({
  projectId: 'YOUR_PROJECT_ID',
  metadata: {
    name: 'My Website',
    description: 'My Website Description',
    url: 'https://mywebsite.com', // origin must match your domain & subdomain
    icons: ['https://avatars.githubusercontent.com/u/37784886']
  },
})

// Remove the code lines below
const modal = new WalletConnectModal({
  projectId: 'YOUR_PROJECT_ID',
  chains: ['eip155:1', 'solana:mainnet']
})

// listen to display_uri event and feed modal with uri
provider.on('display_uri', (uri: string) => {
  modal.openModal({ uri })
})

// Add the code lines below
const modal = createAppKit({
  projectId: 'YOUR_PROJECT_ID',
  networks: [mainnet, solana],
  universalProvider: provider,
  manualWCControl: true
})
// A spinner will be showing until it's connected.
modal.open()

// Connect provider, this will trigger display_uri event
await provider.connect({
  optionalNamespaces: {
    eip155: {
      methods: [
        'eth_sendTransaction',
        'eth_signTransaction',
        'eth_sign',
        'personal_sign',
        'eth_signTypedData'
      ],
      chains: ['eip155:1'],
      events: ['chainChanged', 'accountsChanged']
    },
    solana: {
      methods: ['solana_signMessage', 'solana_signTransaction'],
      chains: ['solana:mainnet'],
      events: ['chainChanged', 'accountsChanged']
    }
  }
})

import { SignClient } from '@walletconnect/sign-client'

// Remove the code line below
import { WalletConnectModal } from '@walletconnect/modal'

// Add the code lines below
import { mainnet } from '@reown/appkit/networks'
import { createAppKit } from '@reown/appkit/core'

const signClient = await SignClient.init({
  projectId: 'YOUR_PROJECT_ID',
  metadata: {
    name: 'My Website',
    description: 'My Website Description',
    url: 'https://mywebsite.com', // origin must match your domain & subdomain
    icons: ['https://avatars.githubusercontent.com/u/37784886']
  },
})

// Remove the code lines below
const modal = new WalletConnectModal({
  projectId: 'YOUR_PROJECT_ID',
  chains: ['eip155:1']
})

// Add the code lines below
const modal = createAppKit({
  projectId: 'YOUR_PROJECT_ID',
  networks: [mainnet],
  manualWCControl: true
})

// connect signClient and feed uri to modal
const { uri, approval } = await signClient.connect({
    requiredNamespaces: {
      eip155: {
        methods: [
          'eth_sendTransaction',
          'eth_signTransaction',
          'eth_sign',
          'personal_sign',
          'eth_signTypedData'
        ],
        chains: ['eip155:1'],
        events: ['chainChanged', 'accountsChanged']
      }
    }
  })

  if (uri) {
    modal.openModal({ uri })
    const session = await approval()
    modal.closeModal()
  }