Migrated app.config.chain.getById() calls to newer trpc.community.getCommunity() + cleanup/state-refactor of related components

common_knowledge/App-Initialization-Flow.md

@@ -31,9 +31,9 @@ The goal of this document is to describe the current state of the app initializa
     2. This `Layout` component includes a nested `Suspense` component (via the `react` library) and `ErrorBoundary` component (via the `react-error-boundary` library).
     3. The `LayoutComponent` operates as follows:
         1. If, _at render time_, `app.loadingError` is set, display an application error.
-        2. If, _at render time_, `app.config.chains.getById(scope)` does not return successfully, render a `PageNotFound` view.
-        3. If, _at render time_, there is no `selectedScope`, and no custom domain, then whatever chain is currently being loaded is deinitialized by `deinitChainOrCommunity`, and the `ScopeToLoad` state variable set to `null`. A loading spinner is shown, triggered by `shouldShowLoadingState`.
-        4. If, _at render time_, the `selectedScope` differs from `app.activeChainId()`, the `isLoading` and `scopeToLoad` global state variables are updated (to `true` and `selectedScope`, respectively). `selectChain()` is fired, receiving new scope's chain as argument; on completion, the `isLoading` state variable is set to `false`.
+        2. If, _at render time_, `useGetCommunityByIdQuery(scope)` does not return successfully, render a `PageNotFound` view.
+        3. If, _at render time_, there is no `providedCommunityScope`, and no custom domain, then whatever chain is currently being loaded is deinitialized by `deinitChainOrCommunity`, and the `communityToLoad` state variable set to `null`. A loading spinner is shown, triggered by `shouldShowLoadingState`.
+        4. If, _at render time_, the `providedCommunityScope` differs from `app.activeChainId()`, the `isLoading` and `communityToLoad` global state variables are updated (to `true` and `providedCommunityScope`, respectively). `selectChain()` is fired, receiving new scope's chain as argument; on completion, the `isLoading` state variable is set to `false`.
         5. If none of these conditions apply, the routed-to page is rendered.
 9. If `selectChain()` (`/helpers/chain.ts`) is fired, per step #8:
     1. If no `chain` argument is passed, the function defaults to a `chain` value set my `app.user.selectedChain`, or else 'edgeware'.
@@ -66,4 +66,4 @@ The goal of this document is to describe the current state of the app initializa
 
 ## Change Log
 
-- 230810: Authored by Graham Johnson (#4763).
+- 230810: Authored by Graham Johnson (#4763).

libs/model/src/community/GetCommunity.query.ts

@@ -24,6 +24,7 @@ export function GetCommunity(): Query<typeof schemas.GetCommunity> {
           ],
         },
       ];
+
       if (payload.include_node_info) {
         include.push({
           model: models.ChainNode,

libs/model/src/community/GetStakeTransaction.query.ts

@@ -33,10 +33,12 @@ export function GetStakeTransaction(): Query<
            'default_symbol', c.default_symbol,
            'icon_url', c.icon_url,
            'name', c.name,
-           'chain_node_id', c.chain_node_id
+           'chain_node_id', c.chain_node_id,
+           'chain_node_name', cn.name
          ) AS community
        FROM "StakeTransactions" AS t
        LEFT JOIN "Communities" AS c ON c.id = t.community_id
+       LEFT JOIN "ChainNodes" AS cn ON cn.id = c.chain_node_id
        LEFT JOIN "CommunityStakes" AS cs ON cs.community_id = t.community_id
        ${addressFilter}
       `,

libs/schemas/src/entities/community.schemas.ts

@@ -20,7 +20,7 @@ export const Community = z.object({
   name: z.string(),
   chain_node_id: PG_INT,
   default_symbol: z.string().default(''),
-  network: z.nativeEnum(ChainNetwork).default(ChainNetwork.Ethereum),
+  network: z.string().default(ChainNetwork.Ethereum),
   base: z.nativeEnum(ChainBase),
   icon_url: z.string().nullish(),
   active: z.boolean(),
@@ -68,5 +68,17 @@ export const Community = z.object({
   contest_managers: z.array(ContestManager).optional(),
 });
 
+export const ExtendedCommunity = Community.extend({
+  numVotingThreads: PG_INT,
+  numTotalThreads: PG_INT,
+  adminsAndMods: z.array(
+    z.object({
+      address: z.string(),
+      role: z.enum(['admin', 'moderator']),
+    }),
+  ),
+  communityBanner: z.string().nullish(),
+});
+
 // aliases
 export const Chain = Community;

libs/schemas/src/queries/community.schemas.ts

@@ -4,7 +4,12 @@ import {
   MIN_SCHEMA_INT,
 } from '@hicommonwealth/shared';
 import { z } from 'zod';
-import { Community, CommunityMember, CommunityStake } from '../entities';
+import {
+  Community,
+  CommunityMember,
+  CommunityStake,
+  ExtendedCommunity,
+} from '../entities';
 import { PG_INT } from '../utils';
 import { PaginatedResultSchema, PaginationParamsSchema } from './pagination';
 
@@ -36,17 +41,7 @@ export const GetCommunity = {
     id: z.string(),
     include_node_info: z.boolean().optional(),
   }),
-  output: Community.extend({
-    numVotingThreads: PG_INT,
-    numTotalThreads: PG_INT,
-    adminsAndMods: z.array(
-      z.object({
-        address: z.string(),
-        role: z.enum(['admin', 'moderator']),
-      }),
-    ),
-    communityBanner: z.string().optional(),
-  }).optional(),
+  output: ExtendedCommunity,
 };
 
 export const GetCommunityStake = {
@@ -106,6 +101,7 @@ export const GetStakeTransaction = {
         icon_url: z.string().nullish(),
         name: z.string(),
         chain_node_id: PG_INT.nullish(),
+        chain_node_name: z.string().nullish(),
       }),
     })
     .array(),

libs/shared/src/types/protocol.ts

@@ -127,51 +127,26 @@ export enum CommunityCategoryType {
   DAO = 'DAO',
 }
 
-// TODO: remove many of these chain networks, esp substrate (make them all "Substrate"),
-// and just use id to identify specific chains for conditionals
+// This enum represents known values for the "network" field on Community, which can be used for
+// switched functionality against specific groups of communities (so we could e.g. group together all
+// communities on a specific testnet, or all ERC20s). In practice this field is deprecated, and should be
+// removed, but these following values remain as either defaults or for custom integration support.
 export enum ChainNetwork {
+  Ethereum = 'ethereum',
+  ERC20 = 'erc20',
+  ERC721 = 'erc721',
+  ERC1155 = 'erc1155',
   Edgeware = 'edgeware',
-  EdgewareTestnet = 'edgeware-testnet',
-  Kusama = 'kusama',
-  Kulupu = 'kulupu',
-  Polkadot = 'polkadot',
-  Plasm = 'plasm',
-  Stafi = 'stafi',
-  Darwinia = 'darwinia',
-  Phala = 'phala',
-  Centrifuge = 'centrifuge',
-  Straightedge = 'straightedge',
   Osmosis = 'osmosis',
   Injective = 'injective',
-  InjectiveTestnet = 'injective-testnet',
+  Solana = 'solana',
   Terra = 'terra',
-  Ethereum = 'ethereum',
   NEAR = 'near',
-  NEARTestnet = 'near-testnet',
+  Stargaze = 'stargaze',
   Compound = 'compound',
-  Aave = 'aave',
-  AaveLocal = 'aave-local',
-  dYdX = 'dydx',
-  Metacartel = 'metacartel',
-  ALEX = 'alex',
-  ERC20 = 'erc20',
-  ERC721 = 'erc721',
-  ERC1155 = 'erc1155',
-  CW20 = 'cw20',
-  CW721 = 'cw721',
-  Clover = 'clover',
-  HydraDX = 'hydradx',
-  Crust = 'crust',
-  Sputnik = 'sputnik',
-  SolanaDevnet = 'solana-devnet',
-  SolanaTestnet = 'solana-testnet',
-  Solana = 'solana',
-  SPL = 'spl', // solana token
   Evmos = 'evmos',
   Kava = 'kava',
   Kyve = 'kyve',
-  Stargaze = 'stargaze',
-  Cosmos = 'cosmos',
 }
 
 /**

packages/commonwealth/client/scripts/controllers/app/login.ts

@@ -21,8 +21,10 @@ import { CosmosExtension } from '@magic-ext/cosmos';
 import { OAuthExtension } from '@magic-ext/oauth';
 import { Magic } from 'magic-sdk';
 
+import { ExtendedCommunity } from '@hicommonwealth/schemas';
 import axios from 'axios';
 import app from 'state';
+import { EXCEPTION_CASE_VANILLA_getCommunityById } from 'state/api/communities/getCommuityById';
 import { SERVER_URL } from 'state/api/config';
 import { fetchProfilesByAddress } from 'state/api/profiles/fetchProfilesByAddress';
 import {
@@ -33,10 +35,11 @@ import {
 import { authModal } from 'state/ui/modals/authModal';
 import { welcomeOnboardModal } from 'state/ui/modals/welcomeOnboardModal';
 import { userStore } from 'state/ui/user';
+import { z } from 'zod';
 import Account from '../../models/Account';
 import AddressInfo from '../../models/AddressInfo';
 import type BlockInfo from '../../models/BlockInfo';
-import type ChainInfo from '../../models/ChainInfo';
+import ChainInfo from '../../models/ChainInfo';
 
 function storeActiveAccount(account: Account) {
   const user = userStore.getState();
@@ -112,14 +115,13 @@ export async function completeClientLogin(account: Account) {
   }
 }
 
-export async function updateActiveAddresses({ chain }: { chain?: ChainInfo }) {
+export async function updateActiveAddresses(chainId: string) {
   // update addresses for a chain (if provided) or for communities (if null)
   // for communities, addresses on all chains are available by default
   userStore.getState().setData({
     accounts: userStore
       .getState()
-      .addresses // @ts-expect-error StrictNullChecks
-      .filter((a) => a.community.id === chain.id)
+      .addresses.filter((a) => a.community.id === chainId)
       .map((addr) => {
         const tempAddr = app.chain?.accounts.get(addr.address, false);
         tempAddr.profile = addr.profile;
@@ -131,8 +133,7 @@ export async function updateActiveAddresses({ chain }: { chain?: ChainInfo }) {
 
   // select the address that the new chain should be initialized with
   const memberAddresses = userStore.getState().accounts.filter((account) => {
-    // @ts-expect-error StrictNullChecks
-    return account.community.id === chain.id;
+    return account.community.id === chainId;
   });
 
   if (memberAddresses.length === 1) {
@@ -145,7 +146,7 @@ export async function updateActiveAddresses({ chain }: { chain?: ChainInfo }) {
     const communityAddressesSortedByLastUsed = [
       ...(userStore
         .getState()
-        .addresses.filter((a) => a.community.id === chain?.id) || []),
+        .addresses.filter((a) => a.community.id === chainId) || []),
     ].sort((a, b) => {
       if (b.lastActive && a.lastActive) return b.lastActive.diff(a.lastActive);
       if (!b.lastActive && !a.lastActive) return 0; // no change
@@ -285,7 +286,15 @@ export async function createUserWithAddress(
   });
 
   const id = response.data.result.id;
-  const chainInfo = app.config.chains.getById(chain);
+
+  const communityInfo = await EXCEPTION_CASE_VANILLA_getCommunityById(
+    chain || '',
+    true,
+  );
+  const chainInfo = ChainInfo.fromTRPCResponse(
+    communityInfo as z.infer<typeof ExtendedCommunity>,
+  );
+
   const account = new Account({
     addressId: id,
     address,
@@ -359,7 +368,7 @@ export async function startLoginWithMagicLink({
       redirectTo ? encodeURIComponent(redirectTo) : ''
     }&chain=${chain || ''}&sso=${provider}`;
     await magic.oauth.loginWithRedirect({
-      provider: provider as any,
+      provider,
       redirectURI: new URL(
         '/finishsociallogin' + params,
         window.location.origin,
@@ -418,8 +427,16 @@ export async function handleSocialLoginCallback({
 }): Promise<{ address: string; isAddressNew: boolean }> {
   // desiredChain may be empty if social login was initialized from
   // a page without a chain, in which case we default to an eth login
-  // @ts-expect-error StrictNullChecks
-  const desiredChain = app.chain?.meta || app.config.chains.getById(chain);
+  let desiredChain = app.chain?.meta;
+  if (!desiredChain && chain) {
+    const communityInfo = await EXCEPTION_CASE_VANILLA_getCommunityById(
+      chain || '',
+      true,
+    );
+    desiredChain = ChainInfo.fromTRPCResponse(
+      communityInfo as z.infer<typeof ExtendedCommunity>,
+    );
+  }
   const isCosmos = desiredChain?.base === ChainBase.CosmosSDK;
   const magic = await constructMagic(isCosmos, desiredChain?.id);
   const isEmail = walletSsoSource === WalletSsoSource.Email;
@@ -554,10 +571,19 @@ export async function handleSocialLoginCallback({
     // This is code from before desiredChain was implemented, and
     // may not be necessary anymore:
     if (app.chain) {
-      const c =
-        userStore.getState().activeCommunity ||
-        app.config.chains.getById(app.activeChainId());
-      await updateActiveAddresses({ chain: c });
+      let chainInfo = userStore.getState().activeCommunity;
+
+      if (!chainInfo && chain) {
+        const communityInfo = await EXCEPTION_CASE_VANILLA_getCommunityById(
+          chain || '',
+          true,
+        );
+        chainInfo = ChainInfo.fromTRPCResponse(
+          communityInfo as z.infer<typeof ExtendedCommunity>,
+        );
+      }
+
+      chainInfo && (await updateActiveAddresses(chainInfo.id));
     }
 
     const { Profiles: profiles, email: ssoEmail } = response.data.result;

packages/commonwealth/client/scripts/controllers/app/webWallets/coinbase_web_wallet.ts

@@ -132,9 +132,9 @@ class CoinbaseWebWalletController implements IWebWallet<string> {
       } catch (switchError) {
         // This error code indicates that the chain has not been added to coinbase.
         if (switchError.code === 4902) {
-          const wsRpcUrl = new URL(app.chain.meta.node.url);
+          const wsRpcUrl = new URL(app.chain?.meta?.node?.url);
           const rpcUrl =
-            app.chain.meta.node.altWalletUrl || `https://${wsRpcUrl.host}`;
+            app.chain?.meta?.node?.altWalletUrl || `https://${wsRpcUrl.host}`;
 
           const chains = await axios.get('https://chainid.network/chains.json');
           const baseChain = chains.data.find((c) => c.chainId === chainId);

packages/commonwealth/client/scripts/controllers/app/webWallets/walletconnect_web_wallet.ts

@@ -4,8 +4,11 @@ import app from 'state';
 import type Web3 from 'web3';
 
 import { SIWESigner } from '@canvas-js/chain-ethereum';
+import { ExtendedCommunity } from '@hicommonwealth/schemas';
+import { EXCEPTION_CASE_VANILLA_getCommunityById } from 'state/api/communities/getCommuityById';
 import { userStore } from 'state/ui/user';
 import { hexToNumber } from 'web3-utils';
+import { z } from 'zod';
 import BlockInfo from '../../../models/BlockInfo';
 import ChainInfo from '../../../models/ChainInfo';
 import IWebWallet from '../../../models/IWebWallet';
@@ -97,10 +100,21 @@ class WalletConnectWebWalletController implements IWebWallet<string> {
   public async enable() {
     console.log('Attempting to enable WalletConnect');
     this._enabling = true;
-    // try {
-    // Create WalletConnect Provider
-    this._chainInfo =
-      app.chain?.meta || app.config.chains.getById(this.defaultNetwork);
+    this._chainInfo = app?.chain?.meta;
+
+    if (!this._chainInfo && app.activeChainId()) {
+      const communityInfo = await EXCEPTION_CASE_VANILLA_getCommunityById(
+        app.activeChainId() || '',
+        true,
+      );
+
+      const chainInfo = ChainInfo.fromTRPCResponse(
+        communityInfo as z.infer<typeof ExtendedCommunity>,
+      );
+
+      this._chainInfo = chainInfo;
+    }
+
     const chainId = this._chainInfo.node?.ethChainId || 1;
     const EthereumProvider = (await import('@walletconnect/ethereum-provider'))
       .default;