Sero/w3s

.github/workflows/gcp-deploy-frontend.yaml

@@ -148,6 +148,9 @@ jobs:
             GCAL_CLIENT_EMAIL=${{secrets.GCAL_CLIENT_EMAIL}}
             GCAL_PROJECT_NUMBER=${{secrets.GCAL_PROJECT_NUMBER}}
             GCAL_CALENDAR_ID=${{secrets.GCAL_CALENDAR_ID}}
+            WEB3_STORAGE_DID=${{secrets.WEB3_STORAGE_DID}}
+            WEB3_STORAGE_PROOF=${{secrets.WEB3_STORAGE_PROOF}}
+            WEB3_STORAGE_KEY=${{secrets.WEB3_STORAGE_KEY}}
           push: true
 
   deploy-frontend:
@@ -180,7 +183,10 @@ jobs:
             --set-env-vars OPENSEA_API_KEY="${{secrets.OPENSEA_API_KEY}}" \
             --set-env-vars NEXT_PUBLIC_GCAL_CALENDAR_ID="${{secrets.GCAL_CALENDAR_ID}}" \
             --set-env-vars NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="${{secrets.GOOGLE_ANALYTICS_ID}}" \
-            --set-env-vars NEXT_PUBLIC_YOUTUBE_API_KEY="${{secrets.YOUTUBE_API_KEY}}"
+            --set-env-vars NEXT_PUBLIC_YOUTUBE_API_KEY="${{secrets.YOUTUBE_API_KEY}}" \
+            --set-env-vars NEXT_PUBLIC_WEB3_STORAGE_DID="${{secrets.WEB3_STORAGE_DID}}" \
+            --set-env-vars NEXT_PUBLIC_WEB3_STORAGE_PROOF="${{secrets.WEB3_STORAGE_PROOF}}" \
+            --set-env-vars NEXT_PUBLIC_WEB3_STORAGE_KEY="${{secrets.WEB3_STORAGE_KEY}}" \
 
 
   finish-deployment:

.github/workflows/gcp-deploy-pr.yaml

@@ -481,6 +481,9 @@ jobs:
             GCAL_PROJECT_NUMBER=${{secrets.GCAL_PROJECT_NUMBER}}
             GCAL_CLIENT_EMAIL=${{secrets.GCAL_CLIENT_EMAIL}}
             GCAL_CALENDAR_ID=${{secrets.GCAL_CALENDAR_ID}}
+            WEB3_STORAGE_DID=${{secrets.WEB3_STORAGE_DID}}
+            WEB3_STORAGE_PROOF=${{secrets.WEB3_STORAGE_PROOF}}
+            WEB3_STORAGE_KEY=${{secrets.WEB3_STORAGE_KEY}}
           push: true
 
   deploy-frontend:
@@ -519,7 +522,11 @@ jobs:
             --set-env-vars NEXT_PUBLIC_GCAL_CALENDAR_ID="${{secrets.GCAL_CALENDAR_ID}}" \
             --set-env-vars OPENSEA_API_KEY="${{secrets.OPENSEA_API_KEY}}" \
             --set-env-vars NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="${{secrets.GOOGLE_ANALYTICS_ID}}" \
-            --set-env-vars NEXT_PUBLIC_YOUTUBE_API_KEY="${{secrets.YOUTUBE_API_KEY}}"
+            --set-env-vars NEXT_PUBLIC_YOUTUBE_API_KEY="${{secrets.YOUTUBE_API_KEY}}" \
+            --set-env-vars NEXT_PUBLIC_YOUTUBE_API_KEY="${{secrets.YOUTUBE_API_KEY}}" \
+            --set-env-vars NEXT_PUBLIC_WEB3_STORAGE_DID="${{secrets.WEB3_STORAGE_DID}}" \
+            --set-env-vars NEXT_PUBLIC_WEB3_STORAGE_PROOF="${{secrets.WEB3_STORAGE_PROOF}}" \
+            --set-env-vars NEXT_PUBLIC_WEB3_STORAGE_KEY="${{secrets.WEB3_STORAGE_KEY}}" \
 
   seed-db:
     name: Seed Database

packages/web/components/Dashboard/QuestChainsPinned.tsx

@@ -28,7 +28,7 @@ export const QuestChainsPinned: React.FC = () => {
         setIsLoading(false);
       } catch (error) {
         setIsLoading(false);
-        console.error('Failed to get pinned quest chains:', error);
+        console.error('Failed to get pinned Playbooks:', error);
       }
     };
     if (user?.id) getPinnedQuestChains(user.id);
@@ -49,7 +49,7 @@ export const QuestChainsPinned: React.FC = () => {
       <Flex direction="column" align="center" justify="center" h="17rem">
         <Text textAlign="center">
           <MetaButton onClick={connect}>Connect</MetaButton>
-          <Text>to see your pinned Quest Chains</Text>
+          <Text>to see your pinned Playbooks</Text>
         </Text>
       </Flex>
     );
@@ -59,7 +59,7 @@ export const QuestChainsPinned: React.FC = () => {
     return (
       <Stack p={6} w="100%" gap={4}>
         <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
-          Pinned Quest Chains
+          Pinned Playbooks
         </Text>
         <Spinner />
       </Stack>
@@ -69,7 +69,7 @@ export const QuestChainsPinned: React.FC = () => {
   return (
     <Stack p={6} w="100%" gap={4}>
       <Text fontSize="lg" fontWeight="bold" textTransform="uppercase">
-        Pinned Quest Chains
+        Pinned Playbooks
       </Text>
       {pinnedQuestChains.length > 0 ? (
         <Stack spacing={3}>
@@ -107,10 +107,10 @@ export const QuestChainsPinned: React.FC = () => {
         </Stack>
       ) : (
         <Text>
-          You haven't started any Quest Chains yet. Visit the{' '}
+          You haven't started any Playbooks yet. Visit the{' '}
           <MetaLink href="/academy">Academy</MetaLink> to get started!
         </Text>
       )}
     </Stack>
   );
-};
+};

packages/web/components/EditProfileModal.tsx

@@ -55,7 +55,6 @@ import { errorHandler } from 'utils/errorHandler';
 import { getImageDimensions } from 'utils/imageHelpers';
 import { isEmpty } from 'utils/objectHelpers';
 import { hasuraToComposeDBProfile } from 'utils/playerHelpers';
-import { uploadFiles } from 'utils/uploadHelpers';
 
 import { ConnectToProgress } from './ConnectToProgress';
 import { EditAvatarImage } from './Player/Profile/EditAvatarImage';
@@ -106,7 +105,7 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({
   const { username } = player.profile ?? {};
   const { save } = useSaveToComposeDB();
   const [, invalidateCache] = useInsertCacheInvalidationMutation();
-
+  const { w3storage } = useWeb3();
   const initialFormValues = useMemo(
     () => getDefaultFormValues(player),
     [player],
@@ -174,8 +173,6 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({
         return null;
       }
 
-      const formData = new FormData();
-
       const changedInputs = Object.fromEntries(
         Object.entries(inputs).filter(([key]) => !isHasuraImageField(key)),
       );
@@ -185,51 +182,31 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({
         hasuraImageFields.map((field) => [field, null]),
       ) as Record<HasuraImageFieldKey, Maybe<ComposeDBImageMetadata>>;
 
-      const toType = (key: string) => {
-        const match = key.match(/^(.+?)(Image)?(URL)$/i);
-        const [name] = match?.slice(1) ?? ['unknown'];
-        return name;
-      };
-
       if (Object.keys(pickedFiles).length > 0) {
         setStatus('Uploading images to web3.storage…');
 
-        // Upload all the files to /api/storage
-        Object.entries(pickedFiles).forEach(([key, file]) => {
-          formData.append(toType(key), file);
-        });
-        const response = await uploadFiles(formData);
-
+        const rootCID = await w3storage?.uploadDirectory(Object.values(pickedFiles))
         await Promise.all(
           Object.entries(pickedFileDataURLs).map(async ([key, val]) => {
-            const tKey = toType(key);
-            if (!response[tKey]) {
-              toast({
-                title: 'Error Saving Image',
-                description: `Uploaded "${tKey}" & didn't get a response back.`,
-                status: 'warning',
-                isClosable: true,
-                duration: 8000,
-              });
-            } else {
-              setStatus('Calculating image metadata…');
-              const mime = getMimeType(val);
-              const file = pickedFiles[key as HasuraImageFieldKey];
-
-              const imageMetadata = {
-                url: `ipfs://${response[tKey]}`,
-                mimeType: mime,
-                size: file?.size,
-              } as ComposeDBImageMetadata;
+            setStatus('Calculating image metadata…');
+            const file = pickedFiles[key as HasuraImageFieldKey];
+            if (!file) {
+              throw new Error(`No \`file\` for "${key}".`);
+            }
 
-              const { width, height } = await getImageDimensions(val);
-              if (width && height) {
-                imageMetadata.width = width;
-                imageMetadata.height = height;
-              }
+            const imageMetadata = {
+              url: `ipfs://${rootCID}/${file.name}`,
+              mimeType: getMimeType(val),
+              size: file.size,
+            } as ComposeDBImageMetadata;
 
-              profileImages[key as HasuraImageFieldKey] = imageMetadata;
+            const { width, height } = await getImageDimensions(val);
+            if (width && height) {
+              imageMetadata.width = width;
+              imageMetadata.height = height;
             }
+
+            profileImages[key as HasuraImageFieldKey] = imageMetadata;
           }),
         );
       }
@@ -520,50 +497,6 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({
                   </Box>
                 </FormControl>
               </GridItem>
-              {/* <GridItem flex={1} alignItems="center">
-                <FormControl isInvalid={!!errors.location}>
-                  <Label htmlFor="location">Location</Label>
-                  <Input
-                    id="location"
-                    w="100%"
-                    placeholder="Laniakea Supercluster"
-                    {...register('location', {
-                      maxLength: {
-                        value: 140,
-                        message: 'Maximum length is 140 characters.',
-                      },
-                    })}
-                  />
-                  <Box minH="3em">
-                    <FormErrorMessage>
-                      {errors.location?.message?.toString()}
-                    </FormErrorMessage>
-                  </Box>
-                </FormControl>
-              </GridItem> */}
-              {/* <GridItem flex={1} alignItems="center">
-                <FormControl isInvalid={!!errors.emoji}>
-                  <Label htmlFor="emoji">Spirit Emoji</Label>
-                  <Input
-                    id="emoji"
-                    placeholder="🗽"
-                    _placeholder={{ opacity: 0.75 }}
-                    minW="inherit"
-                    w="100%"
-                    {...register('emoji', {
-                      maxLength: {
-                        value: 2,
-                        message: 'Maximum length is 2 characters.',
-                      },
-                    })}
-                  />
-                  <Box minH="3em">
-                    <FormErrorMessage>
-                      {errors.emoji?.message?.toString()}
-                    </FormErrorMessage>
-                  </Box>
-                </FormControl>
-              </GridItem> */}
               <GridItem gridColumn={'1/-1'} alignItems="center">
                 <FormControl>
                   <Label>Meeting Calendar</Label>

packages/web/components/Guild/UnverifiedGuildForm.tsx

@@ -27,12 +27,12 @@ import {
   useAddGuildLinkMutation,
   useAddGuildMemberMutation,
 } from 'graphql/autogen/types';
+import { useWeb3 } from 'lib/hooks';
 import { useImageReader } from 'lib/hooks/useImageReader';
 import React, { useCallback, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { CombinedError } from 'urql';
 import { errorHandler } from 'utils/errorHandler';
-import { uploadFile } from 'utils/uploadHelpers';
 
 export type NewUnverifiedGuild = {
   error?: CombinedError;
@@ -131,7 +131,7 @@ export const UnverifiedGuildForm: React.FC<Props> = ({
   const [loading, setLoading] = useState(true);
   const [errored, setErrored] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-
+  const { w3storage } = useWeb3();
   const [watchedFormValues, setWatchedFormValues] =
     useState<CreateGuildFormInputs | null>(null);
 
@@ -173,7 +173,8 @@ export const UnverifiedGuildForm: React.FC<Props> = ({
 
       if (logoFile?.[0]) {
         try {
-          const ipfsHash = await uploadFile(logoFile[0]);
+
+          const ipfsHash = await w3storage?.uploadFile(logoFile[0])
           newLogoURL = `ipfs://${ipfsHash}`;
         } catch (error) {
           toast({
@@ -253,7 +254,7 @@ export const UnverifiedGuildForm: React.FC<Props> = ({
         setIsSubmitting(false);
       }
     },
-    [toast, onSubmit, hydratePlayer, addGuildMember, player?.id, addLink],
+    [toast, onSubmit, hydratePlayer, addGuildMember, player?.id, addLink, w3storage],
   );
 
   return (
@@ -479,4 +480,4 @@ export const UnverifiedGuildForm: React.FC<Props> = ({
       )}
     </Box>
   );
-};
+};

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

@@ -12,6 +12,7 @@ import {
 import { Maybe, Optional } from '@metafam/utils';
 import PlayerProfileIcon from 'assets/player-profile-icon.svg';
 import { FileReaderData, useImageReader } from 'lib/hooks/useImageReader';
+import { useW3upClient } from 'lib/hooks/useW3';
 import { forwardRef, useCallback, useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { optimizedImage } from 'utils/imageHelpers';
@@ -27,7 +28,7 @@ export const EditAvatarImage = forwardRef<
 >(({ initialURL, onFilePicked }, ref) => {
   const toast = useToast();
   const readFile = useImageReader();
-
+  // const del = useW3upClient('did:key:z6MkgSqgKhSscJfmSWvcBf4DmmRhGHnb5L3E3h4gMbRoA5Cw')
   const [active, setActive] = useState(false);
   const [loading, setLoading] = useState(true);
   const [url, setURL] = useState<Optional<string>>(
@@ -146,4 +147,4 @@ export const EditAvatarImage = forwardRef<
       </FormErrorMessage>
     </FormControl>
   );
-});
+});

packages/web/components/QuestChain/QuestHeading.tsx

@@ -140,7 +140,7 @@ const Heading: React.FC<Props> = ({ name, questChain, canMint, refresh }) => (
           color="white"
           href={`${QUEST_CHAINS_HOST}/chain/${questChain.chainId}/${questChain.address}`}
         >
-          <Tooltip label="View on Quest Chains">
+          <Tooltip label="View on Playbooks">
             <Flex w="full" gap={4} role="group" position="relative">
               <Text
                 fontSize={{ base: '3xl', lg: '7xl' }}
@@ -195,4 +195,4 @@ const Heading: React.FC<Props> = ({ name, questChain, canMint, refresh }) => (
   </Flex>
 );
 
-export default Heading;
+export default Heading;

packages/web/config.ts

@@ -25,7 +25,10 @@ export const CONFIG = {
   ceramicNetwork:
     process.env.NEXT_PUBLIC_CERAMIC_NETWORK || 'mainnet' || 'testnet-clay',
   googleDataAPIKey: process.env.NEXT_PUBLIC_YOUTUBE_API_KEY,
-  web3StorageToken: process.env.WEB3_STORAGE_TOKEN,
+  web3StorageToken: process.env.NEXT_PUBLIC_WEB3_STORAGE_TOKEN,
+  web3StorageKey: process.env.NEXT_PUBLIC_WEB3_STORAGE_KEY,
+  web3StorageDID: process.env.NEXT_PUBLIC_WEB3_STORAGE_DID,
+  web3StorageProof: process.env.WEB3_STORAGE_PROOF,
   openseaAPIKey: process.env.OPENSEA_API_KEY,
   alchemyAPIKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
   mainnetRPC: process.env.NEXT_PUBLIC_MAINNET_RPC || 'https://eth.llamarpc.com',
@@ -42,4 +45,4 @@ export const CONFIG = {
       'https://frontend-pr-*-mjhnbmqqna-uk.a.run.app',
     ],
   },
-};
+};