📹 Portfolio view (#4784)

* Add icons

* Add portfolio route into membership dropdown

* Table

* View and route

* Minor fixes

* CR fixes v1

packages/atlas/src/.env

@@ -39,7 +39,7 @@ VITE_PRODUCTION_FAUCET_URL=https://faucet.joystream.org/member-faucet/register
 VITE_PRODUCTION_YPP_FAUCET_URL=https://18.184.136.237.nip.io/membership
 
 # Development env URLs - this is the default configuration if VITE_ENV != production
-VITE_DEVELOPMENT_ORION_AUTH_URL=https://atlas-dev.joystream.org/orion-auth/api/v1
+VITE_DEVELOPMENT_ORION_AUTH_URL=https://atlas-dev.joystream.org/api/v1
 VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-api/graphql
 VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/orion-v2/graphql
 VITE_DEVELOPMENT_NODE_URL=wss://atlas-dev.joystream.org/ws-rpc
@@ -58,4 +58,4 @@ VITE_NEXT_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership
 VITE_LOCAL_ORION_URL=http://localhost:6116/graphql
 VITE_LOCAL_QUERY_NODE_SUBSCRIPTION_URL=ws://localhost:8081/graphql
 VITE_LOCAL_NODE_URL=ws://localhost:9944/ws-rpc
-VITE_LOCAL_FAUCET_URL=http://localhost:3002/register
+VITE_LOCAL_FAUCET_URL=http://localhost:3002/register

packages/atlas/src/assets/icons/ActionMarket.tsx

@@ -0,0 +1,14 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgActionMarket = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path
+      d="M3.7 1.4a1 1 0 0 1 .8-.4h7a1 1 0 0 1 .8.4l2.5 3.333a1 1 0 0 1 .2.6V6.73l-.445.297a1 1 0 0 1-1.11 0l-.78-.52a3 3 0 0 0-3.33 0l-.78.52a1 1 0 0 1-1.11 0l-.78-.52a3 3 0 0 0-3.33 0l-.78.52a1 1 0 0 1-1.11 0L1 6.729V5.333a1 1 0 0 1 .2-.6L3.7 1.4ZM3 9.023V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.023a3 3 0 0 1-.664-.333l-.781-.52a1 1 0 0 0-1.11 0l-.78.52a3 3 0 0 1-3.33 0l-.78-.52a1 1 0 0 0-1.11 0l-.78.52c-.21.14-.434.25-.665.333Z"
+      fill="#F4F6F8"
+    />
+  </svg>
+))
+SvgActionMarket.displayName = 'SvgActionMarket'
+const Memo = memo(SvgActionMarket)
+export { Memo as SvgActionMarket }

packages/atlas/src/assets/icons/ActionTransfer.tsx

@@ -0,0 +1,14 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgActionTransfer = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path
+      d="M10.998 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM3.29 15h2V4.381l1.372 1.326 1.414-1.414L4.29.586.584 4.293l1.414 1.414L3.29 4.414V15Z"
+      fill="#F4F6F8"
+    />
+  </svg>
+))
+SvgActionTransfer.displayName = 'SvgActionTransfer'
+const Memo = memo(SvgActionTransfer)
+export { Memo as SvgActionTransfer }

packages/atlas/src/assets/icons/index.ts

@@ -54,6 +54,7 @@ export * from './ActionLinkUrl'
 export * from './ActionLoader'
 export * from './ActionLock'
 export * from './ActionLogOut'
+export * from './ActionMarket'
 export * from './ActionMaximize'
 export * from './ActionMember'
 export * from './ActionMenu'
@@ -95,6 +96,7 @@ export * from './ActionStrikethrough'
 export * from './ActionSwitchMember'
 export * from './ActionTialic'
 export * from './ActionTokensStack'
+export * from './ActionTransfer'
 export * from './ActionTrash'
 export * from './ActionUnlocked'
 export * from './ActionUnorderedList'

packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx

@@ -0,0 +1,167 @@
+import styled from '@emotion/styled'
+import { useMemo, useState } from 'react'
+
+import {
+  SvgActionBuyNow,
+  SvgActionMarket,
+  SvgActionMore,
+  SvgActionNotForSale,
+  SvgActionShoppingCart,
+  SvgActionTransfer,
+  SvgActionVerified,
+} from '@/assets/icons'
+import { Avatar } from '@/components/Avatar'
+import { FlexBox } from '@/components/FlexBox'
+import { NumberFormat } from '@/components/NumberFormat'
+import { Table, TableProps } from '@/components/Table'
+import { Text } from '@/components/Text'
+import { Button } from '@/components/_buttons/Button'
+import { ContextMenu } from '@/components/_overlays/ContextMenu'
+
+const COLUMNS: TableProps['columns'] = [
+  { Header: 'Token', accessor: 'token', width: 150 },
+  { Header: 'Status', accessor: 'status', width: 200 },
+  { Header: 'Transferable', accessor: 'transferable', width: 100 },
+  { Header: 'Vested', accessor: 'vested', width: 100 },
+  { Header: 'Total', accessor: 'total', width: 100 },
+  { Header: '', accessor: 'utils', width: 70 },
+]
+
+export type PortfolioToken = {
+  tokenTitle: string
+  tokenName: string
+  isVerified: boolean
+  status: 'market' | 'sale' | 'idle'
+  vested: number
+  total: number
+  transferable: number
+}
+
+export type CrtPortfolioTableProps = {
+  data: PortfolioToken[]
+  isLoading: boolean
+}
+
+export const CrtPortfolioTable = ({ data }: CrtPortfolioTableProps) => {
+  const mappingData = useMemo(() => {
+    return data.map((row) => ({
+      token: <TokenInfo {...row} />,
+      status: <Status status={row.status} />,
+      transferable: (
+        <RightAlignedCell>
+          <NumberFormat value={row.transferable} as="p" withToken customTicker="$JBC" />
+        </RightAlignedCell>
+      ),
+      vested: (
+        <RightAlignedCell>
+          <NumberFormat value={row.vested} as="p" withToken customTicker="$JBC" />
+        </RightAlignedCell>
+      ),
+      total: (
+        <RightAlignedCell>
+          <NumberFormat value={row.total} as="p" withToken customTicker="$JBC" />
+        </RightAlignedCell>
+      ),
+      utils: <TokenPortfolioUtils onTransfer={() => undefined} onBuy={() => undefined} />,
+    }))
+  }, [data])
+
+  return <StyledTable columns={COLUMNS} data={mappingData} />
+}
+
+const TokenInfo = ({
+  tokenTitle,
+  tokenName,
+  isVerified,
+}: Pick<PortfolioToken, 'tokenName' | 'tokenTitle' | 'isVerified'>) => {
+  return (
+    <FlexBox alignItems="center" gap={2}>
+      <Avatar />
+      <FlexBox flow="column" gap={0}>
+        <Text variant="h200" as="h1">
+          ${tokenTitle}
+        </Text>
+        <FlexBox alignItems="center" gap={1}>
+          <Text variant="t100" as="span" color="colorText">
+            {tokenName}
+          </Text>
+          {isVerified && <SvgActionVerified />}
+        </FlexBox>
+      </FlexBox>
+    </FlexBox>
+  )
+}
+
+const Status = ({ status }: { status: 'market' | 'sale' | 'idle' }) => {
+  const [icon, text] = useMemo(() => {
+    switch (status) {
+      case 'market':
+        return [<SvgActionMarket key={1} />, 'On market']
+      case 'sale':
+        return [<SvgActionBuyNow key={1} />, 'On sale']
+      case 'idle':
+      default:
+        return [<SvgActionNotForSale key={1} />, 'No active sale']
+    }
+  }, [status])
+  return (
+    <FlexBox alignItems="center" gap={2}>
+      {icon}
+      <Text variant="t100" as="p">
+        {text}
+      </Text>
+    </FlexBox>
+  )
+}
+
+type TokenPortfolioUtilsProps = {
+  onBuy?: () => void
+  onTransfer: () => void
+}
+
+const TokenPortfolioUtils = ({ onBuy, onTransfer }: TokenPortfolioUtilsProps) => {
+  const [ref, setRef] = useState<HTMLButtonElement | null>(null)
+
+  return (
+    <RightAlignedCell>
+      <Button ref={setRef} icon={<SvgActionMore />} variant="tertiary" size="small" />
+      <ContextMenu
+        appendTo={document.body}
+        placement="bottom-end"
+        items={[
+          {
+            asButton: true,
+            label: 'Buy',
+            onClick: onBuy,
+            nodeStart: <SvgActionShoppingCart />,
+          },
+          {
+            asButton: true,
+            label: 'Transfer',
+            onClick: onTransfer,
+            nodeStart: <SvgActionTransfer />,
+          },
+        ]}
+        trigger={null}
+        triggerTarget={ref}
+      />
+    </RightAlignedCell>
+  )
+}
+
+const StyledTable = styled(Table)`
+  th:nth-child(n + 3),
+  th:nth-child(n + 4),
+  th:nth-child(n + 5) {
+    align-items: end;
+    justify-content: end;
+
+    > div {
+      align-items: end;
+    }
+  }
+`
+
+export const RightAlignedCell = styled.div`
+  margin-left: auto;
+`

packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.tsx

@@ -10,6 +10,7 @@ import {
   SvgActionChevronR,
   SvgActionLogOut,
   SvgActionMember,
+  SvgActionMoney,
   SvgActionNewTab,
   SvgActionPlay,
   SvgActionShow,
@@ -206,6 +207,12 @@ export const MemberDropdownNav: FC<MemberDropdownNavProps> = ({
                   nodeEnd: hasAtLeastOneChannel && <SvgActionChevronR />,
                   onClick: () => (hasAtLeastOneChannel ? onSwitchToList(type) : onAddNewChannel?.()),
                 },
+                {
+                  asButton: true,
+                  label: 'Portfolio',
+                  nodeStart: <IconWrapper icon={<SvgActionMoney />} />,
+                  to: absoluteRoutes.viewer.portfolio(),
+                },
               ]}
             />
           ) : (
@@ -256,7 +263,7 @@ type ListItemOptionsProps = {
   publisher?: boolean
   hasAtLeastOneChannel?: boolean
   closeDropdown?: () => void
-  listItems: [ListItemProps, ListItemProps] | [ListItemProps]
+  listItems: ListItemProps[]
 }
 const ListItemOptions: FC<ListItemOptionsProps> = ({ publisher, closeDropdown, listItems, hasAtLeastOneChannel }) => {
   return (

packages/atlas/src/config/routes.ts

@@ -27,6 +27,7 @@ export const relativeRoutes = {
   viewer: {
     index: () => '',
     discover: () => 'discover',
+    portfolio: () => 'portfolio',
     category: (id = ':id') => `category/${id}`,
     search: (query?: { [QUERY_PARAMS.SEARCH]?: string }) => withQueryParameters('search', query),
     channel: (id = ':id') => `channel/${id}`,

packages/atlas/src/views/viewer/Portfolio/PortfolioView.tsx

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled'
+import { useState } from 'react'
+
+import { SvgJoyTokenSilver24 } from '@/assets/icons'
+import { FlexBox } from '@/components/FlexBox'
+import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
+import { Tabs } from '@/components/Tabs'
+import { Text } from '@/components/Text'
+import { CrtPortfolioTable } from '@/components/_crt/CrtPortfolioTable/CrtPortfolioTable'
+import { DetailsContent } from '@/components/_nft/NftTile'
+import { sizes } from '@/styles'
+
+const TABS = ['Creator token', 'NFTs']
+
+const mappedTabs = TABS.map((tab) => ({
+  name: tab,
+}))
+
+export const PortfolioView = () => {
+  const [tab, setTab] = useState(0)
+  return (
+    <LimitedWidthContainer>
+      <TitleBox alignItems="center" justifyContent="space-between">
+        <Text variant="h700" as="h1">
+          Portfolio
+        </Text>
+        <DetailsContent
+          caption="PORTFOLIO TOTAL VALUE"
+          tooltipText="Lorem ipsum"
+          content={2300}
+          withDenomination
+          tileSize="big"
+          icon={<SvgJoyTokenSilver24 />}
+        />
+      </TitleBox>
+      <FlexBox flow="column" gap={6}>
+        <Tabs initialIndex={0} tabs={mappedTabs} onSelectTab={setTab} />
+        {tab === 0 && (
+          <CrtPortfolioTable
+            data={[
+              {
+                tokenTitle: 'JBC',
+                tokenName: 'Joyblocks',
+                isVerified: true,
+                status: 'idle',
+                transferable: 10,
+                vested: 30,
+                total: 40,
+              },
+            ]}
+            isLoading={false}
+          />
+        )}
+      </FlexBox>
+    </LimitedWidthContainer>
+  )
+}
+
+export const TitleBox = styled(FlexBox)`
+  padding: ${sizes(12)} 0;
+`

packages/atlas/src/views/viewer/Portfolio/index.ts

@@ -0,0 +1 @@
+export * from './PortfolioView'

packages/atlas/src/views/viewer/ViewerLayout.tsx

@@ -29,6 +29,7 @@ import { MarketplaceView } from './MarketplaceView'
 import { MemberView } from './MemberView'
 import { MembershipSettingsView } from './MembershipSettingsView'
 import { NotFoundView } from './NotFoundView'
+import { PortfolioView } from './Portfolio'
 import { SearchView } from './SearchView'
 import { VideoView } from './VideoView'
 
@@ -41,6 +42,7 @@ const viewerRoutes = [
   { path: relativeRoutes.viewer.channel(), element: <ChannelView /> },
   { path: relativeRoutes.viewer.category(), element: <CategoryView /> },
   { path: relativeRoutes.viewer.member(), element: <MemberView /> },
+  { path: relativeRoutes.viewer.portfolio(), element: <PortfolioView /> },
   { path: relativeRoutes.viewer.marketplace(), element: <MarketplaceView /> },
   ...(atlasConfig.features.ypp.googleConsoleClientId
     ? [{ path: relativeRoutes.viewer.ypp(), element: <YppLandingView /> }]