🦊🐺🐭 Add connectors

packages/core/src/providers/network/connector/connector.ts

@@ -0,0 +1,28 @@
+import { BaseProvider, Web3Provider } from '@ethersproject/providers';
+
+export enum ConnectorPriority {
+  ApiNode = 1,
+  Wallet = 2,
+}
+
+export interface Update {
+  chainId: number
+  accounts: string[]
+}
+
+export type UpdateFn = (data: Update) => void
+
+export interface Connector {
+  name: string;
+  priority: ConnectorPriority;
+
+  provider?: BaseProvider;
+
+  onUpdate?: UpdateFn;
+
+  connectEagerly(): Promise<void>
+
+  activate(): Promise<void>
+
+  deactivate(): Promise<void>
+}

packages/core/src/providers/network/connector/connectorController.ts

@@ -0,0 +1,32 @@
+import { Connector } from "./connector";
+
+export class ConnectorController {
+  constructor(
+    public readonly connector: Connector,
+  ) {
+    connector.onUpdate = ({ chainId, accounts }) => {
+      this.chainId = chainId;
+      this.accounts = accounts;
+    }
+
+    void this.connector.connectEagerly();
+  }
+
+  public active = false;
+  public accounts: string[] = []
+  public chainId: number = 0
+
+  getProvider() {
+    return this.connector.provider;
+  }
+
+  async activate() {
+    await this.connector.activate();
+    this.active = true;
+  }
+
+  async deactivate() {
+    this.active = false;
+    await this.connector.deactivate();
+  }
+}

packages/core/src/providers/network/connector/context.tsx

@@ -0,0 +1,41 @@
+import { createContext, ReactNode, useEffect, useState } from "react";
+import { Connector } from "./connector";
+import { ConnectorController } from "./connectorController";
+
+interface ConnectorContextValue {
+  connectors: ConnectorController[];
+  addConnector(connector: Connector): void;
+}
+
+export const ConnectorContext = createContext<ConnectorContextValue | undefined>(undefined)
+
+export interface ConnectorContextProviderProps {
+  connectors: Connector[];
+  children?: ReactNode;
+}
+
+export function ConnectorContextProvider({ connectors, children }: ConnectorContextProviderProps) {
+  const [controllers, setControllers] = useState<ConnectorController[]>([])
+
+  useEffect(() => {
+    const newControllers = connectors.map(connector => {
+      const existing = controllers.find(c => c.connector === connector)
+      if (existing) {
+        return existing
+      }
+      return new ConnectorController(connector)
+    })
+    const otherControllers = controllers.filter(c => !newControllers.some(c2 => c2.connector === c.connector))
+    setControllers([...newControllers, ...otherControllers].sort((a, b) => a.connector.priority - b.connector.priority))
+  }, connectors)
+
+  function addConnector(connector: Connector) {
+    setControllers(controllers.concat(new ConnectorController(connector)))
+  }
+
+  return (
+    <ConnectorContext.Provider value={{ connectors: controllers, addConnector }}>
+      {children}
+    </ConnectorContext.Provider>
+  )
+}

packages/core/src/providers/network/connector/impls/metamask.ts

@@ -0,0 +1,38 @@
+import { BaseProvider, Web3Provider } from "@ethersproject/providers";
+import { Connector, ConnectorPriority, UpdateFn } from "../connector";
+import detectMetamask from '@metamask/detect-provider'
+
+export class MetamaskConnector implements Connector {
+  public provider?: Web3Provider;
+  public priority = ConnectorPriority.Wallet;
+  public name = 'Metamask';
+
+  constructor() {
+
+  }
+
+  onUpdate?: UpdateFn;
+
+  private async init() {
+    const metamask = await detectMetamask();
+    this.provider = new Web3Provider(metamask as any);
+  }
+
+  async connectEagerly(): Promise<void> {
+    await this.init();
+
+    const chainId: string = await this.provider!.send('eth_chainId', [])
+    const accounts: string[] = await this.provider!.send('eth_accounts', [])
+    this.onUpdate?.({ chainId: parseInt(chainId), accounts });
+  }
+
+  async activate(): Promise<void> {
+    const chainId: string = await this.provider!.send('eth_chainId', [])
+    const accounts: string[] = await this.provider!.send('eth_requestAccounts', [])
+    this.onUpdate?.({ chainId: parseInt(chainId), accounts });
+  }
+
+  async deactivate(): Promise<void> {
+
+  }
+}

packages/core/src/providers/network/connector/impls/rpc.ts

@@ -0,0 +1,27 @@
+import { BaseProvider, JsonRpcProvider, Web3Provider } from "@ethersproject/providers";
+import { Connector, ConnectorPriority, UpdateFn } from "../connector";
+
+export class RpcConnector implements Connector {
+  public provider: BaseProvider;
+  public priority = ConnectorPriority.ApiNode;
+  public name = 'RPC';
+
+  public onUpdate?: UpdateFn;
+
+  constructor(
+    public url: string,
+  ) {
+    this.provider = new JsonRpcProvider(url);
+  }
+
+  async connectEagerly(): Promise<void> {
+    const { chainId } = await this.provider!.getNetwork();
+    this.onUpdate?.({ chainId, accounts: [] });
+  }
+  async activate(): Promise<void> {
+    const { chainId } = await this.provider!.getNetwork();
+    this.onUpdate?.({ chainId, accounts: [] });
+  }
+  async deactivate(): Promise<void> {
+  }
+}

packages/core/src/providers/network/connector/useConnectorNetwork.ts

@@ -0,0 +1,50 @@
+import { BaseProvider } from "@ethersproject/providers";
+import { useContext } from "react";
+import { ConnectorController } from "./connectorController";
+import { ConnectorContext } from "./context";
+
+export interface UseProviderOptions {
+  chainId?: number;
+  account?: boolean | string;
+}
+
+export interface ConnectorNetwork {
+  chainId: number;
+  accounts: string[];
+  provider: BaseProvider;
+}
+
+export function useConnectorNetwork(opts: UseProviderOptions = {}): ConnectorNetwork | undefined {
+  const { connectors } = useContext(ConnectorContext)!;
+  const connector = connectors.find(c => matchConnector(opts, c));
+
+  if(!connector || !connector.getProvider()) {
+    return undefined;
+  }
+
+  return {
+    chainId: connector.chainId,
+    accounts: connector.accounts,
+    provider: connector.getProvider()!,
+  }
+}
+
+function matchConnector(opts: UseProviderOptions, connector: ConnectorController) {
+  if(opts.chainId) {
+    if(connector.chainId !== opts.chainId) {
+      return false;
+    }
+  }
+
+  if(opts.account === true) {
+    if(!connector.accounts.length) {
+      return false;
+    }
+  } else if(opts.account) {
+    if(!connector.accounts.includes(opts.account)) {
+      return false;
+    }
+  }
+
+  return true;
+}