Optimize the connection method of celodance on the mobile terminal

packages/example/pages/index.tsx

@@ -3,7 +3,7 @@ import { ensureLeading0x } from '@celo/utils/lib/address';
 import {
   Alfajores,
   Baklava,
-  Mainnet,
+  CeloMainnet,
   useContractKit,
 } from '@celo-tools/use-contractkit';
 import { BigNumber } from 'bignumber.js';
@@ -27,7 +27,7 @@ function truncateAddress(address: string) {
   return `${address.slice(0, 8)}...${address.slice(36)}`;
 }
 
-const networks = [Alfajores, Baklava, Mainnet];
+const networks = [Alfajores, Baklava, CeloMainnet];
 
 export default function Home(): React.ReactElement {
   const {

packages/use-contractkit/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@celo-tools/use-contractkit",
-  "version": "1.2.0",
+  "name": "@poofcash/use-contractkit",
+  "version": "1.0.7-beta",
   "private": false,
   "scripts": {
     "build": "tsc -b && yarn run build-styles",
@@ -19,6 +19,7 @@
   "readme": "../../readme.md",
   "license": "MIT",
   "dependencies": {
+    "@celo-tools/celo-ethers-wrapper": "^0.0.5",
     "@celo/contractkit": "1.2.4",
     "@celo/utils": "1.2.4",
     "@celo/wallet-base": "1.2.4",
@@ -34,6 +35,7 @@
     "@walletconnect/client": "2.0.0-beta.0",
     "@walletconnect/types": "2.0.0-beta.0",
     "autoprefixer": "^10.2.6",
+    "ethers": "^5.4.6",
     "postcss": "^8.3.5",
     "qrcode.react": "^1.0.1",
     "react-device-detect": "^1.17.0",

packages/use-contractkit/src/components/AddCeloNetworkButton.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { Alfajores, Baklava, Mainnet } from '../constants';
+import {
+  Alfajores,
+  Baklava,
+  CeloMainnet,
+  EthereumMainnet,
+  Kovan,
+} from '../constants';
 import { ChainId, Network } from '../types';
 
 const CELO_PARAMS = {
@@ -26,10 +32,26 @@ const BAKLAVA_PARAMS = {
   },
 };
 
+const ETHEREUM_PARAMS = {
+  chainName: 'Ethereum',
+  nativeCurrency: { name: 'Ethereum', symbol: 'ETH', decimals: 18 as const },
+};
+
+const KOVAN_PARAMS = {
+  chainName: 'Kovan',
+  nativeCurrency: {
+    name: 'Kovan Ethereum',
+    symbol: 'KETH',
+    decimals: 18 as const,
+  },
+};
+
 const params: { [chain in ChainId]: typeof CELO_PARAMS } = {
-  [ChainId.Mainnet]: CELO_PARAMS,
+  [ChainId.CeloMainnet]: CELO_PARAMS,
   [ChainId.Alfajores]: ALFAJORES_PARAMS,
   [ChainId.Baklava]: BAKLAVA_PARAMS,
+  [ChainId.EthereumMainnet]: ETHEREUM_PARAMS,
+  [ChainId.Kovan]: KOVAN_PARAMS,
 };
 
 interface AddEthereumChainParameter {
@@ -60,9 +82,11 @@ interface Props {
 }
 
 const NETWORKS = {
-  [ChainId.Mainnet]: Mainnet,
+  [ChainId.CeloMainnet]: CeloMainnet,
   [ChainId.Alfajores]: Alfajores,
   [ChainId.Baklava]: Baklava,
+  [ChainId.EthereumMainnet]: EthereumMainnet,
+  [ChainId.Kovan]: Kovan,
 };
 
 export const AddCeloNetworkButton: React.FC<Props> = ({ chainId }: Props) => {

packages/use-contractkit/src/components/ProviderSelect.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { isMobile } from 'react-device-detect';
+import { SupportedProviders } from '../constants';
 
 import { Provider } from '../types';
 
@@ -11,6 +13,25 @@ export const ProviderSelect: React.FC<Props> = ({
   provider,
   onClick,
 }: Props) => {
+  let title = (
+    <div className="tw-pb-1 tw-font-medium dark:tw-text-gray-300">
+      {provider.canConnect() ? provider.name : `Install ${provider.name}`}
+    </div>
+  );
+  if (
+    isMobile &&
+    [
+      SupportedProviders.MetaMask.toString(),
+      SupportedProviders.imToken.toString(),
+    ].includes(provider.name)
+  ) {
+    title = (
+      <div className="tw-pb-1 tw-font-medium dark:tw-text-gray-300">
+        {provider.canConnect() ? provider.name : `Open ${provider.name}`}
+      </div>
+    );
+  }
+
   return (
     <button
       className="tw-flex tw-flex-row tw-items-center tw-text-left tw-py-4 tw-pl-3 tw-pr-2 tw-w-80 md:tw-w-96 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 tw-transition tw-rounded-md  focus:tw-outline-none"
@@ -37,9 +58,7 @@ export const ProviderSelect: React.FC<Props> = ({
         </span>
       </div>
       <div>
-        <div className="tw-pb-1 tw-font-medium dark:tw-text-gray-300">
-          {provider.canConnect() ? provider.name : `Install ${provider.name}`}
-        </div>
+        {title}
         <div className="tw-text-sm tw-text-gray-600 dark:tw-text-gray-400">
           {provider.description}
         </div>

packages/use-contractkit/src/connectors/connectors-by-name.ts

@@ -1,3 +1,4 @@
+import { isMobile } from 'react-device-detect';
 import { WalletTypes } from '../constants';
 import { Connector, Network } from '../types';
 import {
@@ -7,7 +8,9 @@ import {
   MetaMaskConnector,
   PrivateKeyConnector,
   UnauthenticatedConnector,
+  ValoraConnector,
   WalletConnectConnector,
+  CeloDanceConnector,
 } from './connectors';
 
 /**
@@ -23,9 +26,10 @@ export const CONNECTOR_TYPES: {
   [WalletTypes.MetaMask]: MetaMaskConnector,
   [WalletTypes.PrivateKey]: PrivateKeyConnector,
   [WalletTypes.Unauthenticated]: UnauthenticatedConnector,
-  [WalletTypes.Valora]: WalletConnectConnector,
+  [WalletTypes.Valora]: isMobile ? ValoraConnector : WalletConnectConnector,
   [WalletTypes.WalletConnect]: WalletConnectConnector,
   [WalletTypes.CeloDance]: WalletConnectConnector,
   [WalletTypes.CeloTerminal]: WalletConnectConnector,
   [WalletTypes.CeloWallet]: WalletConnectConnector,
+  [WalletTypes.CeloDance]: isMobile ? CeloDanceConnector : WalletConnectConnector,
 };

packages/use-contractkit/src/connectors/connectors.ts

@@ -6,6 +6,7 @@ import {
 } from '@celo/wallet-walletconnect';
 import { BigNumber } from 'bignumber.js';
 
+import { dappKitConfigKey, DappKitWallet } from '../dappkit-wallet';
 import { localStorageKeys, WalletTypes } from '../constants';
 import { ChainId, Connector, Network } from '../types';
 import { clearPreviousConfig } from '../utils/helpers';
@@ -155,9 +156,7 @@ export class InjectedConnector implements Connector {
     if (!ethereum) {
       throw new Error('Ethereum wallet not installed');
     }
-    this.type = ethereum.isMetaMask
-      ? WalletTypes.MetaMask
-      : WalletTypes.Injected;
+    this.type = WalletTypes.Injected;
     const web3 = new Web3(ethereum);
     void (await ethereum.request({ method: 'eth_requestAccounts' }));
 
@@ -356,3 +355,97 @@ export class WalletConnectConnector implements Connector {
     return wallet.close();
   }
 }
+
+export class ValoraConnector implements Connector {
+  public initialised = false;
+  public type = WalletTypes.Valora;
+  public kit: ContractKit;
+  public wallet: DappKitWallet;
+
+  get account(): string | null {
+    const storedConfig = localStorage.getItem(dappKitConfigKey);
+    let dappKitConfig = storedConfig ? JSON.parse(storedConfig) : null;
+    if (dappKitConfig) {
+      return dappKitConfig.phoneNumber;
+    }
+    return null;
+  }
+
+  constructor(private network: Network, dappName: string) {
+    localStorage.setItem(
+      localStorageKeys.lastUsedWalletType,
+      WalletTypes.Valora
+    );
+    localStorage.setItem(
+      localStorageKeys.lastUsedWalletArguments,
+      JSON.stringify([dappName])
+    );
+
+    this.wallet = new DappKitWallet(dappName, this.type);
+    this.kit = newKit(network.rpcUrl, this.wallet);
+    this.wallet.setKit(this.kit);
+  }
+
+  async initialise(): Promise<this> {
+    await this.wallet.init();
+
+    this.kit = newKit(this.network.rpcUrl, this.wallet);
+    this.kit.defaultAccount = this.wallet.getAccounts()[0];
+    this.wallet.setKit(this.kit);
+    this.initialised = true;
+
+    return this;
+  }
+
+  close(): void {
+    localStorage.removeItem(dappKitConfigKey);
+    return;
+  }
+}
+
+export class CeloDanceConnector implements Connector {
+  public initialised = false;
+  public type = WalletTypes.CeloDance;
+  public kit: ContractKit;
+  public wallet: DappKitWallet;
+
+  get account(): string | null {
+    const storedConfig = localStorage.getItem(dappKitConfigKey);
+    let dappKitConfig = storedConfig ? JSON.parse(storedConfig) : null;
+    if (dappKitConfig) {
+      return dappKitConfig.phoneNumber;
+    }
+    return null;
+  }
+
+  constructor(private network: Network, dappName: string) {
+    localStorage.setItem(
+      localStorageKeys.lastUsedWalletType,
+      WalletTypes.CeloDance
+    );
+    localStorage.setItem(
+      localStorageKeys.lastUsedWalletArguments,
+      JSON.stringify([dappName])
+    );
+
+    this.wallet = new DappKitWallet(dappName, this.type);
+    this.kit = newKit(network.rpcUrl, this.wallet);
+    this.wallet.setKit(this.kit);
+  }
+
+  async initialise(): Promise<this> {
+    await this.wallet.init();
+
+    this.kit = newKit(this.network.rpcUrl, this.wallet);
+    this.kit.defaultAccount = this.wallet.getAccounts()[0];
+    this.wallet.setKit(this.kit);
+    this.initialised = true;
+
+    return this;
+  }
+
+  close(): void {
+    localStorage.removeItem(dappKitConfigKey);
+    return;
+  }
+}

packages/use-contractkit/src/connectors/useWalletConnectConnector.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Mainnet } from '../constants';
+import { CeloMainnet } from '../constants';
 import { Connector } from '../types';
 import { useContractKitInternal } from '../use-contractkit';
 import { WalletConnectConnector } from './connectors';
@@ -16,7 +16,7 @@ export function useWalletConnectConnector(
   useEffect(() => {
     let mounted = true;
     const initialiseConnection = async () => {
-      const isMainnet = network.name === Mainnet.name;
+      const isMainnet = network.name === CeloMainnet.name;
       const relayProvider = isMainnet
         ? 'wss://walletconnect.celo.org'
         : 'wss://walletconnect.celo-networks-dev.org';