Merge pull request #295 from BibliothecaDAO/main

Update wallet connections, oktobertest blog

apps/nextjs/content/blogs/eternum-oktobertest.mdoc

@@ -0,0 +1,54 @@
+---
+author: Secretive
+publishDate: 2024-10-10T00:00:00.000Z
+title: 'Eternum: OktoberTest'
+image: image.png
+previewImage: previewImage.png
+subtitle: >-
+  The new version of Eternum has arrived. We invite you to celebrate, get to
+  know the game with the devs, and play with your fellow Lords in the
+  OktoberTest community events. Prost!
+---
+Schedule yourself an armor fitting, my lord, Eternum is coming at you with sword swinging.  We invite you to join your fellow Lords for *OktoberTest*.
+
+## **What is the Eternum OktoberTest?**
+
+Ready for battle? Ready for banter?  OktoberTest is raucous celebration of life and death in Eternum, washed down with ale, served with good company.
+
+There are streams, player challenges, community events - including game design briefings, economic reviews,  play-alongs with the game’s developers - and the chance to earn a little beer money.
+
+Sounds like a bit of you, my lord? Head to the [discord](https://discord.gg/realmsworld). Play the [latest version](https://eternum.realms.world/) of Eternum.
+
+You do not need to be a Realm owner to play in the Eternum *OktoberTest*.  You will be assigned a Realm when you first [play](https://eternum.realms.world/). The OktoberTest of Eternum takes place on a free-to-use testnet and there are zero in-game wallet transactions thanks to the [Cartridge](https://cartridge.gg/) Controller.  Let’s raise a toast to frictionless UX!
+
+## **What type of game is Eternum?**
+
+Eternum is a real time strategy MMO that will feel familiar to those who have played other strategy games.  You will understand the game and be up and running quickly.
+
+What we set to experience together is how a competitive multiplayer grand strategy game plays out when it is running on an open network. Anyone can make a prediction about how players will act, but it can't be know what will truly happen until the game is in production.
+
+There is a wildness to a blockchain-based game that cannot be compared to one running on a publisher’s centrally administered server. We expect players to push the boundaries of this mercurial world — and expand it — in ways no one has yet imagined for a strategy game, writing stories onchain, imperishably, and forever.
+
+Read about the fully onchain game [Eternum](https://eternum.realms.world/), [here](https://github.com/BibliothecaDAO/world-guide/blob/main/realms-world-guide-v1.0.0.pdf).
+
+## **What’s the goal of OktoberTest?**
+
+*OktoberTest* will beat you gently, easing you into the new world. You will learn about the game from devs and other players, compete in a low stakes environment, develop allies and enemies - toasting both with a beer in the Fool & Flintlock, the Realms pub, which will be open day and night in the [discord](https://discord.gg/realsmworld).
+
+[Playtesting](https://eternum.realms.world/) is the best way to improve Eternum.  Get into the world and start exploring.  Playing, and giving feedback, will speed up the hunt for a release candidate of the game. And its OktoberTest, so have fun doing it 🍻
+
+## **OktoberTest Event Schedule** 
+
+Over the opening days it will be low key streaming sessions - [drop in](https://discord.gg/realsmworld), or stream your own gameplay. Got questions? Ask them to the devs and community.
+
+Events to be scheduled will include game design briefings, social play sessions,  pop-up challenges with rewards.  Events take place in [Discord](https://discord.gg/realsmworld). It’s OktoberTest, so please bring your own stein, ml. 
+
+## **Play Eternum**
+
+··You can play the game in your browser [here](https://eternum.realms.world/) (desktop needed for current build).
+
+··[Join the community](https://discord.gg/realmsworld) and head to the Eternum channel.
+
+··Read about Eternum in the [World Guide](https://github.com/BibliothecaDAO/world-guide/blob/main/realms-world-guide-v1.0.0.pdf).
+
+··Follow the [new X profile](https://x.com/RealmsEternum) for news, insight, tips and stories from Eternum.

apps/nextjs/package.json

@@ -27,6 +27,7 @@
     "@mui/material": "^5.15.15",
     "@mui/styles": "^5.15.15",
     "@next/mdx": "^14.2.5",
+    "@cartridge/connector": "^0.3.46",
     "@rainbow-me/rainbowkit": "^2",
     "@realms-world/api": "workspace:*",
     "@realms-world/auth": "workspace:*",

apps/nextjs/src/app/(app)/account/lords/velords/VeLords.tsx

@@ -40,6 +40,7 @@ import { formatDistanceToNow } from "date-fns";
 import { differenceInSeconds, getUnixTime, fromUnixTime } from "date-fns";
 import { motion } from "framer-motion";
 import { formatNumber } from "@realms-world/utils";
+import Link from "next/link";
 
 const WEEK_IN_SECONDS = 7 * 24 * 60 * 60; // 1 week in seconds
 const YEAR_IN_SECONDS = 365 * 24 * 60 * 60; // 1 year in seconds
@@ -255,6 +256,21 @@ export const VeLords = () => {
           <CardDescription>Your share of Pool</CardDescription>
         </CardFooter>
       </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <Link
+              className="text-flamingo underline"
+              href="https://dune.com/redbeard/velords"
+            >
+              More Statistics
+            </Link>
+          </CardTitle>
+        </CardHeader>
+        <CardFooter>
+          <CardDescription>On Dune Analytics</CardDescription>
+        </CardFooter>
+      </Card>
       {/*<Card>
         <CardHeader>
           <CardTitle className="flex items-center">X.XX%</CardTitle>

apps/nextjs/src/app/(app)/layout.tsx

@@ -76,7 +76,6 @@ export default function Layout(props: { children: React.ReactNode }) {
                               </form>
                             </Alert>
                           )}
-                          {isEnabled.toString()}
                         </div>
                         <Footer />
                       </div>

apps/nextjs/src/app/_components/modal/StarknetLoginModal.tsx

@@ -1,12 +1,17 @@
 "use client";
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useUIStore } from "@/providers/UIStoreProvider";
-import { useAccount, useConnect } from "@starknet-react/core";
+import { useAccount, useConnect, argent } from "@starknet-react/core";
+import type { Connector } from "@starknet-react/core";
 
-import { Dialog, DialogContent, DialogHeader } from "@realms-world/ui/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+} from "@realms-world/ui/components/ui/dialog";
 import { Button } from "@realms-world/ui/components/ui/button";
-import WalletIcons from "../wallet/WalletIcons";
-import { Loader2 } from "lucide-react";
+import { Loader2, Mail } from "lucide-react";
+import { DialogTitle } from "@mui/material";
 
 export const StarknetLoginModal = () => {
   const { connectAsync, connectors } = useConnect();
@@ -18,8 +23,6 @@ export const StarknetLoginModal = () => {
   } = useUIStore((state) => state);
   const { isConnected, isConnecting } = useAccount();
 
-
-
   const wallets = [
     {
       id: "argentX",
@@ -85,6 +88,33 @@ export const StarknetLoginModal = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected]);
 
+  const [pendingConnectorId, setPendingConnectorId] = useState<
+    string | undefined
+  >(undefined);
+
+  const connect = useCallback(
+    async (connector: Connector) => {
+      //setModalEnabled(false)
+      setPendingConnectorId(connector.id);
+      try {
+        if (connector.available()) {
+          await connectAsync({ connector });
+        } else {
+          window.open(getConnectorDiscovery(connector.id));
+        }
+      } catch (error) {
+        //setModalEnabled(true);
+        console.error(error);
+      }
+      setPendingConnectorId(undefined);
+    },
+    [connectAsync],
+  );
+
+  function isWalletConnecting(connectorId: string) {
+    return pendingConnectorId === connectorId;
+  }
+
   return (
     <Dialog open={isStarknetLoginOpen} onOpenChange={toggleStarknetLogin}>
       <DialogContent className="w-full min-w-[350px] !pt-8">
@@ -96,9 +126,9 @@ export const StarknetLoginModal = () => {
           }}
           //className="fixed top-0 left-0 z-50 h-full w-72 bg-grey-11 md:w-[70vw]"
         >*/}
-        <DialogHeader>
+        <DialogTitle>
           <h6 className="-mt-3 mb-6 text-base">Connect Starknet Wallet</h6>
-        </DialogHeader>
+        </DialogTitle>
         <div className="flex flex-col space-y-2 self-center">
           {connectors.map((connector) => {
             const connectorInfo = wallets.find(
@@ -107,21 +137,33 @@ export const StarknetLoginModal = () => {
             return (
               <div className="mt-5 flex justify-center" key={connector.id}>
                 <Button
-                  className="w-full justify-between self-center px-4 py-6 font-sans text-lg font-light capitalize"
+                  className="w-full items-center justify-between self-center px-4 py-6 font-sans text-lg font-light capitalize"
                   variant={"outline"}
-                  onClick={() =>
-                    connector.available
-                      ? connectAsync({ connector })
-                      : window.open(getConnectorDiscovery(connector.id))
-                  }
+                  onClick={() => connect(connector)}
                 >
                   <div className="flex items-center justify-center">
-                    {isConnecting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <WalletIcons id={connector.id} />}
+                    {isWalletConnecting(connector.id) ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : connector.id !== "argentWebWallet" ? (
+                      <img
+                        src={
+                          connector.id === "argentMobile"
+                            ? argent().icon
+                            : (connector.icon.dark ?? connector.icon)
+                        }
+                        className="mr-3 size-6"
+                        alt={`${connector.name}`}
+                      />
+                    ) : (
+                      <Mail className="mr-3" />
+                    )}
 
                     {!connector.available ? "Install " : ""}
                     {connectorInfo?.name
                       ? `${connectorInfo.name}`
-                      : "Login with Email"}
+                      : connector.controller
+                        ? "Cartridge"
+                        : "Login with Email"}
                   </div>
                 </Button>
               </div>

apps/nextjs/src/providers/Web3Providers.tsx

@@ -20,6 +20,7 @@ import {
   ArgentMobileConnector,
   isInArgentMobileAppBrowser,
 } from "starknetkit/argentMobile";
+import CartridgeConnector from "@cartridge/connector";
 import { InjectedConnector } from "starknetkit/injected";
 import { WebWalletConnector } from "starknetkit/webwallet";
 import { http, WagmiProvider } from "wagmi";
@@ -48,11 +49,11 @@ const starkConnectors = isInArgentMobileAppBrowser()
       }),
     ]
   : [
+      new CartridgeConnector({
+        rpc: "https://api.cartridge.gg/x/starknet/mainnet",
+      }),
       new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }),
       new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }),
-      new WebWalletConnector({
-        url: "https://web.argent.xyz",
-      }),
       ArgentMobileConnector.init({
         options: {
           url: typeof window !== "undefined" ? window.location.href : "",
@@ -62,6 +63,9 @@ const starkConnectors = isInArgentMobileAppBrowser()
             : constants.NetworkName.SN_MAIN,
         },
       }),
+      new WebWalletConnector({
+        url: "https://web.argent.xyz",
+      }),
     ];
 
 const theme = darkTheme({

package.json

@@ -3,7 +3,7 @@
   "engines": {
     "node": ">=20.16.0"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "scripts": {
     "build": "turbo run build",
     "build:fh": "turbo run build -F @realms-world/frontinus...",