Merge pull request #546 from pokt-foundation/stage

Account level migration ➡️ Prod
pokt-foundation · Nov 30, 2023 · c8c6d13 · c8c6d13 · vercel · Nov 30, 2023
2 parents de7bb26 + f54229b
commit c8c6d13
Show file tree

Hide file tree

Showing 122 changed files with 2,118 additions and 1,856 deletions.
diff --git a/app/components/AccountDrawer/AccountDrawer.tsx b/app/components/AccountDrawer/AccountDrawer.tsx
@@ -11,8 +11,7 @@ import {
 import { Link, LinkProps, useFetcher } from "@remix-run/react"
 import React, { useState } from "react"
 import {
-  LuBook,
-  LuDiamond,
+  LuBookOpen,
   LuLeaf,
   LuLifeBuoy,
   LuSmile,
@@ -69,7 +68,7 @@ const drawerExternalLinks = [
   {
     label: "Documentation",
     to: DOCS_PATH,
-    icon: <LuBook size={18} />,
+    icon: <LuBookOpen size={18} />,
   },
   {
     label: "Support",
@@ -136,13 +135,7 @@ const AccountDrawer = ({ user, hasPendingInvites }: AccountDrawerProps) => {
             icon={<LuUser2 size={18} />}
             label="My Profile"
             setIsDrawerOpen={setIsDrawerOpen}
-            to="/user/profile"
-          />
-          <DrawerLink
-            icon={<LuTowerControl size={18} />}
-            label="My Accounts"
-            setIsDrawerOpen={setIsDrawerOpen}
-            to={`/user/accounts`}
+            to="/user"
           />
           <Indicator
             inline
@@ -154,10 +147,10 @@ const AccountDrawer = ({ user, hasPendingInvites }: AccountDrawerProps) => {
             size={16}
           >
             <DrawerLink
-              icon={<LuDiamond size={18} />}
-              label="Invited Apps"
+              icon={<LuTowerControl size={18} />}
+              label="My Accounts"
               setIsDrawerOpen={setIsDrawerOpen}
-              to={`/user/invited-apps`}
+              to={`/user/accounts`}
             />
           </Indicator>
           <Divider my={8} />

diff --git a/app/components/AccountSelect/AccountSelect.tsx b/app/components/AccountSelect/AccountSelect.tsx
@@ -1,43 +1,58 @@
-import {
-  Group,
-  MantineTheme,
-  Menu,
-  Text,
-  UnstyledButton,
-} from "@pokt-foundation/pocket-blocks"
+import { Group, Menu, Stack, Text, UnstyledButton } from "@pokt-foundation/pocket-blocks"
 import { NavLink, useParams } from "@remix-run/react"
 import React, { useMemo } from "react"
-import { LuChevronsUpDown } from "react-icons/lu"
+import { LuCheckCircle2, LuChevronsUpDown } from "react-icons/lu"
 import Identicon from "~/components/Identicon"
 import { Account } from "~/models/portal/sdk"
+import { getPlanName } from "~/utils/planUtils"
 
 type UserItemProps = {
   account: Account
-  withIcon?: boolean
+  hasMultipleAccounts?: boolean
+  iconOnly?: boolean
+  selected?: boolean
 }
 
 type AccountSelectProps = {
   accounts: Account[]
+  collapsed?: boolean
 }
 
-const AccountItem = ({ account, withIcon }: UserItemProps) => (
+const AccountItem = ({
+  account,
+  hasMultipleAccounts,
+  iconOnly,
+  selected,
+}: UserItemProps) => (
   <Group>
     <Identicon
       alt={`${account.id} profile picture`}
       seed={account.id}
-      size="xs"
+      size={28}
       type="account"
     />
-    <Text size="sm" weight={500}>
-      {account.name ? account.name : account.id}
-    </Text>
-    {withIcon && (
-      <LuChevronsUpDown size={18} style={{ marginLeft: "auto", marginRight: 7 }} />
+    {!iconOnly && (
+      <>
+        <Stack spacing={0}>
+          <Text lh="17px" size={15} weight={500}>
+            {account.name ? account.name : account.id}
+          </Text>
+          <Text size={11}>{`${getPlanName(account.planType)} · ${
+            account?.users?.length ?? 1
+          } member${account?.users?.length > 1 ? "s" : ""}`}</Text>
+        </Stack>
+        {hasMultipleAccounts && (
+          <LuChevronsUpDown size={18} style={{ marginLeft: "auto", marginRight: 0 }} />
+        )}
+        {selected && (
+          <LuCheckCircle2 size={18} style={{ marginLeft: "auto", marginRight: 0 }} />
+        )}
+      </>
     )}
   </Group>
 )
 
-const AccountSelect = ({ accounts }: AccountSelectProps) => {
+const AccountSelect = ({ accounts, collapsed }: AccountSelectProps) => {
   const { accountId } = useParams()
   const hasMultipleAccounts = accounts.length > 1
 
@@ -46,51 +61,35 @@ const AccountSelect = ({ accounts }: AccountSelectProps) => {
     [accountId, accounts],
   )
 
-  const menuAccounts = useMemo(() => {
-    if (activeAccount) {
-      const filteredAccounts = accounts.filter(({ id }) => id !== accountId)
-      return [
-        activeAccount,
-        ...filteredAccounts.sort((a, b) => (a.id > b.id ? 1 : -1)),
-      ] as Account[]
-    }
-    return accounts
-  }, [accountId, accounts, activeAccount])
-
   return (
-    <Menu styles={{ dropdown: { minWidth: 165 } }}>
+    <Menu styles={{ dropdown: { minWidth: 300, marginLeft: 8 } }}>
       {activeAccount && (
         <Menu.Target>
-          <UnstyledButton
-            mr="md"
-            px={8}
-            py={4}
-            sx={(theme: MantineTheme) => ({
-              borderRadius: 4,
-              ...(hasMultipleAccounts && {
-                border: `1px solid ${
-                  theme.colorScheme === "dark"
-                    ? theme.colors.gray[8]
-                    : theme.colors.gray[3]
-                }`,
-              }),
-            })}
-          >
-            <AccountItem account={activeAccount} withIcon={hasMultipleAccounts} />
+          <UnstyledButton px={8} py={4} style={{ borderRadius: 4 }}>
+            <AccountItem
+              account={activeAccount}
+              hasMultipleAccounts={hasMultipleAccounts}
+              iconOnly={collapsed}
+            />
           </UnstyledButton>
         </Menu.Target>
       )}
-      {menuAccounts.length > 1 && (
-        <Menu.Dropdown>
-          <Menu.Label>My Accounts</Menu.Label>
-          <Menu.Divider />
-          {menuAccounts.map((account) => (
-            <Menu.Item key={account.id} disabled={account.id === accountId} p={2}>
-              <NavLink to={`/account/${account.id}`}>
-                <AccountItem account={account} />
-              </NavLink>
-            </Menu.Item>
-          ))}
+      {accounts && accounts?.length > 0 && (
+        <Menu.Dropdown px={8} py="md">
+          {accounts
+            .sort((a, b) => (a.id > b.id ? 1 : -1))
+            .map((account, index) => (
+              <Menu.Item
+                key={account.id}
+                disabled={account.id === accountId}
+                mb={index === accounts.length - 1 ? 0 : 8}
+                p={2}
+              >
+                <NavLink to={`/account/${account.id}`}>
+                  <AccountItem account={account} selected={account.id === accountId} />
+                </NavLink>
+              </Menu.Item>
+            ))}
         </Menu.Dropdown>
       )}
     </Menu>

diff --git a/app/components/AppHeader/AppHeader.tsx b/app/components/AppHeader/AppHeader.tsx
@@ -1,7 +1,5 @@
-import { Burger, Flex, Group, MediaQuery } from "@pokt-foundation/pocket-blocks"
-import { Link, useParams } from "@remix-run/react"
+import { Burger, Flex, MediaQuery } from "@pokt-foundation/pocket-blocks"
 import AccountDrawer from "~/components/AccountDrawer"
-import AccountSelect from "~/components/AccountSelect"
 import { Account, User } from "~/models/portal/sdk"
 import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
 
@@ -13,18 +11,10 @@ type HeaderProps = {
   onOpen: (o: boolean) => void
 }
 
-export const AppHeader = ({
-  user,
-  opened,
-  onOpen,
-  accounts,
-  hasPendingInvites,
-}: HeaderProps) => {
-  const { accountId } = useParams()
-
+export const AppHeader = ({ user, opened, onOpen, hasPendingInvites }: HeaderProps) => {
   return (
     <>
-      <Flex align="center" h="100%" justify="space-between">
+      <Flex align="center" h="100%" justify="flex-end" p="md">
         <MediaQuery largerThan="sm" styles={{ display: "none" }}>
           <Burger
             mr="xl"
@@ -40,15 +30,7 @@ export const AppHeader = ({
             }}
           />
         </MediaQuery>
-        <Link to={accountId ? `/account/${accountId}` : "/"}>
-          <img alt="Grove logo" height={20} loading="lazy" src="/grove-logo.svg"></img>
-        </Link>
-        <Group>
-          {user && accounts && accounts.length > 1 && (
-            <AccountSelect accounts={accounts} />
-          )}
-          <AccountDrawer hasPendingInvites={hasPendingInvites} user={user} />
-        </Group>
+        <AccountDrawer hasPendingInvites={hasPendingInvites} user={user} />
       </Flex>
     </>
   )

diff --git a/app/components/EmptyState/EmptyState.tsx b/app/components/EmptyState/EmptyState.tsx
@@ -29,10 +29,10 @@ export const EmptyState = ({
         src={imgSrc}
         width={imgWidth}
       />
-      <Text fw={600} fz="xl">
+      <Text fw={600} fz="xl" ta="center">
         {title}
       </Text>
-      <Text fw={400} fz="sm" ta="center">
+      <Text fw={400} fz="sm" maw={510} ta="center">
         {subtitle}
       </Text>
       {callToAction ? callToAction : null}

diff --git a/app/components/GroveLogo/GroveLogo.tsx b/app/components/GroveLogo/GroveLogo.tsx
@@ -0,0 +1,61 @@
+import React from "react"
+
+type GroveLogoProps = {
+  icon?: boolean
+}
+
+function GroveLogo({ icon }: GroveLogoProps) {
+  return icon ? (
+    <svg
+      fill="none"
+      height="28"
+      viewBox="0 0 22 28"
+      width="22"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 8.833V6.285a.934.934 0 00-.465-.81L7.08 3.474a1.403 1.403 0 00-2.107 1.214v2.56c0 .335.178.644.469.81l3.454 1.99a1.404 1.404 0 002.105-1.216L11 8.833zM11.001 13.29v-2.554c0-.333.176-.64.463-.808l5.21-3.048a1.403 1.403 0 012.112 1.212V10.7c0 .335-.18.645-.47.812l-5.211 2.996a1.403 1.403 0 01-2.103-1.218H11zM11.001 4.437V1.886c0-.331.174-.637.459-.805l1.487-.883a1.403 1.403 0 012.12 1.208V3.98a.936.936 0 01-.468.81l-1.492.863A1.403 1.403 0 0111 4.437zM10.98 17.695V15.15a.935.935 0 00-.462-.807L2.714 9.779a1.404 1.404 0 00-2.112 1.212v2.591c0 .334.178.643.467.81l7.805 4.518a1.403 1.403 0 002.107-1.215zM11.001 22.106v-2.544c0-.332.176-.64.463-.807l7.813-4.568a1.404 1.404 0 012.112 1.207l.01 2.58a.937.937 0 01-.467.813l-7.823 4.535A1.404 1.404 0 0111 22.107zM9.803 22.711l.748.455c.28.17.45.473.45.8v2.628a1.404 1.404 0 01-2.11 1.213l-.756-.44a.935.935 0 01-.464-.809V23.91a1.404 1.404 0 012.132-1.199z"
+        fill="#389F58"
+      ></path>
+    </svg>
+  ) : (
+    <svg
+      fill="none"
+      height="28"
+      viewBox="0 0 95 28"
+      width="95"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.4 8.833V6.285a.934.934 0 00-.467-.81L6.48 3.474a1.403 1.403 0 00-2.108 1.214v2.56c0 .335.178.644.469.81l3.454 1.99A1.404 1.404 0 0010.4 8.833v.001zM10.4 13.29v-2.554c0-.333.176-.64.463-.808l5.209-3.048a1.403 1.403 0 012.112 1.212V10.7c0 .335-.179.645-.469.812l-5.212 2.996A1.403 1.403 0 0110.4 13.29zM10.4 4.437V1.886c0-.331.174-.637.458-.805l1.488-.883a1.403 1.403 0 012.119 1.208V3.98a.935.935 0 01-.467.81l-1.493.863a1.403 1.403 0 01-2.106-1.216zM10.38 17.695V15.15a.935.935 0 00-.464-.807L2.112 9.779A1.404 1.404 0 000 10.991v2.591c0 .334.178.643.467.81l7.806 4.518a1.403 1.403 0 002.106-1.215zM10.4 22.106v-2.544c0-.332.176-.64.463-.807l7.812-4.568a1.404 1.404 0 012.112 1.207l.01 2.58a.936.936 0 01-.466.813l-7.824 4.535a1.404 1.404 0 01-2.108-1.215zM9.202 22.711l.748.455c.28.17.45.473.45.8v2.628a1.404 1.404 0 01-2.11 1.213l-.756-.44a.935.935 0 01-.465-.809V23.91a1.404 1.404 0 012.133-1.199z"
+        fill="#389F58"
+      ></path>
+      <path
+        d="M71.6 4.965h-3.494l2.954 13.64h6.847l2.955-13.64h-3.449L74.9 16.59c-.092.42-.695.42-.786 0L71.6 4.965z"
+        fill="#fff"
+      ></path>
+      <path
+        clipRule="evenodd"
+        d="M67.836 11.788c0 3.766-3.066 6.82-6.849 6.82-3.782 0-6.847-3.053-6.847-6.82 0-3.767 3.066-6.82 6.847-6.82 3.783 0 6.85 3.053 6.85 6.82zm-3.174.03a3.637 3.637 0 01-3.645 3.628 3.638 3.638 0 01-3.645-3.628 3.638 3.638 0 013.645-3.63 3.637 3.637 0 013.645 3.63z"
+        fill="#fff"
+        fillRule="evenodd"
+      ></path>
+      <path
+        d="M49.529 10.514v8.107H46.16V8.985c0-2.21 1.799-4 4.017-4h3.962V8.34l-4.813-.024a.317.317 0 00-.29.454l.182.377c.205.427.31.893.31 1.367z"
+        fill="#fff"
+      ></path>
+      <path
+        clipRule="evenodd"
+        d="M44.01 4.968h-3.369v1.668c0 .188-.243.277-.375.144a6.111 6.111 0 00-4.352-1.811c-3.379 0-6.117 2.727-6.117 6.09 0 3.365 2.738 6.092 6.116 6.092a6.11 6.11 0 004.353-1.812c.132-.133.375-.043.375.144v3.599a.6.6 0 01-.602.6h-8.321v3.354h8.276a4.009 4.009 0 004.017-4V4.968h-.001zm-6.984 9.782c2.072 0 3.644-1.569 3.644-3.632a3.746 3.746 0 00-3.753-3.738 3.745 3.745 0 00-3.753 3.738c0 2.063 1.789 3.632 3.862 3.632z"
+        fill="#fff"
+        fillRule="evenodd"
+      ></path>
+      <path
+        d="M94.278 12.12a.46.46 0 00.47-.46 6.69 6.69 0 00-.15-1.264c-.663-3.053-3.429-5.428-6.698-5.428a6.839 6.839 0 00-3.384.89 6.833 6.833 0 00-3.318 4.526 6.89 6.89 0 00-.145 1.404c0 3.766 3.066 6.82 6.849 6.82a6.85 6.85 0 006.446-4.51h-3.574a3.658 3.658 0 01-2.873 1.386 3.657 3.657 0 01-3.65-3.361h7.805l2.224-.002h-.002zm-3.26-1.724h-4.32a3.19 3.19 0 00-1.371.311l-.38.18a.32.32 0 01-.456-.282c.002-.114.027-.265.149-.489.078-.133.165-.263.26-.387v-.002c.693-.904 1.809-1.536 3-1.536a3.663 3.663 0 013.364 2.207l-.246-.002z"
+        fill="#fff"
+      ></path>
+    </svg>
+  )
+}
+
+export default GroveLogo
diff --git a/app/components/GroveLogo/index.ts b/app/components/GroveLogo/index.ts
@@ -0,0 +1,3 @@
+import GroveLogo from "./GroveLogo"
+export * from "./GroveLogo"
+export default GroveLogo
diff --git a/app/components/LinkTabs/LinkTabs.tsx b/app/components/LinkTabs/LinkTabs.tsx
@@ -25,7 +25,7 @@ const LinkTabs = ({ routes }: LinkTabsProps) => {
             content: '""',
             display: "block",
             width: "100%",
-            borderBottom: `2px solid ${theme.colors.gray[8]}`,
+            borderBottom: `1px solid ${theme.colors.gray[8]}`,
             position: "absolute",
             bottom: 11,
             opacity: "50%",

diff --git a/app/components/ModalHeader/ModalHeader.tsx b/app/components/ModalHeader/ModalHeader.tsx
@@ -11,7 +11,7 @@ type ModalHeaderProps = {
 const ModalHeader = ({ title, subtitle, onDiscard }: ModalHeaderProps) => {
   return (
     <Box>
-      <Flex align="center" justify="space-between" mb={12} mt={32}>
+      <Flex align="center" justify="space-between" mb={12}>
         <Text fw={600} fz="21px">
           {title}
         </Text>

diff --git a/app/components/PortalLoader/PortalLoader.tsx b/app/components/PortalLoader/PortalLoader.tsx
@@ -1,20 +1,23 @@
-import { createStyles, Stack, Text } from "@pokt-foundation/pocket-blocks"
-import Rive from "@rive-app/react-canvas"
+import { Stack, Text } from "@pokt-foundation/pocket-blocks"
+import Lottie from "lottie-react"
 
-const useStyles = createStyles((theme) => ({
-  rive: {
-    width: "180px",
-    height: "180px",
-  },
-}))
+import groveTreeAnimation from "./grove-tree.json"
 
-type PortalLoaderProps = { message?: string }
+type PortalLoaderProps = { message?: string; size?: "md" | "lg" }
 
-const PortalLoader = ({ message }: PortalLoaderProps) => {
-  const { classes } = useStyles()
+const LOADER_SIZE = {
+  md: 180,
+  lg: 380,
+}
+
+const PortalLoader = ({ message, size = "md" }: PortalLoaderProps) => {
   return (
     <Stack align="center" justify="center">
-      <Rive className={classes.rive} src="/rive/portal-loader.riv" />
+      <Lottie
+        animationData={groveTreeAnimation}
+        aria-labelledby="Grove loading animation"
+        style={{ height: LOADER_SIZE[size] }}
+      />
       {message && <Text> {message} </Text>}
     </Stack>
   )