Add account migration feature to Abstraxion dashboard

apps/abstraxion-dashboard/app/page.tsx

@@ -12,19 +12,22 @@ import type { AbstraxionAccount } from "@/types";
 
 export default function Home() {
   const searchParams = useSearchParams();
-  const { data: account } = useAbstraxionAccount();
+  const { isConnected, data: account } = useAbstraxionAccount();
 
   const contracts = searchParams.get("contracts");
   const stake = Boolean(searchParams.get("stake"));
   const bank = searchParams.get("bank");
   const grantee = searchParams.get("grantee");
-  const { isOpen, setIsOpen, isMainnet } = useContext(AbstraxionContext);
+  const { isOpen, setIsOpen, isMainnet, accountNeedsToMigrate } =
+    useContext(AbstraxionContext);
 
   const [showMobileSiderbar, setShowMobileSiderbar] = useState(false);
 
   return (
     <>
-      {!account?.id || (grantee && (contracts || stake || bank)) ? (
+      {!account?.id ||
+      (grantee && (contracts || stake || bank)) ||
+      accountNeedsToMigrate ? (
         <div className="ui-flex ui-h-screen ui-flex-1 ui-items-center ui-justify-center ui-overflow-y-auto ui-p-6">
           <Abstraxion onClose={() => null} isOpen={true} />
         </div>

apps/abstraxion-dashboard/components/Abstraxion/index.tsx

@@ -10,12 +10,13 @@ import {
 import { apolloClient, stytchClient } from "@/lib";
 import { Dialog, DialogContent } from "@burnt-labs/ui";
 import { AbstraxionSignin } from "@/components/AbstraxionSignin";
-import { useAbstraxionAccount } from "@/hooks";
+import { useAbstraxionAccount, useAbstraxionSigningClient } from "@/hooks";
 import { AbstraxionWallets } from "@/components/AbstraxionWallets";
 import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { useSearchParams } from "next/navigation";
 import { AbstraxionGrant } from "../AbstraxionGrant";
 import Image from "next/image";
+import { AbstraxionMigrate } from "@/components/AbstraxionMigrate";
 
 export interface ModalProps {
   onClose: VoidFunction;
@@ -25,11 +26,15 @@ export interface ModalProps {
 export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
   const searchParams = useSearchParams();
 
-  const { abstraxionError, isMainnet } = useContext(
-    AbstraxionContext,
-  ) as AbstraxionContextProps;
+  const {
+    abstraxionError,
+    isMainnet,
+    setAccountNeedsToMigrate,
+    accountNeedsToMigrate,
+  } = useContext(AbstraxionContext) as AbstraxionContextProps;
 
   const { isConnected, data: account } = useAbstraxionAccount();
+  const { client } = useAbstraxionSigningClient();
 
   const contracts = searchParams.get("contracts");
   const stake = Boolean(searchParams.get("stake"));
@@ -60,6 +65,17 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
     };
   }, [onClose]);
 
+  async function getMetaAccountCodeID() {
+    if (client) {
+      const { codeId } = await client.getContract(account.id);
+      setAccountNeedsToMigrate(codeId === 21);
+    }
+  }
+
+  useEffect(() => {
+    if (account && client) getMetaAccountCodeID();
+  }, [account, isConnected, client]);
+
   if (!isOpen) return null;
 
   return (
@@ -79,7 +95,11 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
               stake={stake}
             />
           ) : isConnected ? (
-            <AbstraxionWallets />
+            accountNeedsToMigrate ? (
+              <AbstraxionMigrate updateContractCodeID={getMetaAccountCodeID} />
+            ) : (
+              <AbstraxionWallets />
+            )
           ) : (
             <AbstraxionSignin />
           )}

apps/abstraxion-dashboard/components/AbstraxionContext/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useState } from "react";
+import { createContext, ReactNode, useState } from "react";
 import { getEnvStringOrThrow } from "@/utils";
 import { ChainInfo } from "@burnt-labs/constants";
 
@@ -16,6 +16,8 @@ export interface AbstraxionContextProps {
   isMainnet: boolean;
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setAccountNeedsToMigrate: React.Dispatch<React.SetStateAction<boolean>>;
+  accountNeedsToMigrate: boolean;
 }
 
 export const AbstraxionContext = createContext<AbstraxionContextProps>(
@@ -34,26 +36,38 @@ export const AbstraxionContextProvider = ({
   const [abstraxionError, setAbstraxionError] = useState("");
   const [isOpen, setIsOpen] = useState(false);
 
+  const [accountNeedsToMigrate, setAccountNeedsToMigrate] = useState(false);
+
   const serializedChainInfo = getEnvStringOrThrow(
     "NEXT_PUBLIC_DEFAULT_CHAIN_INFO",
     process.env.NEXT_PUBLIC_DEFAULT_CHAIN_INFO,
   );
   const chainInfo = JSON.parse(serializedChainInfo);
-  const apiUrl = getEnvStringOrThrow(
+
+  const oldApiUrl = getEnvStringOrThrow(
     "NEXT_PUBLIC_DEFAULT_API_URL",
     process.env.NEXT_PUBLIC_DEFAULT_API_URL,
   );
+
+  const migratedApiUrl = getEnvStringOrThrow(
+    "NEXT_PUBLIC_MIGRATED_API_URL",
+    process.env.NEXT_PUBLIC_MIGRATED_API_URL,
+  );
+
+  const apiUrl = accountNeedsToMigrate ? oldApiUrl : migratedApiUrl;
+
   const isMainnet =
     getEnvStringOrThrow(
       "NEXT_PUBLIC_DEPLOYMENT_ENV",
       process.env.NEXT_PUBLIC_DEPLOYMENT_ENV,
     ) === "mainnet"
       ? true
       : false;
-
   return (
     <AbstraxionContext.Provider
       value={{
+        accountNeedsToMigrate,
+        setAccountNeedsToMigrate,
         connectionType,
         setConnectionType,
         abstractAccount,

apps/abstraxion-dashboard/components/AbstraxionMigrate/index.tsx

@@ -0,0 +1,81 @@
+import { Button, Spinner } from "@burnt-labs/ui";
+import { useAbstraxionAccount, useAbstraxionSigningClient } from "../../hooks";
+import { useContext, useState } from "react";
+import {
+  AbstraxionContext,
+  AbstraxionContextProps,
+} from "@/components/AbstraxionContext";
+
+type AbstraxionMigrateProps = {
+  updateContractCodeID: () => Promise<void>;
+};
+
+export const AbstraxionMigrate = ({
+  updateContractCodeID,
+}: AbstraxionMigrateProps) => {
+  const { setAbstraxionError } = useContext(
+    AbstraxionContext,
+  ) as AbstraxionContextProps;
+
+  const { client } = useAbstraxionSigningClient();
+  const { data: account } = useAbstraxionAccount();
+  const [inProgress, setInProgress] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  const migrateAccount = async () => {
+    if (!client) return;
+    try {
+      setInProgress(true);
+
+      await client.migrate(
+        account.id,
+        account.id,
+        793,
+        {},
+        {
+          amount: [{ amount: "0", denom: "uxion" }],
+          gas: "500000",
+        },
+      );
+
+      void updateContractCodeID();
+    } catch (error) {
+      console.log("something went wrong: ", error);
+      setFailed(true);
+    } finally {
+      setInProgress(false);
+    }
+  };
+
+  if (failed) {
+    setAbstraxionError("Failed to migrate account.");
+    return null;
+  }
+
+  if (inProgress) {
+    return (
+      <div className="ui-w-full ui-h-full ui-min-h-[500px] ui-flex ui-items-center ui-justify-center ui-text-white">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="ui-flex ui-h-full ui-w-full ui-flex-col ui-items-start ui-justify-between ui-gap-8 sm:ui-p-10 ui-text-white">
+      <div className="ui-flex ui-flex-col ui-w-full ui-text-center">
+        <h1 className="ui-text-3xl ui-font-thin ui-uppercase ui-tracking-tighter ui-text-white ui-text-center">
+          Congratulations!
+        </h1>
+        <p className="ui-tracking-tight ui-text-zinc-400 ui-text-center">
+          Your account is due for an upgrade! Please click below to begin the
+          process.
+        </p>
+      </div>
+      <div className="ui-w-full ui-flex ui-flex-col ui-gap-4">
+        <Button structure="base" fullWidth={true} onClick={migrateAccount}>
+          Migrate Account
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/abstraxion-dashboard/hooks/useAbstraxionSigningClient.ts

@@ -3,6 +3,7 @@ import { useStytch } from "@stytch/nextjs";
 import {
   AAClient,
   AADirectSigner,
+  AAEthSigner,
   AbstractAccountJWTSigner,
   GasPrice,
 } from "@burnt-labs/signers";
@@ -12,11 +13,10 @@ import {
 } from "@/components/AbstraxionContext";
 import { getKeplr, useOfflineSigners } from "graz";
 import { testnetChainInfo } from "@burnt-labs/constants";
-import { AAEthSigner } from "@burnt-labs/signers";
 import { getEnvStringOrThrow } from "@/utils";
 
 export const useAbstraxionSigningClient = () => {
-  const { connectionType, abstractAccount, chainInfo } = useContext(
+  const { connectionType, abstractAccount, chainInfo, apiUrl } = useContext(
     AbstraxionContext,
   ) as AbstraxionContextProps;
 
@@ -71,10 +71,7 @@ export const useAbstraxionSigningClient = () => {
             "NEXT_PUBLIC_DEFAULT_INDEXER_URL",
             process.env.NEXT_PUBLIC_DEFAULT_INDEXER_URL,
           ),
-          getEnvStringOrThrow(
-            "NEXT_PUBLIC_DEFAULT_API_URL",
-            process.env.NEXT_PUBLIC_DEFAULT_API_URL,
-          ),
+          apiUrl,
         );
         break;
       case "graz":