feat: add mesa, sequencer tier and TierSwitcher

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#994](https://github.com/alleslabs/celatone-frontend/pull/994) Add Sequencer, Mesa tier and TierSwitcher component
+
 ### Improvements
 
 ### Bug fixes

src/config/chain/initia.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { wallets as initiaWallets } from "@cosmos-kit/initia";
 import { wallets as keplrWallets } from "@cosmos-kit/keplr";
 
@@ -55,6 +56,54 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = {
       isValidatorExternalLink: null,
     },
   },
+  "tomcat-1-sequencer": {
+    tier: "sequencer",
+    chain: "initia",
+    registryChainName: "blackwingtestnet",
+    prettyName: "Blackwing Testnet Sequencer",
+    lcd: "https://maze-rest-18bdff44-3aa4-425e-9bc0-06a2afa40af8.ase1-prod.newmetric.xyz",
+    rpc: "https://maze-rpc-18bdff44-3aa4-425e-9bc0-06a2afa40af8.ase1-prod.newmetric.xyz",
+    indexer: "https://tomcat-1-graphql.alleslabs.dev/v1/graphql",
+    wallets: [...initiaWallets, ...keplrWallets],
+    features: {
+      faucet: {
+        enabled: false,
+      },
+      wasm: {
+        enabled: false,
+      },
+      move: {
+        enabled: true,
+        moduleMaxFileSize: 1_048_576,
+        decodeApi: INITIA_DECODER,
+        verify: "",
+      },
+      pool: {
+        enabled: false,
+      },
+      publicProject: {
+        enabled: true,
+      },
+      gov: {
+        enabled: false,
+      },
+      nft: {
+        enabled: true,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.151,
+        denom:
+          "l2/aee375e9d0b181f0d9d3a49f9a3d1d6b05d62b0ac81f8c92b9282afa4213d884",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    extra: {
+      isValidatorExternalLink: null,
+    },
+  },
   "initiation-1": {
     tier: "full",
     chain: "initia",

src/config/chain/types.ts

@@ -53,7 +53,7 @@ type GovConfig =
 type NftConfig = { enabled: boolean };
 
 export interface ChainConfig {
-  tier: "lite" | "full";
+  tier: "lite" | "mesa" | "sequencer" | "full";
   chain: string;
   registryChainName: string;
   prettyName: string;

src/lib/app-provider/hooks/useConfig.ts

@@ -5,8 +5,9 @@ import { useInternalNavigate } from "./useInternalNavigate";
 
 const TierMap: Record<ChainConfig["tier"], number> = {
   lite: 0,
-  // new metric 1
-  full: 2,
+  mesa: 1,
+  sequencer: 2,
+  full: 3,
 };
 
 export const useTierConfig = (
@@ -26,7 +27,13 @@ export const useTierConfig = (
   if (TierMap[tier] < TierMap[minTier])
     navigate({ pathname: "/", replace: true });
 
-  return tier;
+  return {
+    tier,
+    isFullTier: tier === "full",
+    isLiteTier: tier === "lite",
+    isMesaTier: tier === "mesa",
+    isSequencerTier: tier === "sequencer",
+  };
 };
 
 type Features = ChainConfig["features"];

src/lib/components/TierSwitcher.tsx

@@ -0,0 +1,29 @@
+import { useTierConfig } from "lib/app-provider";
+
+interface TierSwitcherProps {
+  full: React.ReactNode;
+  sequencer?: React.ReactNode;
+  mesa?: React.ReactNode;
+  lite: React.ReactNode;
+}
+
+export const TierSwitcher = ({
+  full,
+  lite,
+  mesa,
+  sequencer,
+}: TierSwitcherProps) => {
+  const { tier } = useTierConfig();
+
+  switch (tier) {
+    case "full":
+      return full;
+    case "sequencer":
+      return sequencer ?? lite;
+    case "mesa":
+      return mesa ?? lite;
+    case "lite":
+    default:
+      return lite;
+  }
+};

src/lib/components/modal/account/SaveNewAccount.tsx

@@ -49,7 +49,7 @@ export function SaveNewAccountModal({
   publicDescription,
 }: SaveNewAccountModalProps) {
   const { constants } = useCelatoneApp();
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const { user: exampleUserAddress } = useExampleAddresses();
   const { isSomeValidAddress } = useValidateAddress();
   const formatAddresses = useFormatAddresses();

src/lib/components/select-code/CodeSelectSection.tsx

@@ -30,7 +30,7 @@ export const CodeSelectSection = <T extends FieldValues>({
   setCodeHash,
   status,
 }: CodeSelectSectionProps<T>) => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const [method, setMethod] = useState<"select-existing" | "fill-manually">(
     isFullTier ? "select-existing" : "fill-manually"
   );

src/lib/components/select-contract/ContractListDetail.tsx

@@ -88,7 +88,7 @@ export const ContractListDetail = ({
   onContractSelect,
   isReadOnly = false,
 }: ContractListDetailProps) => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const dataFull = useAdminByContractAddresses(
     isReadOnly || !isFullTier
       ? []

src/lib/components/table/contracts/ContractsTableRowCTA.tsx

@@ -56,7 +56,7 @@ export const ContractsTableRowCTA = ({
   showLastUpdate = true,
 }: ContractsTableRowCTAProps) => {
   const { address } = useCurrentChain();
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const navigate = useInternalNavigate();
 
   const isAdmin = !!address && address === contractInfo.admin;

src/lib/components/table/proposals/ProposalsTable.tsx

@@ -18,7 +18,7 @@ export const ProposalsTable = ({
   isLoading,
   emptyState,
 }: ProposalsTableProps) => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const isMobile = useMobile();
 
   if (isLoading) return <Loading />;

src/lib/components/table/proposals/ProposalsTableHeader.tsx

@@ -13,7 +13,7 @@ export const ProposalsTableHeader = ({
   templateColumns,
   boxShadow,
 }: ProposalsTableHeaderProps) => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
 
   // TODO - Revisit split columnsWidth
   const columnsWidth = templateColumns?.toString().split(" ");

src/lib/components/table/proposals/ProposalsTableMobileCard.tsx

@@ -20,7 +20,7 @@ export interface ProposalsTableMobileCardProps {
 export const ProposalsTableMobileCard = ({
   proposal,
 }: ProposalsTableMobileCardProps) => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const navigate = useInternalNavigate();
 
   const onCardSelect = (proposalId: number) =>

src/lib/components/table/proposals/ProposalsTableRow.tsx

@@ -25,7 +25,7 @@ export const ProposalsTableRow = ({
   templateColumns,
   boxShadow,
 }: ProposalsTableRowProps) => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const navigate = useInternalNavigate();
 
   const onRowSelect = (proposalId: number) =>

src/lib/hooks/useOpenTab.ts

@@ -23,7 +23,7 @@ export const useOpenTxTab = (type: "lcd" | "tx-page") => {
 };
 
 export const useOpenAssetTab = () => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const apiEndpoint = useBaseApiRoute("accounts");
   const lcdEndpoint = useLcdEndpoint();
 

src/lib/hooks/useSingleMessageProps.ts

@@ -599,7 +599,7 @@ export const useSingleActionMsgProps = (
   messages: Message[],
   singleMsg: Option<boolean>
 ): SingleMsgProps => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const { getContractLocalInfo } = useContractStore();
   const { data: assetInfos } = useAssetInfos({ withPrices: false });
   const { data: movePoolInfos } = useMovePoolInfos({ withPrices: false });

src/lib/layout/InformationFooter.tsx

@@ -27,7 +27,7 @@ const FOOTER_BUTTONS = [
 ];
 
 export const InformationFooter = () => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const { data: overviewsStats, isLoading: isLoadingFull } =
     useOverviewsStats(isFullTier);
   const { data: latestHeight, isLoading: isLoadingLite } = useLatestBlockLcd();

src/lib/layout/Searchbar.tsx

@@ -287,7 +287,7 @@ const getPlaceholder = ({
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 const Searchbar = () => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const {

src/lib/layout/mobile/NavDrawer.tsx

@@ -32,7 +32,7 @@ import { usePublicProjectStore } from "lib/providers/store";
 import { getNavDrawerFull, getNavDrawerLite } from "./utils";
 
 export const NavDrawer = () => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const govConfig = useGovConfig({ shouldRedirect: false });
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
   const moveConfig = useMoveConfig({ shouldRedirect: false });

src/lib/layout/navbar/index.tsx

@@ -39,7 +39,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
   const isCurrentPage = useIsCurrentPage();
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const { address } = useCurrentChain();
 
   const navMenu: MenuInfo[] = isFullTier

src/lib/layout/subheader/index.tsx

@@ -19,7 +19,7 @@ import { getSubHeaderFull, getSubHeaderLite } from "./utils";
 const ACTIVE_COLOR = "primary.light";
 
 const SubHeader = () => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const govConfig = useGovConfig({ shouldRedirect: false });
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
   const moveConfig = useMoveConfig({ shouldRedirect: false });

src/lib/model/contract.ts

@@ -17,7 +17,7 @@ interface InstantiatedByMeState {
 
 export const useInstantiatedByMe = (enable: boolean): InstantiatedByMeState => {
   const { address } = useCurrentChain();
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
 
   const resApi = useInstantiatedListByAddress(address, enable && isFullTier);
   const resLcd = useInstantiatedContractsByAddressLcd(
@@ -46,7 +46,7 @@ export const useInstantiatedByMe = (enable: boolean): InstantiatedByMeState => {
 
 export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
   const { address } = useCurrentChain();
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const resApi = useInstantiatedCountByAddress(address);
   const resLcd = useInstantiatedContractsByAddressLcd(address, !isFullTier);
   const count = isFullTier ? resApi.data : resLcd.data?.length ?? 0;

src/lib/pages/account-details/components/tables/instantiated-contracts/index.tsx

@@ -1,19 +1,16 @@
 import { observer } from "mobx-react-lite";
 
-import { useTierConfig } from "lib/app-provider";
+import { TierSwitcher } from "lib/components/TierSwitcher";
 
 import { InstantiatedContractsTableFull } from "./Full";
 import { InstantiatedContractsTableLite } from "./Lite";
 import type { InstantiatedContractsTableProps } from "./types";
 
 export const InstantiatedContractsTable = observer(
-  (props: InstantiatedContractsTableProps) => {
-    const isFullTier = useTierConfig() === "full";
-
-    return isFullTier ? (
-      <InstantiatedContractsTableFull {...props} />
-    ) : (
-      <InstantiatedContractsTableLite {...props} />
-    );
-  }
+  (props: InstantiatedContractsTableProps) => (
+    <TierSwitcher
+      full={<InstantiatedContractsTableFull {...props} />}
+      lite={<InstantiatedContractsTableLite {...props} />}
+    />
+  )
 );

src/lib/pages/account-details/components/tables/txs/Lite.tsx

@@ -22,7 +22,7 @@ export const TxsTableLite = ({
   onViewMore,
 }: TxsTableProps) => {
   const isMobile = useMobile();
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
 
   const {
     pagesQuantity,

src/lib/pages/account-details/components/tables/txs/index.tsx

@@ -1,11 +1,12 @@
-import { useTierConfig } from "lib/app-provider";
+import { TierSwitcher } from "lib/components/TierSwitcher";
 
 import { TxsTableFull } from "./Full";
 import { TxsTableLite } from "./Lite";
 import type { TxsTableProps } from "./types";
 
-export const TxsTable = (props: TxsTableProps) => {
-  const isFullTier = useTierConfig() === "full";
-
-  return isFullTier ? <TxsTableFull {...props} /> : <TxsTableLite {...props} />;
-};
+export const TxsTable = (props: TxsTableProps) => (
+  <TierSwitcher
+    full={<TxsTableFull {...props} />}
+    lite={<TxsTableLite {...props} />}
+  />
+);

src/lib/pages/account-details/data.ts

@@ -36,7 +36,7 @@ interface AccountDetailsTableCounts {
 export const useAccountDetailsTableCounts = (
   address: BechAddr
 ): AccountDetailsTableCounts => {
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
   const {
     data,
     refetch,

src/lib/pages/account-details/index.tsx

@@ -76,7 +76,7 @@ const AccountDetailsBody = ({
   const navigate = useInternalNavigate();
   const { address: accountAddress, hex: hexAddress } =
     formatAddresses(accountAddressParam);
-  const isFullTier = useTierConfig() === "full";
+  const { isFullTier } = useTierConfig();
 
   // ------------------------------------------//
   // ------------------QUERIES-----------------//