refactor: 🎨 Make Dashboard appear without wallet connection

* refactor: 🎨 Show dashboard when user is not connected

* Resolve comments

* Change XP copy

packages/web/components/Dashboard/DashboardSection.tsx

@@ -61,7 +61,6 @@ const DashboardSectionInner: React.FC<Props> = ({
 export const DashboardSection = forwardRef<HTMLDivElement, Props>(
   ({ metadata, type, player, editing = false, onRemoveBox }, ref) => {
     const key = createBoxKey(type, metadata);
-    if (!player) return null;
 
     return (
       <Flex

packages/web/components/Dashboard/XP.tsx

@@ -4,6 +4,7 @@ import {
   ButtonGroup,
   Flex,
   Link,
+  MetaButton,
   MetaTag,
   Stat,
   StatArrow,
@@ -15,7 +16,7 @@ import {
   VStack,
 } from '@metafam/ds';
 import { animated, useSpring } from '@react-spring/web';
-import { useUser } from 'lib/hooks';
+import { useMounted, useUser, useWeb3 } from 'lib/hooks';
 import { useUserXP } from 'lib/hooks/useUserXP';
 import React, { FC, ReactNode, useState } from 'react';
 import { FaChartBar } from 'react-icons/fa';
@@ -28,23 +29,45 @@ import {
 
 export const XP = (): React.ReactElement => {
   const { user } = useUser();
+  const { connect, connecting, connected } = useWeb3();
 
   const xpStats = useUserXP(user?.ethereumAddress || '');
+  const mounted = useMounted();
 
-  if (xpStats == null) {
+  if (!mounted || (!connecting && !connected)) {
+    return (
+      <Flex direction="column" align="center" justify="center" h="17rem">
+        <Text textAlign="center">
+          Please <MetaButton onClick={connect}>connect</MetaButton> to see your
+          XP
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (xpStats === null) {
     return (
       <VStack spacing={0} w="100%" p={6}>
         <Flex align="center" justify="center" h="17rem">
           <Text fontStyle="italic" textAlign="center" px={4} w="100%">
-            If you want your XP stats to appear, you gotta earn some XP first!
-            Go{' '}
+            Hey, you don't have any XP! 😱 If you want to start earning XP, you
+            gotta{' '}
             <Link
-              href="https://meta-game.notion.site/Welcome-to-MetaGame-349d9b6434d543b48539bccabf10b60a"
+              href=" https://metagame.wtf/roles"
               target="_tab"
+              fontWeight="semibold"
             >
-              here
+              join as a player or a patron
             </Link>{' '}
-            & join the onboarding call
+            first. Check out{' '}
+            <Link
+              href="https://metagame.wtf/onboarding"
+              target="_tab"
+              fontWeight="semibold"
+            >
+              the onboarding game
+            </Link>{' '}
+            & get involved!
           </Text>
         </Flex>
       </VStack>

packages/web/pages/dashboard.tsx

@@ -1,4 +1,3 @@
-import { ConnectedPage } from 'components/ConnectedPage';
 import { PageContainer } from 'components/Container';
 import {
   ALL_BOXES,
@@ -10,36 +9,31 @@ import {
   Player,
   useUpdatePlayerDashboardLayoutMutation as useUpdateLayout,
 } from 'graphql/autogen/types';
+import { useUser } from 'lib/hooks';
 import React, { useCallback, useMemo } from 'react';
 import { LayoutData } from 'utils/boxTypes';
 
-const ConnectedDashboardPage: React.FC<Props> = () => (
-  <ConnectedPage page={DashboardPage} pageLabel="Your Dashboard" />
-);
-
-export default ConnectedDashboardPage;
-
-type Props = { player: Player };
-
-export const DashboardPage: React.FC<Props> = ({ player }) => {
+const DashboardPage: React.FC = () => {
   const [{ fetching: persisting }, saveLayoutData] = useUpdateLayout();
-
+  const { user: player } = useUser();
   const savedLayoutData = useMemo<LayoutData>(
     () =>
-      player.dashboardLayout
-        ? JSON.parse(player.dashboardLayout)
+      player?.dashboardLayout
+        ? JSON.parse(player?.dashboardLayout)
         : DEFAULT_DASHBOARD_LAYOUT_DATA,
-    [player.dashboardLayout],
+    [player?.dashboardLayout],
   );
 
   const persistLayoutData = useCallback(
     async (layoutData: LayoutData) => {
-      const { error } = await saveLayoutData({
-        playerId: player.id,
-        dashboardLayout: JSON.stringify(layoutData),
-      });
+      if (player) {
+        const { error } = await saveLayoutData({
+          playerId: player.id,
+          dashboardLayout: JSON.stringify(layoutData),
+        });
 
-      if (error) throw error;
+        if (error) throw error;
+      }
     },
     [saveLayoutData, player],
   );
@@ -48,7 +42,7 @@ export const DashboardPage: React.FC<Props> = ({ player }) => {
     <PageContainer>
       <EditableGridLayout
         {...{
-          player,
+          player: player as Player,
           defaultLayoutData: DEFAULT_DASHBOARD_LAYOUT_DATA,
           savedLayoutData,
           showEditButton: true,
@@ -61,3 +55,5 @@ export const DashboardPage: React.FC<Props> = ({ player }) => {
     </PageContainer>
   );
 };
+
+export default DashboardPage;