Merge branch 'wallets'

wallets/react-wallet-v2/README.md

@@ -1,34 +1,25 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# WalletConnect React Wallet Example
 
-## Getting Started
+⚠️ Wallet should only be used as a refference example & for development purposes <br />
+🔗 Live app - https://react-wallet-v2.vercel.app <br />
+📚 WalletConnect docs - https://docs.walletconnect.com/2.0
 
-First, run the development server:
+Example wallet implementation using [WalletConnect](https://walletconnect.com/), [Ethers](https://docs.ethers.io/v5/), [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/)
 
-```bash
+## Getting started
-npm run dev
-# or
-yarn dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+This example is built atop of [NextJS](https://nextjs.org/) in order to abstract complexity of setting up bundlers, routing etc.. So there are only few steps you need to follow in order to set everything up
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+1. Go to [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) and obtain a project it
+2. Add your project details in [WalletConnectUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts) file.
+3. [Optional] To use project id as environment variable follow [NextJS environment docs](https://nextjs.org/docs/basic-features/environment-variables)
+4. Install dependencies `yarn install` or `npm install`
+5. Run `yarn dev` or `npm run dev` to start local development
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+## Navigating through this example
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+1. Initial setup and initializations happen in [_app.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/pages/_app.tsx) file.
-
+2. WalletConnect client and ethers wallets are initialized in [useInitialization.ts ](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useInitialization.ts) hook
-## Learn More
+3. Subscription and handling of WalletConnect events happens in [useWalletConnectEventsManager.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts) hook, that oppens related [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) and passes them all necesary data.
-
+4. [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) are responsible for data display and handling approval or rejection actions.
-To learn more about Next.js, take a look at the following resources:
+5. Uppon approval or rejection modals pass request data to [RequestHandlerUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/RequestHandlerUtil.ts) that performs all necesary ethers work based on request method and returns formated json rpc result data that can be then used for WallteConnect client responses.
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

wallets/react-wallet-v2/src/components/Navigation.tsx

@@ -7,13 +7,13 @@ export default function Navigation() {
     <Row justify="space-between" align="center">
       <Link href="/" passHref>
         <a className="navLink">
-          <Image alt="accounts icon" src="/accounts-icon.svg" width={27} height={27} />
+          <Image alt="accounts icon" src="/icons/accounts-icon.svg" width={27} height={27} />
         </a>
       </Link>
 
       <Link href="/sessions" passHref>
         <a className="navLink">
-          <Image alt="sessions icon" src="/sessions-icon.svg" width={27} height={27} />
+          <Image alt="sessions icon" src="/icons/sessions-icon.svg" width={27} height={27} />
         </a>
       </Link>
 
@@ -37,13 +37,13 @@ export default function Navigation() {
 
       <Link href="/pairings" passHref>
         <a className="navLink">
-          <Image alt="pairings icon" src="/pairings-icon.svg" width={25} height={25} />
+          <Image alt="pairings icon" src="/icons/pairings-icon.svg" width={25} height={25} />
         </a>
       </Link>
 
       <Link href="/settings" passHref>
         <a className="navLink">
-          <Image alt="settings icon" src="/settings-icon.svg" width={27} height={27} />
+          <Image alt="settings icon" src="/icons/settings-icon.svg" width={27} height={27} />
         </a>
       </Link>
     </Row>

wallets/react-wallet-v2/src/components/QrReader.tsx

@@ -57,7 +57,7 @@ export default function QrReader({ onConnect }: IProps) {
       ) : (
         <div className="container qrPlaceholder">
           <Image
-            src="/qr-icon.svg"
+            src="/icons/qr-icon.svg"
             width={100}
             height={100}
             alt="qr code icon"

wallets/react-wallet-v2/src/data/EIP155Data.ts

@@ -3,11 +3,6 @@
  * @url https://chainlist.org
  */
 
-/**
- * Utilities
- */
-const LOGO_BASE_URL = 'https://blockchain-api.xyz/logos/'
-
 /**
  * Types
  */
@@ -20,24 +15,45 @@ export const EIP155_MAINNET_CHAINS = {
   'eip155:1': {
     chainId: 1,
     name: 'Ethereum',
-    logo: LOGO_BASE_URL + 'eip155:1.png',
+    logo: '/chain-logos/eip155-1.png',
     rgb: '99, 125, 234',
     rpc: 'https://cloudflare-eth.com/'
   },
+  'eip155:43114': {
+    chainId: 43114,
+    name: 'Avalanche C-Chain',
+    logo: '/chain-logos/eip155-43113.png',
+    rgb: '232, 65, 66',
+    rpc: 'https://api.avax.network/ext/bc/C/rpc'
+  },
   'eip155:137': {
     chainId: 137,
     name: 'Polygon',
-    logo: LOGO_BASE_URL + 'eip155:137.png',
+    logo: '/chain-logos/eip155-137.png',
     rgb: '130, 71, 229',
     rpc: 'https://polygon-rpc.com/'
   }
 }
 
 export const EIP155_TEST_CHAINS = {
+  'eip155:42': {
+    chainId: 42,
+    name: 'Ethereum Kovan',
+    logo: '/chain-logos/eip155-1.png',
+    rgb: '99, 125, 234',
+    rpc: 'https://kovan.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'
+  },
+  'eip155:43113': {
+    chainId: 43113,
+    name: 'Avalanche Fuji',
+    logo: '/chain-logos/eip155-43113.png',
+    rgb: '232, 65, 66',
+    rpc: 'https://api.avax-test.network/ext/bc/C/rpc'
+  },
   'eip155:80001': {
     chainId: 80001,
     name: 'Polygon Mumbai',
-    logo: LOGO_BASE_URL + 'eip155:137.png',
+    logo: '/chain-logos/eip155-137.png',
     rgb: '130, 71, 229',
     rpc: 'https://rpc-mumbai.maticvigil.com/'
   }

wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts

@@ -14,7 +14,7 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
   }, [])
 
   /******************************************************************************
-   * 2. Open session created modal to show success feedback
+   * 2. [Optional] hanle session created
    *****************************************************************************/
   const onSessionCreated = useCallback((created: SessionTypes.Created) => {}, [])
 
@@ -26,8 +26,6 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
     const { method } = request
     const requestSession = await walletConnectClient.session.get(topic)
 
-    console.log({ requestEvent, requestSession })
-
     switch (method) {
       case EIP155_SIGNING_METHODS.ETH_SIGN:
       case EIP155_SIGNING_METHODS.PERSONAL_SIGN:

wallets/react-wallet-v2/src/pages/pairings.tsx

@@ -23,7 +23,6 @@ export default function PairingsPage() {
       {pairings.length ? (
         pairings.map(pairing => {
           const { metadata } = pairing.state
-          console.log(pairing)
 
           return (
             <PairingCard

wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts

@@ -5,7 +5,7 @@ export let walletConnectClient: WalletConnectClient
 export async function createWalletConnectClient() {
   walletConnectClient = await WalletConnectClient.init({
     controller: true,
-    projectId: '8f331b9812e0e5b8f2da2c7203624869',
+    projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
     relayUrl: 'wss://relay.walletconnect.com',
     metadata: {
       name: 'React Wallet',