Refactor/yeet-chaindataprovider-from-frontend (#1714)

* refactor: use subscription message for tokens

* refactor: use subscription message for evm networks

* refactor: use subscription message for chains

* chore: remove chaindata requirement from getFrontendTypeRegistry function

* refactor: replace remaining use of chaindataprovider on frontend

* chore: mock api calls and remove extraneous token data from ethereumnetworks api response

* chore: changeset

* chore: remove chaindata hydration test

.changeset/spicy-goats-tease.md

@@ -0,0 +1,5 @@
+---
+"@talismn/chaindata-provider": patch
+---
+
+Change types for EVM network to allow 'SimpleEvmNetwork' type for use in frontend

apps/extension/src/ui/api/types.ts

@@ -2,7 +2,14 @@ import type { KeyringPair$Json } from "@polkadot/keyring/types"
 import type { HexString } from "@polkadot/util/types"
 import { KeypairType } from "@polkadot/util-crypto/types"
 import { Address, BalanceJson } from "@talismn/balances"
-import { ChainId, EvmNetworkId, TokenId } from "@talismn/chaindata-provider"
+import {
+  Chain,
+  ChainId,
+  CustomChain,
+  EvmNetworkId,
+  Token,
+  TokenId,
+} from "@talismn/chaindata-provider"
 import { NsLookupType } from "@talismn/on-chain-id"
 import { DbTokenRates } from "@talismn/token-rates"
 import { MetadataDef } from "inject/substrate/types"
@@ -51,6 +58,7 @@ import {
   SignerPayloadGenesisHash,
   SignerPayloadJSON,
   SigningRequestID,
+  SimpleEvmNetwork,
   UnsubscribeFn,
   ValidRequests,
   WalletTransactionTransferInfo,
@@ -207,7 +215,7 @@ export default interface MessageTypes {
   ) => UnsubscribeFn
 
   // chain message types
-  chains: (cb: () => void) => UnsubscribeFn
+  chains: (cb: (chains: Array<Chain | CustomChain>) => void) => UnsubscribeFn
   chainUpsert: (chain: RequestUpsertCustomChain) => Promise<boolean>
   chainRemove: (id: string) => Promise<boolean>
   chainReset: (id: string) => Promise<boolean>
@@ -218,7 +226,7 @@ export default interface MessageTypes {
   ) => Promise<HexString>
 
   // token message types
-  tokens: (cb: () => void) => UnsubscribeFn
+  tokens: (cb: (tokens: Token[]) => void) => UnsubscribeFn
 
   // tokenRates message types
   tokenRates: (cb: (rates: DbTokenRates[]) => void) => UnsubscribeFn
@@ -302,7 +310,7 @@ export default interface MessageTypes {
   ethNetworkAddCancel: (is: AddEthereumChainRequestId) => Promise<boolean>
 
   // ethereum networks message types
-  ethereumNetworks: (cb: () => void) => UnsubscribeFn
+  ethereumNetworks: (cb: (networks: Array<SimpleEvmNetwork>) => void) => UnsubscribeFn
   ethNetworkUpsert: (network: RequestUpsertCustomEvmNetwork) => Promise<boolean>
   ethNetworkRemove: (id: string) => Promise<boolean>
   ethNetworkReset: (id: string) => Promise<boolean>

apps/extension/src/ui/apps/dashboard/routes/Networks/EvmNetworksList.tsx

@@ -8,7 +8,7 @@ import { useNavigate } from "react-router-dom"
 import { useIntersection } from "react-use"
 import { Button, ListButton, Modal, ModalDialog, Radio, Toggle, useOpenClose } from "talisman-ui"
 
-import { activeEvmNetworksStore, EvmNetwork, isEvmNetworkActive } from "@extension/core"
+import { activeEvmNetworksStore, isEvmNetworkActive, SimpleEvmNetwork } from "@extension/core"
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
 import { sendAnalyticsEvent } from "@ui/api/analytics"
 import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
@@ -134,7 +134,7 @@ export const EvmNetworksList = ({ search }: { search?: string }) => {
   const [filteredEvmNetworks, exactMatches] = useMemo(() => {
     const lowerSearch = search?.toLowerCase() ?? ""
 
-    const filter = (network: EvmNetwork) => {
+    const filter = (network: SimpleEvmNetwork) => {
       if (!lowerSearch)
         return (
           network.isDefault ||
@@ -174,7 +174,7 @@ export const EvmNetworksList = ({ search }: { search?: string }) => {
   }, [exactMatches, filteredEvmNetworks])
 
   const handleNetworkActiveChanged = useCallback(
-    (network: EvmNetwork) => (enable: boolean) => {
+    (network: SimpleEvmNetwork) => (enable: boolean) => {
       activeEvmNetworksStore.setActive(network.id, enable)
     },
     [],
@@ -240,7 +240,7 @@ const EvmNetworksListItem = ({
   isActive: isActive,
   onEnableChanged,
 }: {
-  network: EvmNetwork
+  network: SimpleEvmNetwork
   isActive: boolean
   onEnableChanged: (enable: boolean) => void
 }) => {

apps/extension/src/ui/apps/dashboard/routes/Tokens/TokensPage.tsx

@@ -1,4 +1,4 @@
-import { CustomEvmNetwork, EvmNetwork, EvmNetworkId, Token } from "@talismn/chaindata-provider"
+import { EvmNetworkId, SimpleEvmNetwork, Token } from "@talismn/chaindata-provider"
 import { MoreHorizontalIcon, PlusIcon } from "@talismn/icons"
 import sortBy from "lodash/sortBy"
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -172,7 +172,7 @@ const TokensTable: FC<{ tokens: Token[] }> = ({ tokens }) => {
   )
 }
 
-const renderNetwork = (network: EvmNetwork | CustomEvmNetwork) => {
+const renderNetwork = (network: SimpleEvmNetwork) => {
   return (
     <div className="flex items-center gap-5">
       <NetworkLogo ethChainId={network.id} className="text-[1.25em]" />
@@ -186,11 +186,11 @@ const NetworkSelect = ({
   selectedId,
   onChange,
 }: {
-  networks: (EvmNetwork | CustomEvmNetwork)[]
+  networks: SimpleEvmNetwork[]
   selectedId: EvmNetworkId | null
   onChange: (evmNetworkId: EvmNetworkId) => void
 }) => {
-  const [selected, setSelected] = useState<EvmNetwork | CustomEvmNetwork | undefined>(
+  const [selected, setSelected] = useState<SimpleEvmNetwork | undefined>(
     networks.find((n) => n.id === selectedId),
   )
 
@@ -204,7 +204,7 @@ const NetworkSelect = ({
   }, [selectedId, networks, selected])
 
   const handleChange = useCallback(
-    (item: EvmNetwork | CustomEvmNetwork | null) => {
+    (item: SimpleEvmNetwork | null) => {
       if (!item) return
       setSelected(item)
       if (onChange) onChange(item.id)
@@ -253,7 +253,7 @@ const Content = () => {
   const toggleIsHidePools = useCallback(() => setIsHidePools((prev) => !prev), [])
 
   const networkOptions = useMemo(() => {
-    return [{ id: "ALL", name: "All networks" } as EvmNetwork, ...sortBy(evmNetworks, "name")]
+    return [{ id: "ALL", name: "All networks" } as SimpleEvmNetwork, ...sortBy(evmNetworks, "name")]
   }, [evmNetworks])
   const [evmNetworkId, setEvmNetworkId] = useState<EvmNetworkId>("ALL")
 

apps/extension/src/ui/domains/Ethereum/NetworkSelect.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react"
 import { Dropdown } from "talisman-ui"
 
-import { CustomEvmNetwork, EvmNetwork, EvmNetworkId } from "@extension/core"
+import { EvmNetworkId, SimpleEvmNetwork } from "@extension/core"
 import { useSortedEvmNetworks } from "@ui/hooks/useSortedEvmNetworks"
 
 import { NetworkLogo } from "./NetworkLogo"
@@ -15,7 +15,7 @@ type NetworkSelectProps = {
   withTestnets: boolean
 }
 
-const renderNetwork = (network: EvmNetwork | CustomEvmNetwork) => {
+const renderNetwork = (network: SimpleEvmNetwork) => {
   return (
     <div className="flex items-center gap-5">
       <NetworkLogo ethChainId={network.id} className="text-[1.25em]" />
@@ -33,7 +33,7 @@ export const NetworkSelect = ({
   withTestnets,
 }: NetworkSelectProps) => {
   const networks = useSortedEvmNetworks(withTestnets)
-  const [selected, setSelected] = useState<EvmNetwork | CustomEvmNetwork | undefined>(
+  const [selected, setSelected] = useState<SimpleEvmNetwork | undefined>(
     networks.find((n) => n.id === defaultChainId),
   )
 
@@ -47,7 +47,7 @@ export const NetworkSelect = ({
   }, [defaultChainId, networks, selected])
 
   const handleChange = useCallback(
-    (item: EvmNetwork | CustomEvmNetwork | null) => {
+    (item: SimpleEvmNetwork | null) => {
       if (!item) return
       setSelected(item)
       if (onChange) onChange(item.id)