🔧 Turn example into https and profile handles wasm cfg

examples/next/.gitignore

@@ -4,3 +4,5 @@ node_modules/
 /blob-report/
 /playwright/.cache/
 !/src/abi/
+
+certificates

examples/next/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.5.7",
   "scripts": {
-    "dev": "next dev -p 3002",
+    "dev": "next dev -p 3002 --experimental-https",
     "build": "next build",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",

packages/profile/.env.development

@@ -2,4 +2,4 @@ VITE_CARTRIDGE_API_URL="http://localhost:8000"
 VITE_KEYCHAIN_URL="http://localhost:3001"
 VITE_RPC_SEPOLIA="http://localhost:8001/x/starknet/sepolia"
 VITE_POSTHOG_KEY=phc_UWaJajNQ00PjHhveZ81SJ2zVtBicKrzewdZHGiyavQQ
-VITE_POSTHOG_HOST=https://profile.cartridge.gg/ingest
+VITE_POSTHOG_HOST=https://profile.cartridge.gg/ingest

packages/profile/package.json

@@ -12,10 +12,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@bal7hazar/arcade-sdk": "^0.0.24",
     "@cartridge/controller": "workspace:*",
     "@cartridge/penpal": "^6.2.3",
     "@cartridge/ui-next": "workspace:*",
     "@cartridge/utils": "workspace:*",
+    "@dojoengine/core": "^1.0.8",
+    "@dojoengine/torii-client": "^1.0.8",
     "@hookform/resolvers": "^3.9.1",
     "compare-versions": "^6.1.1",
     "lodash": "^4.17.21",
@@ -28,6 +31,8 @@
     "sonner": "^1.4.41",
     "starknet": "^6.11.0",
     "viem": "^2.21.32",
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

packages/profile/src/components/achievements/index.tsx

@@ -14,7 +14,10 @@ import { useParams } from "react-router-dom";
 import { Trophies } from "./trophies";
 import { Pinneds } from "./pinneds";
 import { Leaderboard } from "./leaderboard";
-import { useData } from "@/hooks/context";
+import { useConnection, useData } from "@/hooks/context";
+import { useArcade } from "@/hooks/arcade";
+import { GameModel } from "@bal7hazar/arcade-sdk";
+import { addAddressPadding } from "starknet";
 
 export function Achievements() {
   const { username: selfname, address: self } = useAccount();
@@ -23,22 +26,33 @@ export function Achievements() {
     setAccountAddress,
   } = useData();
 
+  const { pins, games } = useArcade();
+
   const { address } = useParams<{ address: string }>();
   const { username } = useUsername({ address: address || self || "" });
+  const { project, namespace } = useConnection();
 
   const [activeTab, setActiveTab] = useState<"trophies" | "leaderboard">(
     "trophies",
   );
 
+  const game: GameModel | undefined = useMemo(() => {
+    return Object.values(games).find(
+      (game) => game.namespace === namespace && game.project === project,
+    );
+  }, [games, project, namespace]);
+
   const { pinneds, completed, total } = useMemo(() => {
+    const ids =
+      address || self ? pins[addAddressPadding(address || self || "")] : [];
     const pinneds = achievements
-      .filter((item) => item.completed)
+      .filter((item) => ids.includes(item.id))
       .sort((a, b) => parseFloat(a.percentage) - parseFloat(b.percentage))
-      .slice(0, 3);
+      .slice(0, 3); // There is a front-end limit of 3 pinneds
     const completed = achievements.filter((item) => item.completed).length;
     const total = achievements.length;
     return { pinneds, completed, total };
-  }, [achievements]);
+  }, [achievements, pins, address, self]);
 
   const { rank, earnings } = useMemo(() => {
     const rank =
@@ -113,7 +127,8 @@ export function Achievements() {
                   achievements={achievements}
                   softview={!isSelf}
                   enabled={pinneds.length < 3}
-                  onPin={() => {}}
+                  game={game}
+                  pins={pins}
                 />
               </div>
             </ScrollArea>
@@ -123,6 +138,7 @@ export function Achievements() {
               players={players}
               address={self}
               achievements={achievements}
+              pins={pins}
             />
           )}
         </LayoutContent>

packages/profile/src/components/achievements/leaderboard.tsx

@@ -9,15 +9,18 @@ import { Link, useLocation } from "react-router-dom";
 import { Item, Player } from "@/hooks/achievements";
 import { useUsername } from "@/hooks/account";
 import { useMemo } from "react";
+import { addAddressPadding } from "starknet";
 
 export function Leaderboard({
   players,
   address,
   achievements,
+  pins,
 }: {
   players: Player[];
   address: string;
   achievements: Item[];
+  pins: { [playerId: string]: string[] };
 }) {
   return (
     <div className="flex flex-col gap-y-px rounded-md overflow-hidden relative">
@@ -31,6 +34,7 @@ export function Leaderboard({
             completeds={player.completeds}
             achievements={achievements}
             rank={index + 1}
+            pins={pins}
           />
         ))}
       </ScrollArea>
@@ -45,13 +49,15 @@ function Row({
   rank,
   completeds,
   achievements,
+  pins,
 }: {
   self: boolean;
   address: string;
   earnings: number;
   rank: number;
   completeds: string[];
   achievements: Item[];
+  pins: { [playerId: string]: string[] };
 }) {
   const { username } = useUsername({ address });
   const location = useLocation();
@@ -62,20 +68,20 @@ function Row({
   }, [location.pathname, address, self]);
 
   const trophies = useMemo(() => {
-    const data = achievements.filter((achievement) =>
-      completeds.includes(achievement.id),
-    );
-    const tops = data
+    const ids = (address ? pins[addAddressPadding(address)] : []) || [];
+    const pinneds = achievements
+      .filter((achievement) => completeds.includes(achievement.id))
+      .filter((item) => ids.includes(item.id))
       .sort((a, b) => parseFloat(a.percentage) - parseFloat(b.percentage))
-      .slice(0, 3);
-    return tops
+      .slice(0, 3); // There is a front-end limit of 3 pinneds
+    return pinneds
       .filter((achievement) => achievement)
       .map((achievement) => ({
         address,
         id: achievement.id,
         icon: achievement.icon,
       }));
-  }, [achievements, completeds, address]);
+  }, [achievements, completeds, address, pins]);
 
   return (
     <Link

packages/profile/src/components/achievements/trophies.tsx

@@ -7,19 +7,22 @@ import {
 import { Trophy } from "./trophy";
 import { Item } from "@/hooks/achievements";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { GameModel } from "@bal7hazar/arcade-sdk";
 
 const HIDDEN_GROUP = "HIDDEN";
 
 export function Trophies({
   achievements,
   softview,
   enabled,
-  onPin,
+  game,
+  pins,
 }: {
   achievements: Item[];
   softview: boolean;
   enabled: boolean;
-  onPin: (id: string) => void;
+  game: GameModel | undefined;
+  pins: { [playerId: string]: string[] };
 }) {
   const [groups, setGroups] = useState<{ [key: string]: Item[] }>({});
 
@@ -74,7 +77,8 @@ export function Trophies({
               items={items}
               softview={softview}
               enabled={enabled}
-              onPin={onPin}
+              game={game}
+              pins={pins}
             />
           ))}
         <Group
@@ -85,7 +89,8 @@ export function Trophies({
           )}
           softview={softview}
           enabled={enabled}
-          onPin={onPin}
+          game={game}
+          pins={pins}
         />
       </div>
     </div>
@@ -97,13 +102,15 @@ function Group({
   items,
   softview,
   enabled,
-  onPin,
+  game,
+  pins,
 }: {
   group: string;
   items: Item[];
   softview: boolean;
   enabled: boolean;
-  onPin: (id: string) => void;
+  game: GameModel | undefined;
+  pins: { [playerId: string]: string[] };
 }) {
   const [page, setPage] = useState(0);
   const [pages, setPages] = useState<number[]>([]);
@@ -172,12 +179,12 @@ function Group({
           timestamp={achievement.timestamp}
           hidden={achievement.hidden}
           completed={achievement.completed}
-          pinned={achievement.pinned}
           id={achievement.id}
           softview={softview}
           enabled={enabled}
           tasks={achievement.tasks}
-          onPin={onPin}
+          game={game}
+          pins={pins}
         />
       ))}
     </div>