fix: Connect2IC integration

dfx.json

@@ -33,6 +33,12 @@
       "subnet_type": "system"
     }
   },
-  "dfx": "0.13.1",
+  "dfx": "0.14.0",
+  "networks": {
+    "local": {
+      "bind": "127.0.0.1:8000",
+      "type": "ephemeral"
+    }
+  },
   "version": 1
 }

src/axon-ui/components/Buttons/Connect2ICButton.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ConnectButton, ConnectDialog, useConnect } from "@connect2ic/react";
+import { FaWallet, FaPlug } from "react-icons/fa";
+
+export const Connect2ICButton: React.FC = (props) => {
+  const { principal, isConnected } = useConnect();
+  const principalAsText = principal?.substring(0, 25) + "..";
+  return global.window ? (
+    <>
+      <ConnectButton>
+        {isConnected && principal ? (
+          <>
+            <FaPlug style={{ marginRight: "0.5rem" }} />
+            {principalAsText}
+          </>
+        ) : (
+          <>
+            <FaWallet style={{ marginRight: "0.5rem" }} /> Connect Wallet
+          </>
+        )}
+      </ConnectButton>
+      <ConnectDialog />
+    </>
+  ) : null;
+};

src/axon-ui/components/Layout/Nav.tsx

@@ -4,8 +4,8 @@ import { useBalance } from "../../lib/hooks/Axon/useBalance";
 import useAxonId from "../../lib/hooks/useAxonId";
 import { formatNumber } from "../../lib/utils";
 import IdentifierLabelWithButtons from "../Buttons/IdentifierLabelWithButtons";
-import LoginButton from "../Buttons/LoginButton";
 import { useGlobalContext } from "../Store/Store";
+import { Connect2ICButton } from "../Buttons/Connect2ICButton";
 
 export default function Nav() {
   const {
@@ -17,7 +17,10 @@ export default function Nav() {
   return (
     <nav className="py-4 flex flex-col sm:flex-row items-center justify-between border-b border-black border-opacity-10">
       <Link to="/">
-        <img src={`/img/${process.env.LOGO_ICON}`} className="h-12 cursor-pointer" />
+        <img
+          src={`/img/${process.env.LOGO_ICON}`}
+          className="h-12 cursor-pointer"
+        />
       </Link>
       <div className="flex items-center gap-4">
         {principal && !principal.isAnonymous() && (
@@ -30,15 +33,18 @@ export default function Nav() {
             />
 
             {id && (
-              <Link to={`/axon/${id}/ledger`} className="text-right hover:underline">
+              <Link
+                to={`/axon/${id}/ledger`}
+                className="text-right hover:underline"
+              >
                 <>
                   <strong>{formatNumber(balance || 0)}</strong> AXON_{id}
                 </>
               </Link>
             )}
           </div>
         )}
-        <LoginButton />
+        {global.window && <Connect2ICButton />}
       </div>
     </nav>
   );

src/axon-ui/components/SafeHydrate/SafeHydrate.tsx

@@ -0,0 +1,7 @@
+export function SafeHydrate({ children }) {
+  return (
+    <div suppressHydrationWarning>
+      {typeof window === "undefined" ? null : children}
+    </div>
+  );
+}

src/axon-ui/components/Store/Store.tsx

@@ -1,20 +1,11 @@
-import { HttpAgent } from "@dfinity/agent";
+import { Actor, Agent, HttpAgent } from "@dfinity/agent";
 import { Principal } from "@dfinity/principal";
 import React, { createContext, useContext, useEffect, useReducer } from "react";
-import { canisterId, createActor } from "../../declarations/Axon";
-import { defaultAgent } from "../../lib/canisters";
+import { CANISTER_NAME, defaultAgent } from "../../lib/canisters";
 import { AxonService } from "../../lib/types";
+import { useCanister, useConnect } from "@connect2ic/react";
 
 type Action =
-  | {
-      type: "SET_AGENT";
-      agent: HttpAgent | null;
-      isAuthed?: boolean;
-    }
-  | {
-      type: "SET_PRINCIPAL";
-      principal: Principal;
-    }
   | {
       type: "LOAD_PERSISTENT_STATE";
       value: State["persistent"];
@@ -26,19 +17,6 @@ type Action =
 
 const reducer = (state: State, action: Action) => {
   switch (action.type) {
-    case "SET_AGENT":
-      const agent = action.agent || defaultAgent;
-      return {
-        ...state,
-        agent,
-        axon: createActor(canisterId, agent),
-        isAuthed: !!action.isAuthed,
-      };
-    case "SET_PRINCIPAL":
-      return {
-        ...state,
-        principal: action.principal,
-      };
     case "LOAD_PERSISTENT_STATE":
       return {
         ...state,
@@ -56,7 +34,7 @@ const reducer = (state: State, action: Action) => {
 };
 
 type State = {
-  agent: HttpAgent;
+  agent: Agent;
   axon: AxonService;
   isAuthed: boolean;
   principal: Principal | null;
@@ -67,7 +45,7 @@ type State = {
 
 const initialState: State = {
   agent: defaultAgent,
-  axon: createActor(canisterId, defaultAgent),
+  axon: undefined,
   isAuthed: false,
   principal: null,
   persistent: {
@@ -83,6 +61,16 @@ const Context = createContext({
 const Store = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  // const { principal, isConnected } = useConnect();
+  // const [actor, res] = useCanister("gov");
+
+  // const connect2IcState = {
+  //   axon: actor as unknown as AxonService,
+  //   agent: Actor.agentOf(actor),
+  //   principal: Principal.fromText(principal),
+  //   isAuthed: isConnected,
+  // };
+
   useEffect(() => {
     try {
       const stored = localStorage.getItem("state");
@@ -101,8 +89,14 @@ const Store = ({ children }) => {
     }
   }, [state.persistent]);
 
+  const aggregatedState = {
+    ...state,
+  };
+
   return (
-    <Context.Provider value={{ state, dispatch }}>{children}</Context.Provider>
+    <Context.Provider value={{ state: aggregatedState, dispatch }}>
+      {children}
+    </Context.Provider>
   );
 };
 
@@ -115,8 +109,8 @@ export const useGlobalContext = () => {
 };
 
 export const useAxon = () => {
-  const context = useGlobalContext();
-  return context.state.axon;
+  const [actor] = useCanister(CANISTER_NAME.AXON_CANISTER);
+  return actor;
 };
 
 export const useHideZeroBalances = () => {
@@ -129,29 +123,4 @@ export const useHideZeroBalances = () => {
   return [state, dispatch] as const;
 };
 
-export const useSetAgent = () => {
-  const { dispatch } = useGlobalContext();
-
-  return async ({
-    agent,
-    isAuthed,
-  }: {
-    agent: HttpAgent;
-    isAuthed?: boolean;
-  }) => {
-    dispatch({ type: "SET_AGENT", agent, isAuthed });
-    if (isAuthed) {
-      const principal = await agent.getPrincipal();
-      console.log("authed", principal.toText());
-
-      dispatch({
-        type: "SET_PRINCIPAL",
-        principal,
-      });
-    } else {
-      dispatch({ type: "SET_PRINCIPAL", principal: null });
-    }
-  };
-};
-
 export default Store;