chore: convert top level profile page to styled components (#5849)

* move const to shared file

* convert top level page wrappers to styled components

* style empty content

* simplify and wrap empty content and remove unused ve styles

* better margins

* delete unused common style

* isListingNfts bool

* remove comment

* cleanup bools

* import bag_width

src/graphql/data/__generated__/types-and-hooks.ts

@@ -514,7 +514,6 @@ export type Portfolio = {
   tokenBalances?: Maybe<Array<Maybe<TokenBalance>>>;
   tokensTotalDenominatedValue?: Maybe<Amount>;
   tokensTotalDenominatedValueChange?: Maybe<AmountChange>;
-  tokensTotalDenominatedValueHistory?: Maybe<Array<Maybe<TimestampedAmount>>>;
 };
 
 
@@ -528,11 +527,6 @@ export type PortfolioTokensTotalDenominatedValueChangeArgs = {
   duration?: InputMaybe<HistoryDuration>;
 };
 
-
-export type PortfolioTokensTotalDenominatedValueHistoryArgs = {
-  duration?: InputMaybe<HistoryDuration>;
-};
-
 export type Query = {
   __typename?: 'Query';
   assetActivities?: Maybe<Array<Maybe<AssetActivity>>>;

src/graphql/thegraph/__generated__/types-and-hooks.ts

@@ -132,13 +132,21 @@ export type Burn_Filter = {
   logIndex_not_in?: InputMaybe<Array<Scalars['BigInt']>>;
   origin?: InputMaybe<Scalars['Bytes']>;
   origin_contains?: InputMaybe<Scalars['Bytes']>;
+  origin_gt?: InputMaybe<Scalars['Bytes']>;
+  origin_gte?: InputMaybe<Scalars['Bytes']>;
   origin_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  origin_lt?: InputMaybe<Scalars['Bytes']>;
+  origin_lte?: InputMaybe<Scalars['Bytes']>;
   origin_not?: InputMaybe<Scalars['Bytes']>;
   origin_not_contains?: InputMaybe<Scalars['Bytes']>;
   origin_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
   owner?: InputMaybe<Scalars['Bytes']>;
   owner_contains?: InputMaybe<Scalars['Bytes']>;
+  owner_gt?: InputMaybe<Scalars['Bytes']>;
+  owner_gte?: InputMaybe<Scalars['Bytes']>;
   owner_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  owner_lt?: InputMaybe<Scalars['Bytes']>;
+  owner_lte?: InputMaybe<Scalars['Bytes']>;
   owner_not?: InputMaybe<Scalars['Bytes']>;
   owner_not_contains?: InputMaybe<Scalars['Bytes']>;
   owner_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -330,7 +338,11 @@ export type Collect_Filter = {
   logIndex_not_in?: InputMaybe<Array<Scalars['BigInt']>>;
   owner?: InputMaybe<Scalars['Bytes']>;
   owner_contains?: InputMaybe<Scalars['Bytes']>;
+  owner_gt?: InputMaybe<Scalars['Bytes']>;
+  owner_gte?: InputMaybe<Scalars['Bytes']>;
   owner_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  owner_lt?: InputMaybe<Scalars['Bytes']>;
+  owner_lte?: InputMaybe<Scalars['Bytes']>;
   owner_not?: InputMaybe<Scalars['Bytes']>;
   owner_not_contains?: InputMaybe<Scalars['Bytes']>;
   owner_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -656,13 +668,21 @@ export type Flash_Filter = {
   pool_starts_with_nocase?: InputMaybe<Scalars['String']>;
   recipient?: InputMaybe<Scalars['Bytes']>;
   recipient_contains?: InputMaybe<Scalars['Bytes']>;
+  recipient_gt?: InputMaybe<Scalars['Bytes']>;
+  recipient_gte?: InputMaybe<Scalars['Bytes']>;
   recipient_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  recipient_lt?: InputMaybe<Scalars['Bytes']>;
+  recipient_lte?: InputMaybe<Scalars['Bytes']>;
   recipient_not?: InputMaybe<Scalars['Bytes']>;
   recipient_not_contains?: InputMaybe<Scalars['Bytes']>;
   recipient_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
   sender?: InputMaybe<Scalars['Bytes']>;
   sender_contains?: InputMaybe<Scalars['Bytes']>;
+  sender_gt?: InputMaybe<Scalars['Bytes']>;
+  sender_gte?: InputMaybe<Scalars['Bytes']>;
   sender_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  sender_lt?: InputMaybe<Scalars['Bytes']>;
+  sender_lte?: InputMaybe<Scalars['Bytes']>;
   sender_not?: InputMaybe<Scalars['Bytes']>;
   sender_not_contains?: InputMaybe<Scalars['Bytes']>;
   sender_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -785,13 +805,21 @@ export type Mint_Filter = {
   logIndex_not_in?: InputMaybe<Array<Scalars['BigInt']>>;
   origin?: InputMaybe<Scalars['Bytes']>;
   origin_contains?: InputMaybe<Scalars['Bytes']>;
+  origin_gt?: InputMaybe<Scalars['Bytes']>;
+  origin_gte?: InputMaybe<Scalars['Bytes']>;
   origin_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  origin_lt?: InputMaybe<Scalars['Bytes']>;
+  origin_lte?: InputMaybe<Scalars['Bytes']>;
   origin_not?: InputMaybe<Scalars['Bytes']>;
   origin_not_contains?: InputMaybe<Scalars['Bytes']>;
   origin_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
   owner?: InputMaybe<Scalars['Bytes']>;
   owner_contains?: InputMaybe<Scalars['Bytes']>;
+  owner_gt?: InputMaybe<Scalars['Bytes']>;
+  owner_gte?: InputMaybe<Scalars['Bytes']>;
   owner_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  owner_lt?: InputMaybe<Scalars['Bytes']>;
+  owner_lte?: InputMaybe<Scalars['Bytes']>;
   owner_not?: InputMaybe<Scalars['Bytes']>;
   owner_not_contains?: InputMaybe<Scalars['Bytes']>;
   owner_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -818,7 +846,11 @@ export type Mint_Filter = {
   pool_starts_with_nocase?: InputMaybe<Scalars['String']>;
   sender?: InputMaybe<Scalars['Bytes']>;
   sender_contains?: InputMaybe<Scalars['Bytes']>;
+  sender_gt?: InputMaybe<Scalars['Bytes']>;
+  sender_gte?: InputMaybe<Scalars['Bytes']>;
   sender_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  sender_lt?: InputMaybe<Scalars['Bytes']>;
+  sender_lte?: InputMaybe<Scalars['Bytes']>;
   sender_not?: InputMaybe<Scalars['Bytes']>;
   sender_not_contains?: InputMaybe<Scalars['Bytes']>;
   sender_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -1916,7 +1948,11 @@ export type PositionSnapshot_Filter = {
   liquidity_not_in?: InputMaybe<Array<Scalars['BigInt']>>;
   owner?: InputMaybe<Scalars['Bytes']>;
   owner_contains?: InputMaybe<Scalars['Bytes']>;
+  owner_gt?: InputMaybe<Scalars['Bytes']>;
+  owner_gte?: InputMaybe<Scalars['Bytes']>;
   owner_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  owner_lt?: InputMaybe<Scalars['Bytes']>;
+  owner_lte?: InputMaybe<Scalars['Bytes']>;
   owner_not?: InputMaybe<Scalars['Bytes']>;
   owner_not_contains?: InputMaybe<Scalars['Bytes']>;
   owner_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -2097,7 +2133,11 @@ export type Position_Filter = {
   liquidity_not_in?: InputMaybe<Array<Scalars['BigInt']>>;
   owner?: InputMaybe<Scalars['Bytes']>;
   owner_contains?: InputMaybe<Scalars['Bytes']>;
+  owner_gt?: InputMaybe<Scalars['Bytes']>;
+  owner_gte?: InputMaybe<Scalars['Bytes']>;
   owner_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  owner_lt?: InputMaybe<Scalars['Bytes']>;
+  owner_lte?: InputMaybe<Scalars['Bytes']>;
   owner_not?: InputMaybe<Scalars['Bytes']>;
   owner_not_contains?: InputMaybe<Scalars['Bytes']>;
   owner_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -3151,7 +3191,11 @@ export type Swap_Filter = {
   logIndex_not_in?: InputMaybe<Array<Scalars['BigInt']>>;
   origin?: InputMaybe<Scalars['Bytes']>;
   origin_contains?: InputMaybe<Scalars['Bytes']>;
+  origin_gt?: InputMaybe<Scalars['Bytes']>;
+  origin_gte?: InputMaybe<Scalars['Bytes']>;
   origin_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  origin_lt?: InputMaybe<Scalars['Bytes']>;
+  origin_lte?: InputMaybe<Scalars['Bytes']>;
   origin_not?: InputMaybe<Scalars['Bytes']>;
   origin_not_contains?: InputMaybe<Scalars['Bytes']>;
   origin_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
@@ -3178,13 +3222,21 @@ export type Swap_Filter = {
   pool_starts_with_nocase?: InputMaybe<Scalars['String']>;
   recipient?: InputMaybe<Scalars['Bytes']>;
   recipient_contains?: InputMaybe<Scalars['Bytes']>;
+  recipient_gt?: InputMaybe<Scalars['Bytes']>;
+  recipient_gte?: InputMaybe<Scalars['Bytes']>;
   recipient_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  recipient_lt?: InputMaybe<Scalars['Bytes']>;
+  recipient_lte?: InputMaybe<Scalars['Bytes']>;
   recipient_not?: InputMaybe<Scalars['Bytes']>;
   recipient_not_contains?: InputMaybe<Scalars['Bytes']>;
   recipient_not_in?: InputMaybe<Array<Scalars['Bytes']>>;
   sender?: InputMaybe<Scalars['Bytes']>;
   sender_contains?: InputMaybe<Scalars['Bytes']>;
+  sender_gt?: InputMaybe<Scalars['Bytes']>;
+  sender_gte?: InputMaybe<Scalars['Bytes']>;
   sender_in?: InputMaybe<Array<Scalars['Bytes']>>;
+  sender_lt?: InputMaybe<Scalars['Bytes']>;
+  sender_lte?: InputMaybe<Scalars['Bytes']>;
   sender_not?: InputMaybe<Scalars['Bytes']>;
   sender_not_contains?: InputMaybe<Scalars['Bytes']>;
   sender_not_in?: InputMaybe<Array<Scalars['Bytes']>>;

src/nft/components/profile/list/ListPage.tsx

@@ -9,7 +9,7 @@ import { BackArrowIcon } from 'nft/components/icons'
 import { headlineLarge, headlineSmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useBag, useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
-import { LIST_PAGE_MARGIN } from 'nft/pages/profile/profile'
+import { LIST_PAGE_MARGIN } from 'nft/pages/profile/shared'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
 import { fetchPrice, formatEth, formatUsdPrice } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'

src/nft/css/common.css.ts

@@ -40,21 +40,6 @@ export const commonButtonStyles = style([
   },
 ])
 
-export const buttonMedium = style([
-  buttonTextMedium,
-  commonButtonStyles,
-  sprinkles({
-    backgroundColor: 'accentAction',
-    color: 'explicitWhite',
-  }),
-  {
-    padding: '14px 18px',
-    ':disabled': {
-      opacity: '0.3',
-    },
-  },
-])
-
 const magicalGradient = style({
   selectors: {
     '&::before': {

src/nft/pages/profile/profile.css.ts

-import { style } from '@vanilla-extract/css'
-import { sprinkles } from 'nft/css/sprinkles.css'
-
-export const section = style([
-  sprinkles({
-    paddingLeft: { sm: '16', lg: '0' },
-    paddingRight: { sm: '16', lg: '0' },
-  }),
-  { maxWidth: '1000px', margin: '0 auto' },
-])
-
-export const notConnected = style({
-  height: '70vh',
-})
-
-export const profileWrapper = style([
-  sprinkles({
-    height: { sm: 'full', md: 'auto' },
-    width: 'full',
-  }),
-  {
-    scrollbarWidth: 'none',
-  },
-])

src/nft/pages/profile/profile.tsx

 import { Trace } from '@uniswap/analytics'
 import { InterfacePageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
+import { ButtonPrimary } from 'components/Button'
 import { NftListV2Variant, useNftListV2Flag } from 'featureFlags/flags/nftListV2'
-import { Box } from 'nft/components/Box'
-import { Center, Column } from 'nft/components/Flex'
+import { XXXL_BAG_WIDTH } from 'nft/components/bag/Bag'
 import { ListPage } from 'nft/components/profile/list/ListPage'
 import { ProfilePage } from 'nft/components/profile/view/ProfilePage'
 import { ProfilePageLoadingSkeleton } from 'nft/components/profile/view/ProfilePageLoadingSkeleton'
-import { buttonMedium, headlineMedium } from 'nft/css/common.css'
 import { useBag, useNFTList, useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
 import { Suspense, useEffect, useRef } from 'react'
 import { useToggleWalletModal } from 'state/application/hooks'
+import styled from 'styled-components/macro'
+import { BREAKPOINTS, ThemedText } from 'theme'
 
-import * as styles from './profile.css'
+import { LIST_PAGE_MARGIN } from './shared'
 
-export const LIST_PAGE_MARGIN = 156
+const ProfilePageWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  scrollbar-width: none;
 
-const SHOPPING_BAG_WIDTH = 360
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+    height: auto;
+  }
+`
+
+const LoadedAccountPage = styled.div<{ cartExpanded: boolean; isOnV2ListPage: boolean }>`
+  width: calc(
+    100% -
+      ${({ cartExpanded, isOnV2ListPage }) =>
+        isOnV2ListPage ? LIST_PAGE_MARGIN * 2 : cartExpanded ? XXXL_BAG_WIDTH : 0}px
+  );
+  margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN : 0)}px;
+`
+
+const Center = styled.div`
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: fixed;
+  white-space: nowrap;
+`
+
+const ConnectWalletButton = styled(ButtonPrimary)`
+  width: min-content;
+  white-space: nowrap;
+  border-radius: 12px;
+  padding: 14px 18px;
+  border: none;
+`
 
 const ProfileContent = () => {
   const sellPageState = useProfilePageState((state) => state.state)
@@ -46,43 +81,29 @@ const ProfileContent = () => {
   }, [account, resetSellAssets, setSellPageState, clearCollectionFilters])
   const cartExpanded = useBag((state) => state.bagExpanded)
   const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
+  const isListingNfts = sellPageState === ProfilePageStateType.LISTING
+  const isOnV2ListPage = isNftListV2 && isListingNfts
 
   return (
     <Trace page={InterfacePageName.NFT_PROFILE_PAGE} shouldLogImpression>
-      <Box className={styles.profileWrapper}>
-        {/* <Head> TODO: figure out metadata tagging
-          <title>Genie | Sell</title>
-        </Head> */}
+      <ProfilePageWrapper>
         {account ? (
-          <Box
-            style={{
-              width: `calc(100% - ${
-                cartExpanded && (!isNftListV2 || sellPageState === ProfilePageStateType.VIEWING)
-                  ? SHOPPING_BAG_WIDTH
-                  : isNftListV2
-                  ? LIST_PAGE_MARGIN * 2
-                  : 0
-              }px)`,
-              margin: isNftListV2 ? `0px ${LIST_PAGE_MARGIN}px` : 'unset',
-            }}
-          >
-            {sellPageState === ProfilePageStateType.VIEWING ? <ProfilePage /> : <ListPage />}
-          </Box>
+          <LoadedAccountPage cartExpanded={cartExpanded} isOnV2ListPage={isOnV2ListPage}>
+            {!isListingNfts ? <ProfilePage /> : <ListPage />}
+          </LoadedAccountPage>
         ) : (
-          <Column as="section" gap="60" className={styles.section}>
-            <div style={{ minHeight: '70vh' }}>
-              <Center className={styles.notConnected} flexDirection="column">
-                <Box as="span" className={headlineMedium} color="textSecondary" marginBottom="24" display="block">
-                  No items to display
-                </Box>
-                <Box as="button" className={buttonMedium} onClick={toggleWalletModal}>
-                  Connect Wallet
-                </Box>
-              </Center>
-            </div>
-          </Column>
+          <Center>
+            <ThemedText.HeadlineMedium lineHeight="36px" color="textSecondary" fontWeight="600" marginBottom="24px">
+              No items to display
+            </ThemedText.HeadlineMedium>
+            <ConnectWalletButton onClick={toggleWalletModal}>
+              <ThemedText.SubHeader color="white" lineHeight="20px">
+                Connect Wallet
+              </ThemedText.SubHeader>
+            </ConnectWalletButton>
+          </Center>
         )}
-      </Box>
+      </ProfilePageWrapper>
     </Trace>
   )
 }

src/nft/pages/profile/shared.ts

+export const LIST_PAGE_MARGIN = 156