multiple ui fixes (#1729)

* multiple ui fixes

* fixing stuff deleting more sourcecred

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

@@ -6,6 +6,7 @@ import { guildRoutes } from './guild/routes.js';
 import { syncAllGuildDiscordMembers } from './guild/sync.js';
 import syncBalances from './player/syncBalances.js';
 import { questsRoutes } from './quests/routes.js';
+
 export const actionRoutes = express.Router();
 
 actionRoutes.post('/syncBalances', asyncHandlerWrapper(syncBalances));

packages/backend/src/lib/sourcecredLedger.ts

@@ -1,26 +0,0 @@
-import { Constants } from '@metafam/utils';
-import { CredGraph, LedgerManager, sourcecred } from 'sourcecred';
-
-import { CONFIG } from '../config.js';
-
-const storage = new sourcecred.ledger.storage.GithubStorage({
-  apiToken: CONFIG.githubAPIToken,
-  repo: 'MetaFam/XP',
-  branch: CONFIG.sourceCredLedgerBranch,
-});
-
-export const ledgerManager: LedgerManager =
-  new sourcecred.ledger.manager.LedgerManager({
-    storage,
-  });
-
-export async function loadCredGraph(): Promise<CredGraph | null> {
-  const instance = sourcecred.instance.readInstance.getNetworkReadInstance(
-    Constants.SC_OUTPUT_BASE,
-  );
-  try {
-    return instance.readCredGraph();
-  } catch (e) {
-    return null;
-  }
-}

packages/web/components/ConnectToProgress.tsx

@@ -59,36 +59,13 @@ export const ConnectToProgress: React.FC<{
         {header && <MetaHeading> {header} </MetaHeading>}
         {showNote && (
           <Stack spacing={4} align="flex-start" w="100%" px={2}>
-            <Text>First things first, you should make yourself a profile.</Text>
             <Text>
-              From there, you'll be able to show the world what you're about,
-              what you're working on & more.
-            </Text>
-            <Text>
-              Unlike profiles in the Web2 world, MyMeta profiles reside on a
-              decentralized service; they are controlled & owned by you alone.
-            </Text>
-            <Text>
-              Read more about MyMeta profiles{' '}
-              <Link
-                href="//wiki.metagame.wtf/docs/what-we-do/mymeta"
-                isExternal
-                color="pink.400"
-                textDecor="underline"
-                fontWeight="bold"
-              >
-                here
-              </Link>
-              .
+                First things first, make yourself a profile. You’ll need it to present yourself & your work to the rest of the world.
+                Unlike Web2 profiles, MyMeta profiles are controlled & owned by you alone, residing on the <MetaLink href="https://ceramic.network/" target="_blank">Ceramic network.</MetaLink>
             </Text>
           </Stack>
         )}
         <Stack w="100%" spacing={4} pt={2}>
-          {showNote && (
-            <Text textAlign="center">
-              Connect your wallet on Ethereum Mainnet to start
-            </Text>
-          )}
           <Button
             w="100%"
             size="lg"
@@ -101,21 +78,6 @@ export const ConnectToProgress: React.FC<{
           >
             {showNote ? 'Connect Wallet' : 'Connect to continue'}
           </Button>
-          {showNote && (
-            <Link href="/dashboard" _hover={{}} w="100%">
-              <Button
-                w="100%"
-                size="lg"
-                fontSize="1.25rem"
-                fontWeight="600"
-                textTransform="uppercase"
-                colorScheme="blackAlpha"
-                color="whiteAlpha.700"
-              >
-                Explore First
-              </Button>
-            </Link>
-          )}
         </Stack>
         {showNote && (
           <>

packages/web/components/Landing/LandingConnectButton.tsx

@@ -72,7 +72,7 @@ export const LandingConnectButton = ({ isIconStyle = false, ...props }) => {
         });
       }
     }
-  }, [connected, chainId, address, provider, toast]);
+  }, [chainId, address, provider, toast]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Tooltip

packages/web/components/Landing/WhatSay.tsx

@@ -52,14 +52,14 @@ export const WhatSay: React.FC<LandingPageSectionProps> = ({
           flexDirection="column"
           justifyContent={{ base: 'flex-start', xl: 'center' }}
           maxWidth={{
-            base: '90%',
+            base: '100%',
             md: '3xl',
             xl: '5xl',
             '2xl': '8xl',
             '4xl': '100%',
           }}
-          maxH={{ base: '60%', md: '90%', lg: 'initial' }}
-          overflowY={{ base: 'auto', xl: 'visible' }}
+          maxH={{ base: '100%', md: '90%', lg: 'initial' }}
+          overflowY={{ base: 'hidden', xl: 'visible' }}
           pl={{ base: 0, md: 0 }}
           transform={`translate3d(0, ${displayElement ? '0' : '50px'}, 0)`}
           opacity={displayElement ? 1 : 0}
@@ -98,7 +98,7 @@ export const WhatSay: React.FC<LandingPageSectionProps> = ({
                 username="kyle-stargarden"
               />
             </Flex>
-            <Flex flex="1" direction="column" gap={8}>
+            <Flex flex="1" direction="column" gap={8} display={{ base: 'none', lg: 'flex', xl: 'flex' }}>
               <WhatSayCard
                 player="Yalor"
                 testimony={
@@ -119,7 +119,7 @@ export const WhatSay: React.FC<LandingPageSectionProps> = ({
                 username="geleeroyale"
               />
             </Flex>
-            <Flex flex="1" direction="column" gap={8}>
+            <Flex flex="1" direction="column" gap={8} display={{ base: 'none', lg: 'flex', xl: 'flex' }}>
               <WhatSayCard
                 player="Griff Green"
                 testimony="MetaGame embodies the actual fucking point of crypto. Its vision is the world I want to live in."

packages/web/components/Landing/WhoAreWe.tsx

@@ -151,6 +151,7 @@ export const WhoAreWe: React.FC<
             Who we are?
           </Text>
           <UnorderedList
+          overflow="hidden" 
             display={{ base: 'flex', lg: 'grid' }}
             flexFlow={{ base: 'row', lg: 'unset' }}
             gap={{ base: 12, lg: 0 }}
@@ -196,7 +197,7 @@ export const WhoAreWe: React.FC<
               },
             }}
           >
-            <ListItem gridArea="first">
+            <ListItem gridArea="first" overflow="hidden" height={{ base: "40vh", lg: '100%', xl: '100%'}}>
               <Text as="h3" pb={{ base: 4, lg: 0 }}>
                 <Text as="span">01</Text>Players (Builders)
               </Text>

packages/web/components/Player/PlayerStart.tsx

@@ -9,6 +9,7 @@ export const PlayerStart: React.FC = () => {
   const router = useRouter();
   const { connected, chainId } = useWeb3();
   const { user, fetching } = useUser();
+  
   const newUser = useMemo(() => {
     if (connected && !fetching && !!user) {
       const timeSinceCreation =

packages/web/components/Setup/SetupDone.tsx

@@ -1,4 +1,4 @@
-import { MetaHeading, Stack, Text } from '@metafam/ds';
+import { HStack, MetaButton, MetaHeading, Stack, Text , useToast } from '@metafam/ds';
 import { ConnectToProgress, MetaGameLogo } from 'components/ConnectToProgress';
 import { FlexContainer } from 'components/Container';
 import { MetaLink } from 'components/Link';
@@ -8,6 +8,7 @@ import { useUser, useWeb3 } from 'lib/hooks';
 export const SetupDone: React.FC = () => {
   const { user } = useUser();
   const { connected } = useWeb3();
+  const toast = useToast();
 
   if (!user || !connected) {
     return (
@@ -29,24 +30,39 @@ export const SetupDone: React.FC = () => {
       >
         <PlayerTile player={user} />
         <Stack spacing={4} p={4} maxW="25rem" fontSize="md" h="100%">
-          <Text fontSize="lg">Congrats on making yourself a profile! 🎉</Text>
+          <Text fontSize="lg">Congrats on your MyMeta, you'll love the customization options!</Text>
           <Text fontSize="md">
-            It should come in handy for you to present yourself to the rest of
-            the DAO ecosystem & collaborate with others 🙃{' '}
+            But for now - plug yourself into MetaGame, we look forward to meeting you! 🤗
           </Text>
-          <Text fontSize="md">
-            Next, you should take the {''}
-            <MetaLink
-              textDecor="underline"
-              color="pink.400"
-              href="/play/paths/engaged-octos-path"
-              fontWeight="bold"
+          <HStack>
+            <MetaButton
+              bg="#00000000"
+              border="1px solid #5A32E6"
+              onClick={() => {
+                if (!navigator.clipboard) {
+                  return;
+                }
+                navigator.clipboard.writeText(`${window.location.href}`);
+                toast({
+                  title: 'Copied to clipboard!',
+                  description: 'Share this link with your friends!',
+                  status: 'success',
+                  duration: 4000,
+                  isClosable: true,
+                });
+              }}
             >
-              Path of The Engaged Octopi
-            </MetaLink>{' '}
-            to get yourself properly onboarded into MetaGame.
-          </Text>
-          <Text fontSize="md">We're excited to have you! 🐙</Text>
+              Share
+            </MetaButton>
+       
+            <MetaLink href="/academy/rite-of-passage">
+              <MetaButton>
+                Proceed 
+              </MetaButton>
+            </MetaLink>
+           
+          </HStack>
+          
         </Stack>
       </Stack>
     </FlexContainer>

packages/web/utils/questChains.ts

@@ -1,38 +1,38 @@
 import { Values } from '@metafam/utils';
 import { contracts, metadata } from '@quest-chains/sdk';
-import ethereum from 'assets/academy/ethereum.png';
-import daos from 'assets/academy/daos.png';
-import dapps from 'assets/academy/dapps.png';
-import defi from 'assets/academy/defi.png';
-import nfts from 'assets/academy/nfts.png';
-import web3builder from 'assets/academy/web3builder.png';
-import riteofpassage from 'assets/academy/riteofpassage.png';
+import bestdaocontributor from 'assets/academy/best-dao-contributor.png';
+import biases from 'assets/academy/biases.png';
 import bridgebuilder from 'assets/academy/bridgebuilder.png';
 import builder from 'assets/academy/builder.png';
+import coordinape from 'assets/academy/coordinape.png';
+import daos from 'assets/academy/daos.png';
+import daosummoner from 'assets/academy/daosummoner.png';
+import daowriter from 'assets/academy/daowriter.png';
+import dapps from 'assets/academy/dapps.png';
+import defi from 'assets/academy/defi.png';
 import designer from 'assets/academy/designer.png';
-import guilder from 'assets/academy/guilder.png';
-import patron from 'assets/academy/patron.png';
-import player from 'assets/academy/player.png';
-import moloch from 'assets/academy/moloch.png';
-import metacrisis from 'assets/academy/metacrisis.png';
+import effectivemeetingrunner from 'assets/academy/effective-meeting-runner.png';
+import ethereum from 'assets/academy/ethereum.png';
 import gameb from 'assets/academy/gameb.png';
 import goodquests from 'assets/academy/goodquests.png';
-import memedriven from 'assets/academy/memedriven.png';
-import biases from 'assets/academy/biases.png';
+import guilder from 'assets/academy/guilder.png';
+import impactnetworks from 'assets/academy/impact-networks.png';
 import imposter from 'assets/academy/imposter.png';
 import journaling from 'assets/academy/journaling.png';
-import time from 'assets/academy/time.png';
-import team from 'assets/academy/team.png';
-import playbookwriter from 'assets/academy/playbook-writer.png';
-import daosummoner from 'assets/academy/daosummoner.png';
-import coordinape from 'assets/academy/coordinape.png';
-import daowriter from 'assets/academy/daowriter.png';
-import playtwitter from 'assets/academy/play-twitter.png';
 import mastertabs from 'assets/academy/master-tabs.png';
-import bestdaocontributor from 'assets/academy/best-dao-contributor.png';
-import impactnetworks from 'assets/academy/impact-networks.png';
+import memedriven from 'assets/academy/memedriven.png';
+import metacrisis from 'assets/academy/metacrisis.png';
+import moloch from 'assets/academy/moloch.png';
+import nfts from 'assets/academy/nfts.png';
+import patron from 'assets/academy/patron.png';
+import playtwitter from 'assets/academy/play-twitter.png';
+import playbookwriter from 'assets/academy/playbook-writer.png';
+import player from 'assets/academy/player.png';
+import riteofpassage from 'assets/academy/riteofpassage.png';
 import submitPlaybook from 'assets/academy/submit-playbook.png';
-import effectivemeetingrunner from 'assets/academy/effective-meeting-runner.png';
+import team from 'assets/academy/team.png';
+import time from 'assets/academy/time.png';
+import web3builder from 'assets/academy/web3builder.png';
 import { Signer } from 'ethers';
 
 export const getQuestChainContract = (