Refactor Abstraxion to fetch config

.changeset/twelve-bulldogs-collect.md

@@ -0,0 +1,6 @@
+---
+"@burnt-labs/abstraxion": minor
+"@burnt-labs/constants": minor
+---
+
+Refactor Abstraxion to fetch config

.github/workflows/release.yml

@@ -62,7 +62,7 @@ jobs:
         id: install-dependencies
         run: pnpm install
 
-      name: Rename Env file
+      - name: Rename Env file
         id: rename-env-file
         run: |
           mv apps/abstraxion-dashboard/.env.example apps/abstraxion-dashboard/.env

packages/abstraxion/src/components/Abstraxion/index.tsx

@@ -64,7 +64,6 @@ export function Abstraxion({ onClose }: ModalProps): JSX.Element | null {
 
 export interface AbstraxionConfig {
   contracts?: ContractGrantDescription[];
-  dashboardUrl?: string;
   rpcUrl?: string;
   restUrl?: string;
   stake?: boolean;
@@ -81,7 +80,6 @@ export function AbstraxionProvider({
   return (
     <AbstraxionContextProvider
       contracts={config.contracts}
-      dashboardUrl={config.dashboardUrl}
       rpcUrl={config.rpcUrl}
       restUrl={config.restUrl}
       stake={config.stake}

packages/abstraxion/src/components/AbstraxionContext/index.tsx

@@ -27,8 +27,9 @@ export interface AbstraxionContextProps {
   setGranterAddress: React.Dispatch<React.SetStateAction<string>>;
   contracts?: ContractGrantDescription[];
   dashboardUrl?: string;
-  rpcUrl?: string;
-  restUrl?: string;
+  setDashboardUrl: React.Dispatch<React.SetStateAction<string>>;
+  rpcUrl: string;
+  restUrl: string;
   stake?: boolean;
   bank?: SpendLimit[];
   logout?: () => void;
@@ -41,7 +42,6 @@ export const AbstraxionContext = createContext<AbstraxionContextProps>(
 export function AbstraxionContextProvider({
   children,
   contracts,
-  dashboardUrl = "https://dashboard.burnt.com",
   rpcUrl = testnetChainInfo.rpc,
   restUrl = testnetChainInfo.rest,
   stake = false,
@@ -63,6 +63,7 @@ export function AbstraxionContextProvider({
     DirectSecp256k1HdWallet | undefined
   >(undefined);
   const [granterAddress, setGranterAddress] = useState("");
+  const [dashboardUrl, setDashboardUrl] = useState("");
 
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -96,6 +97,7 @@ export function AbstraxionContextProvider({
         setGranterAddress,
         contracts,
         dashboardUrl,
+        setDashboardUrl,
         rpcUrl,
         restUrl,
         stake,

packages/abstraxion/src/components/AbstraxionSignin/index.tsx

@@ -7,6 +7,7 @@ import {
   AbstraxionContext,
   ContractGrantDescription,
 } from "../AbstraxionContext";
+import { fetchConfig } from "@burnt-labs/constants";
 
 interface GrantsResponse {
   grants: Grant[];
@@ -49,11 +50,14 @@ export function AbstraxionSignin(): JSX.Element {
   const {
     setIsConnecting,
     setIsConnected,
+    setAbstraxionError,
     setAbstraxionAccount,
     setGranterAddress,
     granterAddress,
     contracts,
     dashboardUrl,
+    setDashboardUrl,
+    rpcUrl,
     restUrl,
     stake,
     bank,
@@ -70,7 +74,12 @@ export function AbstraxionSignin(): JSX.Element {
   function openDashboardTab(
     userAddress: string,
     grantContracts?: ContractGrantDescription[],
+    dashUrl?: string,
   ): void {
+    if (!dashUrl) {
+      console.warn("Failed to fetch dashboard url");
+      setAbstraxionError("Failed to fetch dashboard url");
+    }
     const currentUrl = window.location.href;
     const urlParams = new URLSearchParams();
 
@@ -87,7 +96,7 @@ export function AbstraxionSignin(): JSX.Element {
     }
     urlParams.set("redirect_uri", currentUrl);
     const queryString = urlParams.toString(); // Convert URLSearchParams to string
-    window.location.href = `${dashboardUrl}?${queryString}`;
+    window.location.href = `${dashUrl}?${queryString}`;
   }
 
   async function generateAndStoreTempAccount(): Promise<DirectSecp256k1HdWallet> {
@@ -158,7 +167,9 @@ export function AbstraxionSignin(): JSX.Element {
         setTempAccountAddress(address);
 
         if (!isGranted && !granterAddress) {
-          openDashboardTab(address, contracts);
+          const dashUrl = await fetchConfig(rpcUrl);
+          setDashboardUrl(dashUrl);
+          openDashboardTab(address, contracts, dashUrl);
         } else if (isGranted && !granterAddress) {
           await pollForGrants(address);
           setIsConnecting(false);
@@ -169,6 +180,7 @@ export function AbstraxionSignin(): JSX.Element {
         }
       } catch (error) {
         console.log("Something went wrong: ", error);
+        setAbstraxionError((error as Error).message);
       }
     }
 
@@ -193,7 +205,7 @@ export function AbstraxionSignin(): JSX.Element {
       <BrowserIcon />
       <Button
         onClick={() => {
-          openDashboardTab(tempAccountAddress, contracts);
+          openDashboardTab(tempAccountAddress, contracts, dashboardUrl);
         }}
         structure="naked"
       >

packages/constants/src/index.ts

@@ -1,3 +1,5 @@
+import { RpcStatusResponse } from "./types";
+
 export interface Coin {
   coinDenom: string;
   coinMinimalDenom: string;
@@ -22,11 +24,6 @@ interface Bip44 {
   coinType: number;
 }
 
-interface Gas {
-  price: string;
-  denom: string;
-}
-
 export interface ChainInfo {
   rpc: string;
   rest: string;
@@ -88,3 +85,26 @@ export const testChainInfo: ChainInfo = {
   chainId: "xion-local-testnet-1",
   chainName: "Xion Testnet Local",
 };
+
+// If mainnet chain-id/network changes be sure to update here.
+const DASHBOARD_URLS = {
+  "xion-mainnet-1": "https://dashboard.burnt.com",
+  "xion-testnet-1": "https://testnet.dashboard.burnt.com",
+};
+
+export async function fetchConfig(rpcUrl: string): Promise<string> {
+  try {
+    const fetchReq = await fetch(`${rpcUrl}/status`);
+    if (!fetchReq.ok) {
+      throw new Error("Something went wrong querying RPC");
+    }
+
+    const data: RpcStatusResponse = await fetchReq.json();
+    const lookup = data.result.node_info.network;
+    const returnUrl = DASHBOARD_URLS[lookup as keyof typeof DASHBOARD_URLS];
+    if (!returnUrl) throw new Error("Network not found.");
+    return returnUrl;
+  } catch (error) {
+    throw error;
+  }
+}

packages/constants/src/types.ts

@@ -0,0 +1,33 @@
+// Interface for rpc status response
+export interface RpcStatusResponse {
+  jsonrpc: string;
+  id: number;
+  result: RpcStatusResult;
+}
+
+export interface RpcStatusResult {
+  node_info: RpcStatusResultNodeInfo;
+  sync_info: RpcStatusResultSyncInfo;
+}
+
+export interface RpcStatusResultNodeInfo {
+  protocol_version: any;
+  id: string;
+  network: string;
+  version: string;
+  channels: string;
+  moniker: string;
+  other: any;
+}
+
+export interface RpcStatusResultSyncInfo {
+  latest_block_hash: string;
+  latest_app_hash: string;
+  latest_block_height: string;
+  latest_block_time: string;
+  earliest_block_hash: string;
+  earliest_app_hash: string;
+  earliest_block_height: string;
+  earliest_block_time: string;
+  catching_up: boolean;
+}