Merge pull request #1 from noble-assets/fix/custom-chains-and-eslint

fix: improve custom chains provisioning and eslint conflicts

.eslintrc

@@ -1,4 +1,4 @@
 {
   "root": true,
-  "extends": ["react-app", "plugin:prettier/recommended", "./.eslintrc.base"]
+  "extends": ["react-app", "./.eslintrc.base", "plugin:prettier/recommended"]
 }

example-next/.eslintrc.cjs

@@ -26,6 +26,8 @@ const config = {
         argsIgnorePattern: '^_',
       },
     ],
+    'jsx-quotes': 'off',
+    'import/no-default-export': 'off',
     '@typescript-eslint/require-await': 'off',
     '@typescript-eslint/no-misused-promises': [
       'error',

example-next/src/app/wallets/mynearwallet/page.tsx

@@ -40,7 +40,7 @@ export default function NearPage() {
 
   return (
     <div>
-      <h1 className='text-lg font-semibold'>Oh, I see you're trying to connect to My Near Wallet.</h1>
+      <h1 className='text-lg font-semibold'>Oh, I see you are trying to connect to My Near Wallet.</h1>
       <h2 className='text-center text-neutral-300 mt-2'>Please wait...</h2>
     </div>
   );

example-next/src/components/ConnectedAccounts.tsx

@@ -1,5 +1,5 @@
 import {
-  ConnectedAccount,
+  type ConnectedAccount,
   useAccounts,
   useChain,
   useConnect,

example-next/src/components/Example.tsx

@@ -1,5 +1,5 @@
 import {
-  ChainId,
+  type ChainId,
   useChain,
   useChains,
   useCurrentAccount,

example-next/src/components/Providers.tsx

@@ -1,10 +1,10 @@
 'use client';
-import { CosmsosChainType, TangledContextProvider, solana } from '@noble-assets/tangled-react';
+import { type CosmosChainType, TangledContextProvider, solana } from '@noble-assets/tangled-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
-const dydx: CosmsosChainType = {
+const dydx: CosmosChainType = {
   id: 'dydx-mainnet-1' as `${string}-${number}`,
   chainName: 'dydx',
   name: 'dYdX',

example-next/src/components/Tokens.tsx

@@ -1,4 +1,4 @@
-import { ETH_ADDRESS, SOL_ADDRESS, TokenMetadata, useChain, useToken } from '@noble-assets/tangled-react';
+import { ETH_ADDRESS, SOL_ADDRESS, type TokenMetadata, useChain, useToken } from '@noble-assets/tangled-react';
 
 export const Tokens = () => {
   return (

packages/react/package.json

@@ -50,11 +50,11 @@
     "@near-wallet-selector/my-near-wallet": "^8.9.13",
     "@near-wallet-selector/near-mobile-wallet": "^8.9.13",
     "@near-wallet-selector/wallet-connect": "^8.9.13",
+    "@noble-assets/tangled-solana-react": "^1.0.0",
     "@safe-global/safe-apps-sdk": "^9.0.0",
     "@solana/spl-token": "^0.4.8",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/web3.js": "^1.94.0",
-    "@noble-assets/tangled-solana-react": "^1.0.0",
     "@tanstack/react-query": "^5.59.20",
     "@wagmi/core": "^2.11.0",
     "detect-browser": "^5.3.0",

packages/react/src/actions/cosmos/getCosmosToken.ts

@@ -1,6 +1,6 @@
 import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
 import { maxInt256 } from 'viem';
-import { ChainData, ConnectionOrConfig, CosmsosChainType } from '../../types/index.js';
+import { ChainData, ConnectionOrConfig, CosmosChainType } from '../../types/index.js';
 import { areTokensEqual, formatTokenAddress, isNativeOrFactoryToken } from '../../utils/index.js';
 
 export const getCosmosTokenMetadata = async ({
@@ -9,7 +9,7 @@ export const getCosmosTokenMetadata = async ({
   getCosmosClient,
 }: {
   token: string;
-  chain: CosmsosChainType;
+  chain: CosmosChainType;
   getCosmosClient: ConnectionOrConfig['getCosmosClient'];
 }) => {
   const registryClient = await getCosmosClient().getChainRegistry();

packages/react/src/chains/injective.ts

@@ -1,6 +1,6 @@
-import { CosmsosChainType } from '../types/index.js';
+import { CosmosChainType } from '../types/index.js';
 
-export const injective: CosmsosChainType = {
+export const injective: CosmosChainType = {
   id: 'injective-1',
   name: 'Injective',
   type: 'cosmos',

packages/react/src/chains/noble.ts

@@ -1,6 +1,6 @@
-import { CosmsosChainType } from '../types/index.js';
+import { CosmosChainType } from '../types/index.js';
 
-export const noble: CosmsosChainType = {
+export const noble: CosmosChainType = {
   id: 'noble-1',
   chainName: 'noble',
   name: 'Noble',

packages/react/src/chains/osmosis.ts

@@ -1,6 +1,6 @@
-import { CosmsosChainType } from '../types/index.js';
+import { CosmosChainType } from '../types/index.js';
 
-export const osmosis: CosmsosChainType = {
+export const osmosis: CosmosChainType = {
   id: 'osmosis-1',
   chainName: 'osmosis',
   name: 'Osmosis',

packages/react/src/providers/CosmosProvider.tsx

@@ -18,7 +18,7 @@ import { createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand';
 import { useTangledConfig } from '../hooks/useTangledConfig.js';
 import { CosmosStore, createCosmosStore } from '../store/Cosmos.js';
-import { CosmsosChainType } from '../types/index.js';
+import { CosmosChainType } from '../types/index.js';
 import { RemoveReadonly } from '../types/utils.js';
 
 export interface CosmosContextValues {
@@ -43,7 +43,7 @@ export const CosmosContextProvider = ({
   chains,
 }: {
   children: React.ReactNode;
-  chains: CosmsosChainType[];
+  chains: CosmosChainType[];
 }) => {
   const tangledConfig = useTangledConfig((state) => state.config);
   const cosmosStore = useRef(createCosmosStore(chains)).current;

packages/react/src/store/Cosmos.ts

@@ -5,7 +5,7 @@ import {
   ChainRegistryClient as CosmosChainRegistryClient,
   getCosmosChainRegistryClient,
 } from '../actions/cosmos/getCosmosChainRegistryClient.js';
-import { ChainData, CosmsosChainType } from '../types/index.js';
+import { ChainData, CosmosChainType } from '../types/index.js';
 
 export type GetCosmosClient = () => {
   walletManager: WalletManager | undefined;
@@ -55,7 +55,7 @@ export const createCosmosStore = (chains: ChainData[]) => {
         if (get().chainRegistry) return get().chainRegistry!;
 
         const chainRegistry = await getCosmosChainRegistryClient(
-          chains.map((chain) => (chain as CosmsosChainType).chainName.toString()),
+          chains.map((chain) => (chain as CosmosChainType).chainName.toString()),
         );
 
         set(() => ({ chainRegistry: chainRegistry }));

packages/react/src/types/index.ts

@@ -52,7 +52,7 @@ export interface SuiChainType extends ChainDataGeneric {
   type: Extract<'sui', ChainType>;
   suiNetwork: 'mainnet' | 'testnet' | 'devnet' | 'localnet';
 }
-export interface CosmsosChainType extends ChainDataGeneric {
+export interface CosmosChainType extends ChainDataGeneric {
   type: Extract<'cosmos', ChainType>;
   chainName: string;
   evmId?: string;
@@ -65,7 +65,7 @@ export type OtherChainData<T extends ChainType = OtherChainTypes> = ChainDataGen
 };
 
 // Chain data discriminated union for all supported chains
-export type ChainData = EVMChain | SuiChainType | CosmsosChainType | OtherChainData;
+export type ChainData = EVMChain | SuiChainType | CosmosChainType | OtherChainData;
 
 export type SupportedChainsByType = {
   [K in ChainData as K['type']]: K[];

packages/react/src/utils/createChainConfigs.ts

@@ -1,5 +1,13 @@
-import { CHAIN_DATA, CHAIN_NAME } from '../constants/index.js';
-import { Chain, ChainConfig, ChainData, ChainId, SupportedChainsByType } from '../types/index.js';
+import type {
+  Chain,
+  ChainConfig,
+  CosmosChainType,
+  EVMChain,
+  OtherChainData,
+  OtherChainTypes,
+  SuiChainType,
+  SupportedChainsByType,
+} from '../types/index.js';
 import getDefaultSupportedChains from './getDefaultSupportedChains.js';
 
 const createChainConfigs = (
@@ -11,24 +19,32 @@ const createChainConfigs = (
 
 const overrideChainConfig = (
   chainsByType: Partial<SupportedChainsByType>,
-  overrides: Partial<Record<Chain, ChainConfig>> | undefined,
+  overrides: Partial<Record<string, ChainConfig>> | undefined,
 ) => {
   const supportedChains = getDefaultSupportedChains();
 
-  for (const chains of Object.values(chainsByType)) {
-    for (const chain of chains) {
-      if (supportedChains[chain.type].some((c) => c.id === chain.id)) {
-        continue;
+  for (const [type, chains] of Object.entries(chainsByType)) {
+    if (chains?.length) {
+      const customChains = chains.map((chain) => {
+        return {
+          ...chain,
+          ...overrides?.[chain.name],
+        };
+      });
+      switch (type) {
+        case 'cosmos':
+          supportedChains.cosmos = customChains as CosmosChainType[];
+          break;
+        case 'evm':
+          supportedChains.evm = customChains as EVMChain[];
+          break;
+        case 'sui':
+          supportedChains.sui = customChains as SuiChainType[];
+          break;
+        default:
+          supportedChains[type as OtherChainTypes] = customChains as OtherChainData[];
+          break;
       }
-      // todo: simplify... this is a bit redundant
-      const chainId = chain.id.toString() as ChainId;
-      const chainData = {
-        ...(CHAIN_DATA[chainId] ?? chain),
-        ...overrides?.[CHAIN_NAME[chainId] ?? chain.name],
-      } as ChainData;
-
-      // @ts-expect-error - resolves to never
-      supportedChains[chain.type].push(chainData);
     }
   }
 

packages/react/src/utils/getDefaultSupportedChains.ts

@@ -4,7 +4,7 @@ import * as evm from '../chains/evm.js';
 import { near } from '../chains/near.js';
 import { solana } from '../chains/solana.js';
 import { sui } from '../chains/sui.js';
-import { CosmsosChainType, EVMChain, OtherChainData, SuiChainType, SupportedChainsByType } from '../types/index.js';
+import { SupportedChainsByType } from '../types/index.js';
 
 const getDefaultSupportedChains = (): SupportedChainsByType => {
   const supportedChains: SupportedChainsByType = {
@@ -34,12 +34,12 @@ const getDefaultSupportedChains = (): SupportedChainsByType => {
     evm.polygonZkEvm,
     evm.scroll,
     evm.zkSync,
-  ] as EVMChain[];
-  supportedChains.cosmos = [cosmos.osmosis, cosmos.injective, cosmos.noble] as CosmsosChainType[];
-  supportedChains.solana = [solana] as OtherChainData<'solana'>[];
-  supportedChains.sui = [sui] as SuiChainType[];
-  supportedChains.near = [near] as OtherChainData<'near'>[];
-  supportedChains.bitcoin = [bitcoin] as OtherChainData<'bitcoin'>[];
+  ];
+  supportedChains.cosmos = [cosmos.osmosis, cosmos.injective, cosmos.noble];
+  supportedChains.solana = [solana];
+  supportedChains.sui = [sui];
+  supportedChains.near = [near];
+  supportedChains.bitcoin = [bitcoin];
 
   return supportedChains;
 };