WIP v2

example/Dapp.tsx

@@ -1,35 +1,13 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import './App.css';
-import { useMemo, useState } from 'react';
-import DappV1 from './dapps/v1';
-import { Button, Wrapper } from './styled';
+import DappV2 from './dapps/v2';
 
 const Dapp = () => {
-  const [version, setVersion] = useState('v1');
-
-  const renderDapp = useMemo(() => {
-    if (version === 'v1') return <DappV1 />;
-  }, [version]);
-
   return (
     <div className="body">
       <h1 className="text-center">Rainbow Button Dapp</h1>
-      {version && renderDapp}
-      {!version && (
-        <div>
-          <h2 className="text-center">Choose a RainbowButton</h2>
-          <Wrapper>
-            <Button
-              className="button"
-              key="v1"
-              onClick={() => setVersion('v1')}
-            >
-              RainbowButton WC v1
-            </Button>
-          </Wrapper>
-        </div>
-      )}
+      <DappV2 />
     </div>
   );
 };

example/dapps/constants/index.tsx

@@ -5,10 +5,10 @@ export const SUPPORTED_METHODS = [
 ];
 
 export const supportedMainChainsInfoEip155 = {
-  'eip155:1': { color: '#0E76FD', name: 'Ethereum Mainnet' },
-  'eip155:10': { color: '#FF4040', name: 'Optimism' },
-  'eip155:137': { color: '#8247E5', name: 'Polygon' },
-  'eip155:42161': { color: '#2D374B', name: 'Arbitrum' },
+  'eip155:1': { color: '#0E76FD', name: 'Ethereum', value: 'ethereum' },
+  'eip155:10': { color: '#FF4040', name: 'Optimism', value: 'optimism' },
+  'eip155:137': { color: '#8247E5', name: 'Polygon', value: 'polygon' },
+  'eip155:42161': { color: '#2D374B', name: 'Arbitrum', value: 'arbitrum' },
 };
 
 export const supportedMainChainsInfo = {

example/dapps/store.ts

@@ -1,39 +1,36 @@
-import WalletConnect from '@walletconnect/client';
+import WalletConnectClient from '@walletconnect/client';
+import { SessionTypes } from '@walletconnect/types';
 import { createStore } from 'redux';
 
-const SET_CONNECTOR = 'SET_CONNECTOR';
-const SET_ACCOUNTS = 'SET_ACCOUNTS';
-const SET_CHAIN_ID = 'SET_CHAIN_ID';
+const SET_SESSION = 'SET_SESSION';
+const SET_CLIENT = 'SET_CLIENT';
 
-export const setConnector = (connector: WalletConnect | null) => ({
-  payload: connector,
-  type: SET_CONNECTOR,
+export const setClient = (client: WalletConnectClient) => ({
+  payload: client,
+  type: SET_CLIENT,
 });
 
-export const setAccounts = (accounts: string[] | null) => ({
-  payload: accounts,
-  type: SET_ACCOUNTS,
+export const setSession = (sessions: SessionTypes.Settled | null) => ({
+  payload: sessions,
+  type: SET_SESSION,
 });
 
-export const setChainId = (chainId: string | null) => ({
-  payload: chainId,
-  type: SET_CHAIN_ID,
+export const setPairings = (pairings: string[]) => ({
+  payload: pairings,
+  type: SET_SESSION,
 });
 
 const INITIAL_STATE = {
-  accounts: undefined,
-  chainId: undefined,
-  connector: undefined,
+  client: undefined,
+  session: undefined,
 };
 
 const reducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
-    case SET_CONNECTOR:
-      return { ...state, connector: action.payload };
-    case SET_ACCOUNTS:
-      return { ...state, accounts: action.payload };
-    case SET_CHAIN_ID:
-      return { ...state, chainId: action.payload };
+    case SET_SESSION:
+      return { ...state, session: action.payload };
+    case SET_CLIENT:
+      return { ...state, client: action.payload };
     default:
       return state;
   }