@rango-dev/wallets-react 0.27.0 → 0.27.1-next.0

package/src/legacy/useLegacyProviders.ts

@@ -1,8 +1,10 @@
 import type { ProviderContext, ProviderProps } from './types.js';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { useEffect, useReducer } from 'react';
 
+import { autoConnect } from './autoConnect.js';
 import {
   availableWallets,
   checkWalletProviders,
@@ -17,7 +19,13 @@ import {
 import { useInitializers } from './hooks.js';
 import { useAutoConnect } from './useAutoConnect.js';
 
-export function useLegacyProviders(props: ProviderProps): ProviderContext {
+export type LegacyProviderProps = Omit<ProviderProps, 'providers'> & {
+  providers: LegacyProviderInterface[];
+};
+
+export function useLegacyProviders(
+  props: LegacyProviderProps
+): ProviderContext {
   const [providersState, dispatch] = useReducer(stateReducer, {});
 
   // Get (or add) wallet instance (`provider`s will be wrapped in a `Wallet`)
@@ -30,20 +38,29 @@ export function useLegacyProviders(props: ProviderProps): ProviderContext {
   const wallets = checkWalletProviders(listOfProviders);
 
   useAutoConnect({
-    wallets,
     allBlockChains: props.allBlockChains,
     autoConnect: props.autoConnect,
-    getWalletInstanceFromLegacy: getWalletInstance,
+    autoConnectHandler: async () => autoConnect(wallets, getWalletInstance),
   });
 
   // Final API we put in context and it will be available to use for users.
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const api: ProviderContext = {
-    async connect(type, network, namespaces) {
+    async connect(type, namespaces) {
       const wallet = wallets.get(type);
       if (!wallet) {
         throw new Error(`You should add ${type} to provider first.`);
       }
+
+      // Legacy providers doesn't implemented multiple namespaces, so it will always be one value.
+      let network = undefined;
+      if (namespaces && namespaces.length > 0) {
+        /*
+         * This may not be safe in cases there are two `network` for namespaces, the first one will be picked always.
+         * But since legacy provider only accepts one value, it shouldn't be happened when we are using legacy mode.
+         */
+        network = namespaces.find((ns) => !!ns.network)?.network;
+      }
+
       const walletInstance = getWalletInstance(wallet);
       const result = await walletInstance.connect(network, namespaces);
       if (props.autoConnect) {
@@ -54,7 +71,7 @@ export function useLegacyProviders(props: ProviderProps): ProviderContext {
         });
       }
 
-      return result;
+      return [result];
     },
     async disconnect(type) {
       const wallet = wallets.get(type);

package/src/legacy/utils.ts

@@ -0,0 +1,7 @@
+import type { ProviderProps } from './types.js';
+
+export function shouldTryAutoConnect(
+  props: Pick<ProviderProps, 'allBlockChains' | 'autoConnect'>
+): boolean {
+  return !!props.allBlockChains?.length && !!props.autoConnect;
+}

package/src/provider.tsx

@@ -3,13 +3,13 @@ import type { ProviderProps } from './legacy/types.js';
 import React from 'react';
 
 import { WalletContext } from './legacy/context.js';
-import { useLegacyProviders } from './legacy/useLegacyProviders.js';
+import { useProviders } from './useProviders.js';
 
 function Provider(props: ProviderProps) {
-  const legacyApi = useLegacyProviders(props);
+  const api = useProviders(props);
 
   return (
-    <WalletContext.Provider value={legacyApi}>
+    <WalletContext.Provider value={api}>
       {props.children}
     </WalletContext.Provider>
   );

package/src/test-utils/env.ts

@@ -0,0 +1,10 @@
+const TEST_ENVIRONMENT_AGENT = 'HappyDOM/0.0.0';
+
+/**
+ * Detecting wether our code is running in a test environment or not.
+ *
+ * Note: This is only useful when HappyDOM or jsdom has been added to test runner.
+ */
+export function isRunningInTestEnvironmentWithDom(): boolean {
+  return navigator.userAgent.includes(TEST_ENVIRONMENT_AGENT);
+}

package/src/test-utils/fixtures.ts

@@ -0,0 +1,238 @@
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
+import type { BlockchainMeta, GenericSigner } from 'rango-types';
+import type { EvmTransaction } from 'rango-types/mainApi';
+
+import { DefaultSignerFactory, TransactionType } from 'rango-types';
+
+export const legacyAddress = '0x000000000000000000000000000000000000dead';
+
+export class MockEvmSigner implements GenericSigner<EvmTransaction> {
+  async signMessage(
+    _msg: string,
+    _address: string,
+    _chainId: string | null
+  ): Promise<string> {
+    return '0x';
+  }
+  async signAndSendTx(
+    _tx: EvmTransaction,
+    _address: string,
+    _chainId: string | null
+  ): Promise<{ hash: string; response?: any }> {
+    return {
+      hash: '0x',
+    };
+  }
+}
+
+export const legacyProvider: LegacyProviderInterface = {
+  config: {
+    type: 'legacy-garbage',
+  },
+  async connect({ network }) {
+    // we added a timeout to simulate requesting to extension for connection.
+    return await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        // This is useful for simulating error scenarios.
+        if (network === 'When Airdrop?') {
+          reject(
+            'please stay tuned we shall announce the detailed information soon.'
+          );
+        } else {
+          resolve([
+            {
+              accounts: [legacyAddress],
+              chainId: network || '',
+            },
+          ]);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      }, 10);
+    });
+  },
+  getInstance() {
+    return {};
+  },
+  async getSigners() {
+    const signers = new DefaultSignerFactory();
+    signers.registerSigner(TransactionType.EVM, new MockEvmSigner());
+    return signers;
+  },
+  getWalletInfo() {
+    return {
+      name: 'legacy garbage wallet',
+      color: '#000',
+      img: 'https://...',
+      installLink: 'https://...',
+      supportedChains: [],
+    };
+  },
+};
+
+export const blockchainsMeta: BlockchainMeta[] = [
+  {
+    name: 'BTC',
+    defaultDecimals: 8,
+    addressPatterns: [
+      '^[13][a-km-zA-HJ-NP-Z1-9]{25,34}$|^(bc1)[0-9A-Za-z]{39,59}$',
+    ],
+    feeAssets: [
+      {
+        blockchain: 'BTC',
+        symbol: 'BTC',
+        address: null,
+      },
+    ],
+    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/BTC/icon.svg',
+    displayName: 'Bitcoin',
+    shortName: 'BTC',
+    sort: 12,
+    color: '#F7931A',
+    enabled: true,
+    type: TransactionType.TRANSFER,
+    chainId: null,
+    info: {
+      infoType: 'TransferMetaInfo',
+      blockExplorerUrls: ['https://www.blockchain.com/btc/'],
+      addressUrl: 'https://www.blockchain.com/btc/address/{wallet}',
+      transactionUrl: 'https://www.blockchain.com/btc/tx/{txHash}',
+    },
+  },
+  {
+    name: 'ETH',
+    defaultDecimals: 18,
+    addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'],
+    feeAssets: [
+      {
+        blockchain: 'ETH',
+        symbol: 'ETH',
+        address: null,
+      },
+    ],
+    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/ETH/icon.svg',
+    displayName: 'Ethereum',
+    shortName: 'ETH',
+    sort: 0,
+    color: '#ecf0f1',
+    enabled: true,
+    type: TransactionType.EVM,
+    chainId: '0x1',
+    info: {
+      infoType: 'EvmMetaInfo',
+      chainName: 'Ethereum Mainnet',
+      nativeCurrency: {
+        name: 'ETH',
+        symbol: 'ETH',
+        decimals: 18,
+      },
+      rpcUrls: ['https://rpc.ankr.com/eth'],
+      blockExplorerUrls: ['https://etherscan.io'],
+      addressUrl: 'https://etherscan.io/address/{wallet}',
+      transactionUrl: 'https://etherscan.io/tx/{txHash}',
+      enableGasV2: true,
+    },
+  },
+  {
+    name: 'SOLANA',
+    defaultDecimals: 9,
+    addressPatterns: ['^[1-9A-HJ-NP-Za-km-z]{32,44}$'],
+    feeAssets: [
+      {
+        blockchain: 'SOLANA',
+        symbol: 'SOL',
+        address: null,
+      },
+    ],
+    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/SOLANA/icon.svg',
+    displayName: 'Solana',
+    shortName: 'Solana',
+    sort: 20,
+    color: '#708DD2',
+    enabled: true,
+    type: TransactionType.SOLANA,
+    chainId: 'mainnet-beta',
+    info: {
+      infoType: 'SolanaMetaInfo',
+      blockExplorerUrls: ['https://solscan.io/'],
+      addressUrl: 'https://solscan.io/account/{wallet}',
+      transactionUrl: 'https://solscan.io/tx/{txHash}',
+    },
+  },
+  {
+    name: 'COSMOS',
+    defaultDecimals: 6,
+    addressPatterns: ['^(cosmos1)[0-9a-z]{38}$'],
+    feeAssets: [
+      {
+        blockchain: 'COSMOS',
+        symbol: 'ATOM',
+        address: null,
+      },
+    ],
+    logo: 'https://raw.githubusercontent.com/rango-exchange/assets/main/blockchains/COSMOS/icon.svg',
+    displayName: 'Cosmos',
+    shortName: 'Cosmos',
+    sort: 15,
+    color: '#2E3148',
+    enabled: true,
+    type: TransactionType.COSMOS,
+    chainId: 'cosmoshub-4',
+    info: {
+      infoType: 'CosmosMetaInfo',
+      experimental: false,
+      rpc: 'https://cosmos-rpc.polkachu.com',
+      rest: 'https://lcd-cosmoshub.blockapsis.com',
+      cosmostationLcdUrl: 'https://lcd-cosmoshub.blockapsis.com',
+      cosmostationApiUrl: 'https://cosmos-rpc.polkachu.com',
+      cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/',
+      mintScanName: 'cosmos',
+      chainName: 'Cosmos',
+      stakeCurrency: {
+        coinDenom: 'ATOM',
+        coinMinimalDenom: 'uatom',
+        coinDecimals: 6,
+        coinGeckoId: 'cosmos',
+        coinImageUrl: '/tokens/blockchain/cosmos.svg',
+      },
+      bip44: {
+        coinType: 118,
+      },
+      bech32Config: {
+        bech32PrefixAccAddr: 'cosmos',
+        bech32PrefixAccPub: 'cosmospub',
+        bech32PrefixValAddr: 'cosmosvaloper',
+        bech32PrefixValPub: 'cosmosvaloperpub',
+        bech32PrefixConsAddr: 'cosmosvalcons',
+        bech32PrefixConsPub: 'cosmosvalconspub',
+      },
+      currencies: [
+        {
+          coinDenom: 'ATOM',
+          coinMinimalDenom: 'uatom',
+          coinDecimals: 6,
+          coinGeckoId: 'cosmos',
+          coinImageUrl: '/tokens/blockchain/cosmos.svg',
+        },
+      ],
+      feeCurrencies: [
+        {
+          coinDenom: 'ATOM',
+          coinMinimalDenom: 'uatom',
+          coinDecimals: 6,
+          coinGeckoId: 'cosmos',
+          coinImageUrl: '/tokens/blockchain/cosmos.svg',
+        },
+      ],
+      features: ['stargate', 'ibc-transfer'],
+      explorerUrlToTx: 'https://www.mintscan.io/cosmos/txs/{txHash}',
+      gasPriceStep: {
+        low: 0.01,
+        average: 0.025,
+        high: 0.04,
+      },
+      blockExplorerUrls: ['https://www.mintscan.io/cosmos/'],
+      addressUrl: 'https://www.mintscan.io/cosmos/account/{wallet}',
+      transactionUrl: 'https://www.mintscan.io/cosmos/txs/{txHash}',
+    },
+  },
+];

package/src/useProviders.ts

@@ -0,0 +1,120 @@
+import type {
+  ExtendedWalletInfo,
+  ProviderContext,
+  ProviderProps,
+  Providers,
+} from './index.js';
+import type { ConnectResult } from './legacy/mod.js';
+import type { LegacyState } from '@rango-dev/wallets-core/legacy';
+import type { SignerFactory } from 'rango-types';
+
+import {
+  findProviderByType,
+  separateLegacyAndHubProviders,
+  useHubAdapter,
+} from './hub/mod.js';
+import { useLegacyProviders } from './legacy/mod.js';
+
+/*
+ * We have two separate interface for our providers: legacy and hub.
+ * This hook sits between this two interface by keeping old interface as main API and try to add Hub providers by using an adapter.
+ * For gradual migrating and backward compatibility, we are supporting hub by an adapter besides of the old one.
+ */
+function useProviders(props: ProviderProps) {
+  const { providers, ...restProps } = props;
+  const [legacyProviders, hubProviders] = separateLegacyAndHubProviders(
+    providers,
+    {
+      isExperimentalEnabled: restProps.configs?.isExperimentalEnabled,
+    }
+  );
+
+  const legacyApi = useLegacyProviders({
+    ...restProps,
+    providers: legacyProviders,
+  });
+  const hubApi = useHubAdapter({
+    ...restProps,
+    providers: hubProviders,
+    allVersionedProviders: providers,
+  });
+
+  const api: ProviderContext = {
+    canSwitchNetworkTo(type, network): boolean {
+      if (findProviderByType(hubProviders, type)) {
+        return hubApi.canSwitchNetworkTo(type, network);
+      }
+      return legacyApi.canSwitchNetworkTo(type, network);
+    },
+    async connect(type, network): Promise<ConnectResult[]> {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return await hubApi.connect(type, network);
+      }
+
+      return await legacyApi.connect(type, network);
+    },
+    async disconnect(type): Promise<void> {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return await hubApi.disconnect(type);
+      }
+
+      return await legacyApi.disconnect(type);
+    },
+    async disconnectAll() {
+      return await Promise.allSettled([
+        hubApi.disconnectAll(),
+        legacyApi.disconnectAll(),
+      ]);
+    },
+    async getSigners(type): Promise<SignerFactory> {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return hubApi.getSigners(type);
+      }
+      return legacyApi.getSigners(type);
+    },
+    getWalletInfo(type): ExtendedWalletInfo {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return hubApi.getWalletInfo(type);
+      }
+
+      return legacyApi.getWalletInfo(type);
+    },
+    providers(): Providers {
+      let output: Providers = {};
+      if (hubProviders.length > 0) {
+        output = { ...output, ...hubApi.providers() };
+      }
+      if (legacyProviders.length > 0) {
+        output = { ...output, ...legacyApi.providers() };
+      }
+
+      return output;
+    },
+    state(type): LegacyState {
+      const hubProvider = findProviderByType(hubProviders, type);
+
+      if (hubProvider) {
+        return hubApi.state(type);
+      }
+
+      return legacyApi.state(type);
+    },
+    async suggestAndConnect(type, network): Promise<ConnectResult> {
+      const hubProvider = findProviderByType(hubProviders, type);
+
+      if (hubProvider) {
+        return hubApi.suggestAndConnect(type, network);
+      }
+
+      return await legacyApi.suggestAndConnect(type, network);
+    },
+  };
+
+  return api;
+}
+
+export { useProviders };

package/dist/legacy/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const LAST_CONNECTED_WALLETS = "last-connected-wallets";
-//# sourceMappingURL=constants.d.ts.map

package/dist/legacy/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/legacy/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,2BAA2B,CAAC"}

package/src/legacy/constants.ts

@@ -1 +0,0 @@
-export const LAST_CONNECTED_WALLETS = 'last-connected-wallets';