Merge pull request #47 from celo-org/nicolasbrugneaux/fix-wc

release: 1.0.1

Author: nicolasbrugneaux

.github/workflows/test-workflow.yaml

@@ -1,4 +1,4 @@
-name: 'NPM Publish'
+name: "NPM Publish"
 on:
   release:
     types: [published]
@@ -10,12 +10,10 @@ jobs:
       contents: read
       id-token: write
 
-    uses: celo-org/reusable-workflows/.github/workflows/[email protected].4
+    uses: celo-org/reusable-workflows/.github/workflows/[email protected].5
     with:
       node-version: 16
       package-dir: "packages/rainbowkit-celo"
-    secrets:
-      npm-token: ${{ secrets.NPM_TOKEN }}
       akeyless-api-gateway: https://api.gateway.akeyless.celo-networks-dev.org
       akeyless-github-access-id: p-kf9vjzruht6l
       akeyless-token-path: /static-secrets/apps-tooling-circle/npm-publish-token

README.md

@@ -9,7 +9,13 @@ It includes the chain information as well as the main CELO wallets (Valora, Celo
 npm install @celo/rainbowkit-celo
 ```
 
-This package has `@rainbow-me/rainbowkit` as a peer dependency and expect it to be installed too. Follow [their instructions](https://www.rainbowkit.com/docs/installation) if that's not done yet.
+This package has a few peer dependencies and expect them to be installed too. Follow [their instructions](https://www.rainbowkit.com/docs/installation) if that's not done yet.
+
+Here's the exhaustive list:
+
+```sh
+npm install @rainbow-me/rainbowkit @wagmi/chains wagmi viem
+```
 
 ### A note on version compatibility
 

apps/example/package.json

@@ -9,17 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@celo/rainbowkit-celo": "1.0.0",
+    "@celo/rainbowkit-celo": "^1.0.1-beta.4",
     "@mdx-js/loader": "^2.1.3",
     "@mdx-js/react": "^2.1.3",
     "@next/mdx": "^12.3.1",
-    "@rainbow-me/rainbowkit": "^1.0.0",
-    "viem": "^0.3.21",
+    "@rainbow-me/rainbowkit": "^1.0.3",
+    "viem": "^1.1.8",
     "next": "12.2.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-syntax-highlighter": "^15.5.0",
-    "wagmi": "^1.0.0"
+    "wagmi": "^1.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

apps/example/pages/_app.tsx

@@ -16,7 +16,7 @@ const { chains, publicClient } = configureChains(
   ]
 );
 
-const projectId = "11d6d8a1810e469d801f6f86ae3679b6";
+const projectId = "944abdcd5d7e2b5d256ff7cc35021cc5";
 
 const connectors = celoGroups({
   chains,

packages/rainbowkit-celo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@celo/rainbowkit-celo",
   "author": "cLabs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Quickly Setup RainbowKit for Celo",
   "homepage": "https://rainbowkit-with-celo.vercel.app/",
   "repository": {
@@ -39,6 +39,10 @@
       "types": "./lists/index.d.ts",
       "import": "./lists/index.js"
     },
+    "./utils/getWalletConnectUri": {
+      "types": "./utils/getWalletConnectUri.d.ts",
+      "import": "./utils/getWalletConnectUri.js"
+    },
     "./wallets": {
       "types": "./wallets/index.d.ts",
       "import": "./wallets/index.js"
@@ -75,13 +79,12 @@
     "clean": "tsc -b --clean",
     "build": "tsc -b"
   },
-  "dependencies": {
-    "@wagmi/chains": "^0.2.22"
-  },
+  "dependencies": {},
   "peerDependencies": {
-    "@rainbow-me/rainbowkit": "^1.0.0",
-    "viem": "^0.3.21",
-    "wagmi": "^1.0.0"
+    "@rainbow-me/rainbowkit": ">=1.0.2 && <=2.0.0",
+    "@wagmi/chains": ">=1.0.0 && <=2.0.0",
+    "viem": ">=1.0.0 && <=2.0.0",
+    "wagmi": ">=1.0.0 && <=2.0.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.37",

packages/rainbowkit-celo/utils/getWalletConnectUri.ts

@@ -0,0 +1,13 @@
+// Note: taken from https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/utils/getWalletConnectUri.ts#L3
+// since they don't expose it
+import type { Connector } from "wagmi/connectors";
+
+export async function getWalletConnectUri(
+  connector: Connector,
+  version: "1" | "2"
+): Promise<string> {
+  const provider = await connector.getProvider();
+  return version === "2"
+    ? new Promise<string>((resolve) => provider.once("display_uri", resolve))
+    : provider.connector.uri;
+}

packages/rainbowkit-celo/wallets/celo-terminal.ts

@@ -4,6 +4,7 @@ import {
   Wallet,
 } from "@rainbow-me/rainbowkit";
 import { Alfajores, Baklava, Celo } from "@celo/rainbowkit-celo/chains";
+import { getWalletConnectUri } from "@celo/rainbowkit-celo/utils/getWalletConnectUri";
 
 interface CeloTerminalOptions {
   chains: Chain[];
@@ -21,6 +22,7 @@ export const CeloTerminal = ({
   iconBackground: "#FFF",
   createConnector: () => {
     const connector = getWalletConnectConnector({
+      version: "2",
       chains,
       projectId,
     });
@@ -29,7 +31,7 @@ export const CeloTerminal = ({
       connector,
       desktop: {
         getUri: async () => {
-          const { uri } = (await connector.getProvider()).connector;
+          const uri = await getWalletConnectUri(connector, "2");
           // Note: This doesn't work. I'll try to have a PR to add deeplinking to CeloTerminal - Nicolas
           return `https://celoterminal.com/wc?uri=${encodeURIComponent(uri)}`;
         },

packages/rainbowkit-celo/wallets/celo-wallet.ts

@@ -2,8 +2,9 @@ import type { Chain, Wallet } from "@rainbow-me/rainbowkit";
 import { getWalletConnectConnector } from "@rainbow-me/rainbowkit";
 
 import { Alfajores, Baklava, Celo } from "@celo/rainbowkit-celo/chains";
+import { getWalletConnectUri } from "@celo/rainbowkit-celo/utils/getWalletConnectUri";
 
-interface CeloWalletOptions {
+export interface CeloWalletOptions {
   chains: Chain[];
   projectId: string;
 }
@@ -18,20 +19,18 @@ export const CeloWallet = ({
   iconBackground: "#FFF",
   createConnector: () => {
     const connector = getWalletConnectConnector({
+      version: "2",
       chains,
       projectId,
     });
     return {
       connector,
       mobile: {
-        getUri: async () => {
-          const { uri } = (await connector.getProvider()).connector;
-          return uri;
-        },
+        getUri: () => getWalletConnectUri(connector, "2"),
       },
       desktop: {
         getUri: async () => {
-          const { uri } = (await connector.getProvider()).connector;
+          const uri = await getWalletConnectUri(connector, "2");
           return `celowallet://wc?uri=${encodeURIComponent(uri)}`;
         },
       },

packages/rainbowkit-celo/wallets/valora.ts

@@ -1,12 +1,16 @@
-import type { Chain, Wallet } from "@rainbow-me/rainbowkit";
-import { getWalletConnectConnector } from "@rainbow-me/rainbowkit";
+import {
+  Chain,
+  getWalletConnectConnector,
+  Wallet,
+} from "@rainbow-me/rainbowkit";
 
 import {
   Alfajores,
   Baklava,
   Celo,
   Cannoli,
 } from "@celo/rainbowkit-celo/chains";
+import { getWalletConnectUri } from "@celo/rainbowkit-celo/utils/getWalletConnectUri";
 
 // rainbowkit utils has it but doesn't export it :/
 function isAndroid(): boolean {
@@ -15,7 +19,7 @@ function isAndroid(): boolean {
   );
 }
 
-interface ValoraOptions {
+export interface ValoraOptions {
   chains: Chain[];
   projectId: string;
 }
@@ -36,22 +40,23 @@ export const Valora = ({
   },
   createConnector: () => {
     const connector = getWalletConnectConnector({
+      version: "2",
       chains,
       projectId,
     });
     return {
       connector,
       mobile: {
         getUri: async () => {
-          const { uri } = (await connector.getProvider()).connector;
+          const uri = await getWalletConnectUri(connector, "2");
           return isAndroid()
             ? uri
             : // ideally this would use the WalletConnect registry, but this will do for now
               `https://valoraapp.com/wc?uri=${encodeURIComponent(uri)}`;
         },
       },
       qrCode: {
-        getUri: async () => (await connector.getProvider()).connector.uri,
+        getUri: () => getWalletConnectUri(connector, "2"),
         instructions: {
           learnMoreUrl: "https://valoraapp.com/learn",
           steps: [