feat: connect argent x

packages/client/src/store.ts

@@ -74,7 +74,8 @@ export const persistUIStore = createStore(
             agreeTerm: false,
             setAgreeTerm: (agreeTerm: boolean) => set(() => ({ agreeTerm })),
             didScaleCheck: false,
-            setDidScaleCheck: (didScaleCheck: boolean) => set(() => ({ didScaleCheck })),
+            setDidScaleCheck: (didScaleCheck: boolean) =>
+                set(() => ({ didScaleCheck })),
             skipGuide: false,
             setSkipGuide: (skipGuide: boolean) => set(() => ({ skipGuide })),
             soundVolumes: { music: 100, effect: 100 },

packages/client/src/ui/Home.tsx

@@ -22,7 +22,9 @@ export const Home = () => {
         clientComponents: { PlayerProfile },
     } = useDojo();
 
-    const { agreeTerm, loggedIn, didScaleCheck } = usePersistUIStore((state) => state);
+    const { agreeTerm, loggedIn, didScaleCheck } = usePersistUIStore(
+        (state) => state
+    );
 
     const sessionWalletShow = useUIStore((state: UIStore) =>
         state.getShow(ShowItem.SessionWalletCreate)
@@ -41,17 +43,18 @@ export const Home = () => {
 
     logDebug("sessionWalletShow: ", sessionWalletShow);
 
+    if (!agreeTerm) {
+        return <AgreeTerm />;
+    }
+
     if (!didScaleCheck) {
-        return <ScaleCheck />
+        return <ScaleCheck />;
     }
 
     return (
         <HomeBg>
-
             {sessionWalletShow && <SessionWalletCreate />}
 
-            {!agreeTerm && <AgreeTerm />}
-
             <div className="w-1/2 p-4">
                 {!loggedIn ? <UnConnected /> : <Connected />}
             </div>

packages/client/src/ui/components/starknet-provider.tsx

@@ -13,7 +13,7 @@ import {
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
     const { connectors } = useInjectedConnectors({
         // Show these connectors if the user has no connector installed.
-        recommended: [braavos()],
+        recommended: [braavos(), argent()],
         // Hide recommended connectors if the user has any connector installed.
         includeRecommended: "onlyIfNoConnectors",
         // Randomize the order of the connectors.

packages/client/src/ui/features/login/ConnectWalletDialog.tsx

@@ -1,61 +1,66 @@
-import { braavos, useAccount, useConnect } from "@starknet-react/core";
+import { braavos, argent, useAccount, useConnect } from "@starknet-react/core";
 import { ShowItem, usePersistUIStore, useUIStore } from "../../../store";
-import { GreenButton } from "../../components/GreenButton";
 import { Dialog } from "../../components/Dialog";
 import { useMemo } from "react";
 import { usePlayerProfile } from "../../hooks/usePlayerProfile";
 import { logDebug } from "../../lib/utils";
 
 export function ConnectWalletDialog() {
-  const show = useUIStore((state) =>
-    state.getShow(ShowItem.ConnectWalletDialog)
-  );
-  const setShow = useUIStore((state) => state.setShow);
-
-  const setLoggedIn = usePersistUIStore((state) => state.setLoggedIn);
-
-  const { connect } = useConnect();
-  const { isConnected } = useAccount();
-  const { playerName } = usePlayerProfile();
-
-  logDebug(
-    "playerName:",
-    playerName,
-    !playerName,
-    playerName.length,
-    !!playerName,
-    "isConnected: ",
-    isConnected
-  );
-
-  useMemo(() => {
-    if (isConnected) {
-      setLoggedIn(true);
-      setShow(ShowItem.ConnectWalletDialog, false);
-      if (!playerName) {
-        logDebug("show SessionWalletCreate");
-        setShow(ShowItem.SessionWalletCreate, true);
-      }
-    }
-  }, [isConnected, setLoggedIn, setShow, playerName]);
-
-  if (!show) return null;
-
-  return (
-    <Dialog className="flex flex-col items-center justify-center">
-      <div className="text-2xl ml-4">Connect Wallet</div>
-      <img className="w-32 mt-12" src="/assets/ui/braavos.png" />
-
-      <div className="flex flex-row items-center justify-center mt-12 w-full">
-        <GreenButton
-          className="w-2/5 h-12 ml-4"
-          onClick={() => {
-            connect({ connector: braavos() });
-          }}
-        >
-          Connect to your braavos Wallet
-        </GreenButton>
-      </div>
-    </Dialog>
-  );
+    const show = useUIStore((state) =>
+        state.getShow(ShowItem.ConnectWalletDialog)
+    );
+    const setShow = useUIStore((state) => state.setShow);
+
+    const setLoggedIn = usePersistUIStore((state) => state.setLoggedIn);
+
+    const { connect } = useConnect();
+    const { isConnected } = useAccount();
+    const { playerName } = usePlayerProfile();
+
+    logDebug(
+        "playerName:",
+        playerName,
+        !playerName,
+        playerName.length,
+        !!playerName,
+        "isConnected: ",
+        isConnected
+    );
+
+    useMemo(() => {
+        if (isConnected) {
+            setLoggedIn(true);
+            setShow(ShowItem.ConnectWalletDialog, false);
+            if (!playerName) {
+                logDebug("show SessionWalletCreate");
+                setShow(ShowItem.SessionWalletCreate, true);
+            }
+        }
+    }, [isConnected, setLoggedIn, setShow, playerName]);
+
+    if (!show) return null;
+
+    return (
+        <Dialog className="flex flex-col items-center justify-center">
+            <div className="text-2xl ml-4 mb-12">Choose your Wallet</div>
+
+            <div className="flex flex-row items-center justify-center gap-16 h-32">
+                <img
+                    onClick={() => {
+                        connect({ connector: braavos() });
+                    }}
+                    className="w-16 cursor-pointer hover:scale-110 transition-transform"
+                    src="/assets/ui/braavos.png"
+                />
+
+                <img
+                    onClick={() => {
+                        connect({ connector: argent() });
+                    }}
+                    className="w-16 cursor-pointer hover:scale-110 transition-transform"
+                    src="/assets/ui/argent.png"
+                />
+            </div>
+        </Dialog>
+    );
 }