working on relative paths & saving to Ceramic 🧇

package.json

@@ -10,10 +10,10 @@
   "scripts": {
     "pass": "echo ¡Passing‼️",
     "update-schema": "env-cmd -x rover graph introspect http://localhost:8080/v1/graphql --header \"x-hasura-admin-secret:\\$HASURA_GRAPHQL_ADMIN_SECRET\" --output schema.graphql",
-    "docker:start": "docker-compose up -d",
-    "docker:build": "docker-compose up --build -d",
-    "docker:stop": "docker-compose down",
-    "docker:clean": "docker-compose down -v",
+    "docker:start": "docker compose up -d",
+    "docker:build": "docker compose up --build -d",
+    "docker:stop": "docker compose down",
+    "docker:clean": "docker compose down -v",
     "docker:dev": "DOCKER_BUILDKIT=1 docker compose up --build",
     "docker:debug": "docker compose --progress=plain up --build",
     "build": "lerna run --concurrency 1 --stream build",

packages/backend/src/handlers/actions/composeDB/cacheHelper.ts

@@ -1,7 +1,7 @@
 import { Maybe } from '@metafam/utils';
 import Bottleneck from 'bottleneck';
 
-import { updatePlayerFromComposeDB } from './updatePlayerFromComposeDB.js';
+import { updatePlayerFromComposeDB } from '#handlers/actions/composeDB/updatePlayerFromComposeDB';
 
 let count = 0;
 

packages/backend/src/handlers/actions/composeDB/routes.ts

@@ -1,9 +1,8 @@
 import express from 'express';
 
 import { asyncHandlerWrapper } from '#lib/apiHelpers';
-
-import linkProfileNode from './linkProfileNode/handler.js';
-import updateSingleProfileHandler from './updateSingleProfile/handler.js';
+import linkProfileNode from '#handlers/actions/composeDB/linkProfileNode/handler';
+import updateSingleProfileHandler from '#handlers/actions/composeDB/updateSingleProfile/handler';
 
 export const routes = express.Router();
 

packages/backend/src/handlers/actions/composeDB/updateSingleProfile/handler.ts

@@ -1,6 +1,6 @@
 import { Request, Response } from 'express';
 
-import { queueRecache } from '../cacheHelper.js';
+import { queueRecache } from '#handlers/actions/composeDB/cacheHelper';
 
 export default async (req: Request, res: Response): Promise<void> => {
   const role = req.body.session_variables['x-hasura-role'];

packages/backend/src/handlers/actions/guild/routes.ts

@@ -2,9 +2,9 @@ import express from 'express';
 
 import { asyncHandlerWrapper } from '#lib/apiHelpers';
 
-import { handleOAuthCallback } from './discord/oauthHandler.js';
-import { saveGuildHandler } from './saveGuildHandler.js';
-import { saveGuildLayoutHandler } from './saveGuildLayoutHandler.js';
+import { handleOAuthCallback } from '#handlers/actions/guild/discord/oauthHandler';
+import { saveGuildHandler } from '#handlers/actions/guild/saveGuildHandler';
+import { saveGuildLayoutHandler } from '#handlers/actions/guild/saveGuildLayoutHandler';
 
 export const guildRoutes = express.Router();
 

packages/backend/src/handlers/actions/guild/saveGuildLayoutHandler.ts

@@ -3,8 +3,8 @@ import { Request, Response } from 'express';
 import {
   Guild_Set_Input,
   GuildLayoutInfoInput,
-} from '../../../lib/autogen/hasura-sdk.js';
-import { client } from '../../../lib/hasuraClient.js';
+} from '#lib/autogen/hasura-sdk';
+import { client } from '#lib/hasuraClient';
 
 export const saveGuildLayoutHandler = async (
   req: Request,

packages/backend/src/handlers/actions/guild/sync.ts

@@ -9,9 +9,9 @@ import {
   GuildFragment,
   GuildStatus_Enum,
   SyncGuildMembersMutation,
-} from '../../../lib/autogen/hasura-sdk.js';
-import { client } from '../../../lib/hasuraClient.js';
-import { GuildRow, toGuild, TriggerPayload } from '../../triggers/types.js';
+} from '#lib/autogen/hasura-sdk';
+import { client } from '#lib/hasuraClient';
+import { GuildRow, toGuild, TriggerPayload } from '#handlers/triggers/types';
 
 export const syncDiscordGuildMembers = async (
   payload: TriggerPayload<GuildRow>,

packages/backend/src/handlers/auth-webhook/handler.ts

@@ -3,7 +3,7 @@ import { Request, Response } from 'express';
 import { createPublicClient, http } from 'viem'
 import { mainnet } from 'viem/chains'
 
-import { getOrCreatePlayerId } from './users.js';
+import { getOrCreatePlayerId } from '#handlers/auth-webhook/users';
 
 const unauthorizedVariables = {
   'X-Hasura-Role': 'public',

packages/backend/src/handlers/auth-webhook/users.ts

@@ -1,8 +1,7 @@
 import Bottleneck from 'bottleneck';
 
 import { client } from '#lib/hasuraClient';
-
-import { cacheProfile } from '../actions/composeDB/cacheHelper.js';
+import { cacheProfile } from '#handlers/actions/composeDB/cacheHelper';
 
 async function createPlayer(ethAddress: string, limiter: Bottleneck) {
   const { insert_profile: insert } = await client.CreatePlayerFromETH({

packages/backend/src/index.ts

@@ -2,9 +2,9 @@ import Bottleneck from 'bottleneck';
 import cors from 'cors';
 import express, { Express, RequestHandler } from 'express';
 
-import { CONFIG } from './config.js';
-import { router } from './handlers/routes.js';
-import { errorMiddleware } from './lib/apiHelpers.js';
+import { CONFIG } from '#config';
+import { router } from '#handlers/routes';
+import { errorMiddleware } from '#lib/apiHelpers';
 
 const app: Express = express();
 

packages/utils/package.json

@@ -29,6 +29,7 @@
     "@composedb/types": "^0.7.1",
     "@types/uuid": "^10.0.0",
     "key-did-provider-ed25519": "^2.0.1",
-    "key-did-resolver": "^2.1.3"
+    "key-did-resolver": "^2.1.3",
+    "typescript": "^5.5.3"
   }
 }

packages/utils/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "rootDir": "src/",
     "outDir": "dist/",
-    "tsBuildInfoFile": "dist/.tsbuildinfo",
-    "composite": true
+    "tsBuildInfoFile": "dist/.tsbuildinfo"
   },
   "include": ["src/**/*", "src/**/*.json"]
 }

packages/web/components/ConnectedPage.tsx

@@ -7,30 +7,17 @@ import { useAccount } from 'wagmi';
 import { Player } from '#graphql/autogen/hasura-sdk';
 import { getPlayer } from '#graphql/getPlayer';
 import { useMounted, useUser } from '#lib/hooks';
-import { errorHandler } from '#utils/errorHandler';
 
 type PlayerPageType = React.FC<{ player: Maybe<Player> }>;
 
 export const ConnectedPage: React.FC<{
   page: PlayerPageType;
   label?: string;
 }> = ({ page: Page, label = 'this page' }) => {
-  const { address, isConnected, isConnecting } = useAccount();
-  const [player, setPlayer] = useState<Maybe<Player>>(null);
-  const { user, fetching, error } = useUser();
+  const { isConnected, isConnecting } = useAccount();
+  const { user: player } = useUser()
   const mounted = useMounted();
 
-  useEffect(() => {
-    if (!address) return;
-    function getPeople() {
-      if (address) {
-        return getPlayer(address);
-      }
-      throw new Error('No address');
-    }
-    getPeople().then(setPlayer);
-  }, [address]);
-
   if (!mounted || (!isConnecting && !isConnected)) {
     return (
       <Flex textAlign="center" mt="25vh" align="center" justifyContent="center">
@@ -41,37 +28,21 @@ export const ConnectedPage: React.FC<{
     );
   }
 
-  if (isConnecting || fetching) {
+  if (isConnecting) {
     return (
       <Center h="100vh">
         <Stack align="center">
-          <Text fontSize="xl">
-            {isConnecting ? 'Connecting…' : 'Fetching User…'}
-          </Text>
+          <Text fontSize="xl">Connecting…</Text>
           <Spinner thickness="0.25rem" color="whiteAlpha" size="xl" />
         </Stack>
       </Center>
     );
   }
 
-  if (address && player) {
+  if (player) {
     return <Page {...{ player }} />;
   }
 
-  if (error) {
-    errorHandler(error);
-    return (
-      <Center h="100vh">
-        <Stack align="center">
-          <Text>
-            Error Loading User: <q>{error.message}</q>
-          </Text>
-          <ConnectKitButton />
-        </Stack>
-      </Center>
-    );
-  }
-
   return (
     <Text textAlign="center" mt="25vh">
       Not sure how we got here… Something is decidedly amiss. Please{' '}

packages/web/components/EditProfileModal.tsx

@@ -249,7 +249,7 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({
     }
   };
 
-  if (chainId !== '0xa') {
+  if (chainId !== 10) {
     return (
       <Modal {...{ isOpen, onClose }}>
         <ModalOverlay />

packages/web/components/EditableGridLayout.tsx

@@ -317,7 +317,7 @@ export const EditableGridLayout: React.FC<Props> = ({
               borderRadius="lg"
               transition="boxShadow 0.2s 0.3s ease"
               id={key}
-              {...{ key }}
+              key={key}
             >
               {type === BoxTypes.ADD_NEW_BOX ? (
                 <AddBoxSection

packages/web/components/MegaMenu/MegaMenuHeader.tsx

@@ -47,6 +47,7 @@ import {
   getPlayerURL,
   getPlayerUsername,
 } from 'utils/playerHelpers';
+import { useAccount } from 'wagmi';
 
 import LogoImage from '#assets/new_logo_svg.svg';
 import SearchIcon from '#assets/search-icon.svg';
@@ -62,6 +63,8 @@ import { useMounted, useUser, useWeb3 } from '#lib/hooks';
 import { useProfileImageOnload } from '#lib/hooks/useProfileImageOnload';
 import { menuIcons } from '#utils/menuIcons';
 import { MenuSectionLinks } from '#utils/menuLinks';
+import { authenticateWallet } from '#contexts/Web3Context';
+import { useViemClients } from '#lib/hooks/useEthersProvider';
 
 type LogoProps = {
   link: string;
@@ -610,12 +613,12 @@ export const MegaMenuHeader: React.FC = () => {
               w="15%"
             >
               <ConnectKitButton.Custom>
-                {({ isConnected, isConnecting, show }) =>
+                {({ isConnected, isConnecting, show }) => (
                   isConnected ? (
                     !!user ? (
                       <DesktopPlayerStats player={user} />
                     ) : (
-                      <Text>Missing User</Text>
+                      <Button onClick={show}>Missing User Record</Button>
                     )
                   ) : (
                     <Button
@@ -631,7 +634,7 @@ export const MegaMenuHeader: React.FC = () => {
                       Connect Wallet
                     </Button>
                   )
-                }
+                )}
               </ConnectKitButton.Custom>
             </Box>
           </Flex>

packages/web/components/Patron/PatronRank.tsx

@@ -13,7 +13,7 @@ type Props = {
   pSeedPrice: Maybe<number>;
 };
 
-export const PatronRank: React.FC<Props> = ({ index, patron, pSeedPrice }) => {
+export const PatronRank: React.FC<Props> = ({ index, patron, pSeedPrice: price }) => {
   const player = patron as Player;
 
   const patronRank = useMemo(
@@ -22,15 +22,14 @@ export const PatronRank: React.FC<Props> = ({ index, patron, pSeedPrice }) => {
   );
 
   const displayBalance = useMemo(() => {
-    const pSeedAmount = patron.pSeedBalance
-    console.debug({ pSeedAmount });
-    const pSeedBalance = `${Math.floor(pSeedAmount).toLocaleString()} pSEED`;
-    return pSeedPrice == null
-      ? pSeedBalance
-      : `$${(pSeedAmount * pSeedPrice).toLocaleString(undefined, {
+    const { pSeedBalance: balance } = patron
+    const display = `${Math.floor(balance).toLocaleString()} pSEED`;
+    return price == null
+      ? display
+      : `$${(balance * price).toLocaleString(undefined, {
           maximumFractionDigits: 0,
         })}`;
-  }, [patron, pSeedPrice]);
+  }, [patron, price]);
 
   return (
     <Flex

packages/web/components/Player/PlayerStart.tsx

@@ -25,7 +25,7 @@ export const PlayerStart: React.FC = () => {
   }, [connected, user, fetching]);
 
   const canRedirect = useMemo(
-    () => connected && !fetching && chainId === '0xa',
+    () => connected && !fetching && chainId === 10,
     [connected, fetching, chainId],
   );
 

packages/web/components/Player/Profile/ComposeDBPromptModal.tsx

@@ -27,6 +27,7 @@ import { useComputeComposeDBImageMetadata } from '#lib/hooks/ceramic/useComputeC
 import { useSaveToComposeDB } from '#lib/hooks/ceramic/useSaveToComposeDB';
 import { errorHandler } from '#utils/errorHandler';
 import { hasuraToComposeDBProfile } from '#utils/playerHelpers';
+import { useEthersProvider } from '#lib/hooks/useEthersProvider';
 
 export type ComposeDBPromptModalProps = {
   player: Player;
@@ -43,7 +44,10 @@ export const ComposeDBPromptModal: React.FC<ComposeDBPromptModalProps> = ({
   onClose,
   handleMigrationCompleted,
 }) => {
-  const toast = useToast();
+  const toast = useToast({
+    isClosable: true,
+    duration: 12000,
+  });
   const [status, setStatus] = useState(initialStatus);
   const { chainId } = useWeb3();
 
@@ -83,8 +87,14 @@ export const ComposeDBPromptModal: React.FC<ComposeDBPromptModalProps> = ({
     }
   }, [saveStatus]);
 
+  const provider = useEthersProvider()
   const onClick = useCallback(async () => {
     if (!player.profile) {
+      toast({
+        title: 'ComposeDB Migration Failed',
+        description: `Your player record has no profile.`,
+        status: 'error',
+      });
       return;
     }
     try {
@@ -98,20 +108,16 @@ export const ComposeDBPromptModal: React.FC<ComposeDBPromptModalProps> = ({
       handleMigrationCompleted(streamID);
       onClose();
       toast({
-        title: 'ComposeDB migration complete',
+        title: 'ComposeDB Migration Complete',
         description: `Your profile streamID is ${streamID}`,
         status: 'success',
-        isClosable: true,
-        duration: 12000,
       });
     } catch (err) {
       const heading = err instanceof CeramicError ? 'Ceramic Error' : 'Error';
       toast({
         title: heading,
         description: (err as Error).message,
         status: 'error',
-        isClosable: true,
-        duration: 12000,
       });
       errorHandler(err as Error);
       setStatus(initialStatus);
@@ -201,7 +207,7 @@ export const ComposeDBPromptModal: React.FC<ComposeDBPromptModalProps> = ({
           </Center>
         </ModalBody>
         <ModalFooter justifyContent="center">
-          {chainId === '0xa' ? (
+          {chainId === 10 ? (
             <MetaButton disabled={!areImagesLoaded} {...{ onClick }}>
               {status}
             </MetaButton>

packages/web/components/QuestChain/MintNFTTile.tsx

@@ -55,8 +55,8 @@ export const MintNFTTile: React.FC<MintNFTTileProps> = ({
   const contract = useQuestChainContract(questChain.address);
   const onMint = useCallback(async () => {
     try {
-      if (!chainId || questChain.chainId !== chainId) {
-        throw new Error(`Wrong chain id: "${chainId}".`);
+      if (!chainId || Number(questChain.chainId) !== chainId) {
+        throw new Error(`Wrong chain id: "${chainId}" when wanting "${questChain.chainId}".`);
       }
       if (!address) {
         throw new Error('No client address found.');
@@ -86,7 +86,7 @@ export const MintNFTTile: React.FC<MintNFTTileProps> = ({
         duration: null,
       });
       await helpers.waitUntilSubgraphIndexed(
-        chainId,
+        `0x${chainId.toString(16)}`,
         Number(receipt.blockNumber),
       );
       addToast({

packages/web/components/Setup/SetupHeader.tsx

@@ -28,7 +28,7 @@ export const SetupHeader: React.FC = () => {
   );
 
   const { connected, chainId } = useWeb3();
-  if (!connected || chainId !== '0xa') return null;
+  if (!connected || chainId !== 10) return null;
 
   return (
     <Grid templateColumns={templateColumns.join(' ')} gap={[1, 4]} w="full">