Merge branch 'release/1.0.0'

examples/rainbowkit-integration/package.json

@@ -9,13 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@arcana/auth-wagmi": "^0.0.3",
+    "@arcana/auth-wagmi": "^1.0.0",
+    "@arcana/auth": "^1.0.3",
     "@next/font": "13.1.1",
-    "@rainbow-me/rainbowkit": "^0.8.1",
-    "ethers": "^5.7.2",
+    "@rainbow-me/rainbowkit": "^0.12.4",
+    "ethers": "5.7.2",
     "next": "13.1.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "wagmi": "^0.9.5"
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-scripts": "5.0.1",
+    "wagmi": "0.12.6"
   }
 }

examples/rainbowkit-integration/utils/getArcanaAuth.js

@@ -0,0 +1,12 @@
+import { AuthProvider } from "@arcana/auth";
+
+let auth = null;
+
+export const getAuthProvider = () => {
+  if (!auth) {
+    auth = new AuthProvider(
+      "xar_dev_19527cdf585cd31d0bd06bfc1b008accea781404"
+    );
+  }
+  return auth;
+};

examples/rainbowkit-integration/utils/wallet.js

@@ -1,6 +1,6 @@
 import { connectorsForWallets } from "@rainbow-me/rainbowkit";
 import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
-
+import { getAuthProvider } from "./getArcanaAuth";
 import { ArcanaConnector } from "@arcana/auth-wagmi";
 
 export const ArcanaRainbowConnector = ({ chains }) => {
@@ -13,8 +13,8 @@ export const ArcanaRainbowConnector = ({ chains }) => {
       const connector = new ArcanaConnector({
         chains,
         options: {
-          clientId: "xar_test_b2dde12aad64eb35d72b2c80926338e178b1fa3f",
-        },
+	  auth: getAuthProvider(),
+        }
       });
       return {
         connector,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcana/auth-wagmi",
-  "version": "0.0.4",
+  "version": "1.0.0",
   "description": "Wagmi connector for Arcana Auth",
   "author": "makylfang",
   "license": "MIT",
@@ -22,10 +22,10 @@
     "prepublishOnly": "yarn run build"
   },
   "dependencies": {
-    "@arcana/auth": "^1.0.3",
-    "@wagmi/core": "0.9.5"
+    "@wagmi/core": "^0.10.9"
   },
   "devDependencies": {
+    "@arcana/auth": "^1.0.3",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^10.0.1",

readme.md

@@ -1,50 +1,70 @@
-# Arcana auth wagmi connector
+# Arcana Auth Wagmi Connector
+
+
+## Install
+
+```sh
+yarn add @arcana/auth-wagmi @arcana/auth
+```
 
 ## Usage
 
+With connect modal
+
 ```ts
 import { ArcanaConnector } from "@arcana/auth-wagmi"
+import { AuthProvider } from "@arcana/auth"
 
+const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
 const connector = new ArcanaConnector({
     options: {
-        clientId: `${arcana_client_id}`,
+        auth,
     }
 })
-
 ```
 
-## Configuration
-
-## chains
-
-Chains supported by app.
+With custom UI
 
 ```ts
-import { mainnet, optimism, polygon } from '@wagmi/core/chains'
 import { ArcanaConnector } from "@arcana/auth-wagmi"
-
+import { AuthProvider } from "@arcana/auth"
+
+const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
 const connector = new ArcanaConnector({
-  chains: [mainnet, optimism, polygon],
-  options: {
-    clientId: `${arcana_client_id}`,
-  },
+    options: {
+        auth,
+        login: {
+          provider: "google"
+        } // Optional, specify here or in setLogin function
+    }
+})
+
+// OR
+
+connector.setLogin({
+  provider: "google"
 })
 ```
 
-## options
+## Configuration
+
+## Add Chains
 
-Options to be passed to Arcana auth SDK.
+Configure the chains that will show up in the Arcana wallet within your app's context. In the example below, the chains configured are: Optimism, Polygon and Ethereum Mainnet.
 
 ```ts
+import { mainnet, optimism, polygon } from '@wagmi/core/chains'
+import { ArcanaConnector } from "@arcana/auth-wagmi"
+import { AuthProvider } from "@arcana/auth"
+
+const auth = new AuthProvider(`${arcana_client_id}`)
+
 const connector = new ArcanaConnector({
   chains: [mainnet, optimism, polygon],
   options: {
-    clientId: `${arcana_client_id}`,
-    theme: 'light',            // Defaults to 'dark'
-    alwaysVisible: false,      // Defaults to true
-    position: 'left'           // Defaults to 'right'
+    auth,
   },
 })
 ```
 
-Remaining integration documentation can be found at [wagmi](https://wagmi.sh/core/getting-started) docs.
+For more details on connectors and integrating your app with Wagmi, see [Wagmi documentation](https://wagmi.sh/core/getting-started).

src/connector.ts

@@ -9,53 +9,48 @@ import {
   UserRejectedRequestError,
   normalizeChainId,
 } from "@wagmi/core";
-import { AuthProvider, EthereumProvider, CHAIN } from "@arcana/auth";
+import type { AuthProvider, EthereumProvider } from "@arcana/auth";
 import { ethers } from "ethers";
 
-type AuthOptions = {
-  appId?: ConstructorParameters<typeof AuthProvider>[0];
-  clientId?: ConstructorParameters<typeof AuthProvider>[0];
-} & ConstructorParameters<typeof AuthProvider>[1];
+const isServer = typeof window === "undefined";
+
+interface LoginType {
+  provider: string;
+  email?: string;
+}
 
 export class ArcanaConnector extends Connector {
-  readonly id = "arcana-auth";
+  ready = !isServer;
+  readonly id = "arcana";
   readonly name = "Arcana Auth";
-  readonly ready = true;
   private auth: AuthProvider;
-  private provider: EthereumProvider;
+  private loginType?: LoginType;
+  private provider?: EthereumProvider;
 
-  constructor(config: { chains?: Chain[]; options: AuthOptions }) {
+  constructor(config: {
+    chains?: Chain[];
+    options: { auth: AuthProvider; login?: LoginType };
+  }) {
     super(config);
-    let id = config.options?.appId
-      ? config.options?.appId
-      : config.options?.clientId;
-    if (!id) {
-      throw new Error("appAddress or clientId required for arcana auth.");
-    }
+    this.auth = config.options.auth;
+    this.loginType = config.options.login;
+  }
 
-    this.auth = new AuthProvider(id, {
-      network: config.options.network,
-      theme: config.options.theme || "dark",
-      chainConfig: {
-        chainId: CHAIN.ETHEREUM_MAINNET,
-      },
-    });
-    this.provider = this.auth.provider;
+  setLogin(val: LoginType) {
+    this.loginType = val;
   }
 
   async connect(): Promise<Required<ConnectorData>> {
     try {
-      this.provider.on("accountsChanged", this.onAccountsChanged);
-      this.provider.on("chainChanged", this.onChainChanged);
-      this.provider.on("disconnect", this.onDisconnect);
-
       await this.auth.init();
-      this.provider = await this.getProvider();
+      const provider = await this.getProvider();
 
       if (await this.auth.isLoggedIn()) {
         const chainId = await this.getChainId();
         const unsupported = this.isChainUnsupported(chainId);
-        await new Promise((resolve) => this.provider.on("connect", resolve));
+        if (!this.auth.connected) {
+          await new Promise((resolve) => provider.on("connect", resolve));
+        }
         return {
           provider: this.provider,
           chain: {
@@ -65,7 +60,20 @@ export class ArcanaConnector extends Connector {
           account: await this.getAccount(),
         };
       }
-      await this.auth.connect();
+      this.addEventListeners();
+      if (this.loginType?.provider) {
+        if (this.loginType.provider == "passwordless") {
+          if (this.loginType.email) {
+            await this.auth.loginWithLink(this.loginType.email);
+          } else {
+            throw new Error("passwordless requires `email` in params");
+          }
+        } else {
+          await this.auth.loginWithSocial(this.loginType.provider);
+        }
+      } else {
+        await this.auth.connect();
+      }
       const chainId = await this.getChainId();
       const unsupported = this.isChainUnsupported(chainId);
       return {
@@ -87,7 +95,8 @@ export class ArcanaConnector extends Connector {
   }
 
   async getAccount() {
-    const accounts = await this.provider.request({
+    const provider = await this.getProvider();
+    const accounts = await provider.request({
       method: "eth_accounts",
     });
     return ethers.utils.getAddress((accounts as string[])[0]);
@@ -99,8 +108,9 @@ export class ArcanaConnector extends Connector {
 
   async isAuthorized() {
     try {
-      const account = await this.getAccount();
-      return !!account;
+      await this.auth.init();
+      const isAuthorized = await this.auth.isLoggedIn();
+      return isAuthorized;
     } catch {
       return false;
     }
@@ -169,9 +179,7 @@ export class ArcanaConnector extends Connector {
 
   async disconnect() {
     await this.auth.logout();
-    this.provider.removeListener("accountsChanged", this.onAccountsChanged);
-    this.provider.removeListener("chainChanged", this.onChainChanged);
-    this.provider.removeListener("disconnect", this.onDisconnect);
+    this.removeEventListeners();
   }
 
   async getProvider() {
@@ -181,4 +189,18 @@ export class ArcanaConnector extends Connector {
 
     return this.provider;
   }
+
+  private addEventListeners() {
+    this.auth.provider.on("accountsChanged", this.onAccountsChanged);
+    this.auth.provider.on("chainChanged", this.onChainChanged);
+    this.auth.provider.on("disconnect", this.onDisconnect);
+  }
+  private removeEventListeners() {
+    this.auth.provider.removeListener(
+      "accountsChanged",
+      this.onAccountsChanged
+    );
+    this.auth.provider.removeListener("chainChanged", this.onChainChanged);
+    this.auth.provider.removeListener("disconnect", this.onDisconnect);
+  }
 }