feat: revised profile card designs (#4901)

* add default style

* update select button styles

* add styles for listed cards

* update index for profile skeleton

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx

@@ -75,7 +75,11 @@ export const ProfilePageLoadingSkeleton = () => {
         <FilterButtonSkeleton />
         <SellButtonSkeleton />
       </FilterBarSkeletonWrapper>
-      <div className={assetList}>{new Array(25).fill(<ProfileAssetCardSkeleton />)}</div>
+      <div className={assetList}>
+        {new Array(25).map((_, index) => (
+          <ProfileAssetCardSkeleton key={index} />
+        ))}
+      </div>
     </SkeletonPageWrapper>
   )
 }

src/nft/components/profile/view/WalletAssetDisplay.tsx

@@ -1,7 +1,7 @@
 import { Box } from 'nft/components/Box'
-import { Column } from 'nft/components/Flex'
+import { Column, Row } from 'nft/components/Flex'
 import { VerifiedIcon } from 'nft/components/icons'
-import { subheadSmall } from 'nft/css/common.css'
+import { bodySmall, buttonTextSmall, subhead } from 'nft/css/common.css'
 import { useBag, useIsMobile, useSellAsset } from 'nft/hooks'
 import { DetailsOrigin, WalletAsset } from 'nft/types'
 import { formatEth, getAssetHref } from 'nft/utils'
@@ -41,11 +41,19 @@ export const WalletAssetDisplay = ({ asset, isSellMode }: { asset: WalletAsset;
       toggleCart()
   }
 
+  const uniqueSellOrdersMarketplaces = useMemo(
+    () => [...new Set(asset.sellOrders.map((order) => order.marketplace))],
+    [asset.sellOrders]
+  )
+
   return (
     <Link to={getAssetHref(asset, DetailsOrigin.PROFILE)} style={{ textDecoration: 'none' }}>
       <Column
-        color={'textPrimary'}
-        className={subheadSmall}
+        borderBottomLeftRadius="20"
+        borderBottomRightRadius="20"
+        paddingBottom="20"
+        transition="250"
+        backgroundColor={boxHovered ? 'backgroundOutline' : 'backgroundSurface'}
         onMouseEnter={toggleBoxHovered}
         onMouseLeave={toggleBoxHovered}
       >
@@ -58,48 +66,47 @@ export const WalletAssetDisplay = ({ asset, isSellMode }: { asset: WalletAsset;
           src={asset.image_url ?? '/nft/svgs/image-placeholder.svg'}
           style={{ aspectRatio: '1' }}
         />
-        <Column
-          position="relative"
-          borderBottomLeftRadius="20"
-          borderBottomRightRadius="20"
-          transition="250"
-          backgroundColor={boxHovered ? 'backgroundOutline' : 'backgroundSurface'}
-          paddingY="12"
-          paddingX="12"
-        >
-          <Box className={subheadSmall} overflow="hidden" textOverflow="ellipsis" marginTop="4" lineHeight="20">
-            {asset.name ? asset.name : `#${asset.tokenId}`}
-          </Box>
-          <Box fontSize="12" marginTop="4" lineHeight="16" overflow="hidden" textOverflow="ellipsis">
-            {asset.collection?.name}
-            {asset.collectionIsVerified ? <VerifiedIcon className={styles.verifiedBadge} /> : null}
-          </Box>
-          <Box as="span" fontSize="12" lineHeight="16" color="textSecondary" marginTop="8">
-            Last:&nbsp;
-            {asset.lastPrice ? (
-              <>
-                {formatEth(asset.lastPrice)}
-                &nbsp;ETH
-              </>
-            ) : (
-              <Box as="span" marginLeft="6">
-                &mdash;
+        <Column paddingTop="12" paddingX="12">
+          <Row>
+            <Column flex="2" gap="4" whiteSpace="nowrap" style={{ maxWidth: '67%' }}>
+              <Box className={subhead} color="textPrimary" overflow="hidden" textOverflow="ellipsis">
+                {asset.name ? asset.name : `#${asset.tokenId}`}
               </Box>
-            )}
-          </Box>
-          <Box as="span" fontSize="12" lineHeight="16" color="textSecondary" marginTop="4">
-            Floor:&nbsp;
-            {asset.floorPrice ? (
-              <>
-                {formatEth(asset.floorPrice)}
-                &nbsp;ETH
-              </>
-            ) : (
-              <Box as="span" marginLeft="8">
-                &mdash;
+              <Box className={bodySmall} color="textSecondary" overflow="hidden" textOverflow="ellipsis">
+                {asset.collection?.name}
+                {asset.collectionIsVerified ? <VerifiedIcon className={styles.verifiedBadge} /> : null}
               </Box>
+            </Column>
+            {asset.sellOrders.length > 0 && (
+              <Column gap="6" flex="1" justifyContent="flex-end" whiteSpace="nowrap" style={{ maxWidth: '33%' }}>
+                <>
+                  <Row className={subhead} color="textPrimary">
+                    <Box width="full" textAlign="right" overflow="hidden" textOverflow="ellipsis">
+                      {formatEth(asset.floor_sell_order_price)}
+                    </Box>
+                    &nbsp;ETH
+                  </Row>
+                  <Row justifyContent="flex-end">
+                    {uniqueSellOrdersMarketplaces.map((market, index) => {
+                      return (
+                        <Box
+                          as="img"
+                          key={index}
+                          alt={market}
+                          width="16"
+                          height="16"
+                          borderRadius="4"
+                          marginLeft="4"
+                          objectFit="cover"
+                          src={`/nft/svgs/marketplaces/${market}.svg`}
+                        />
+                      )
+                    })}
+                  </Row>
+                </>
+              </Column>
             )}
-          </Box>
+          </Row>
           {isSellMode && (
             <Box
               marginTop="12"
@@ -108,9 +115,17 @@ export const WalletAssetDisplay = ({ asset, isSellMode }: { asset: WalletAsset;
               borderRadius="12"
               paddingY="8"
               transition="250"
-              color={buttonHovered ? 'textPrimary' : isSelected ? 'red400' : 'genieBlue'}
-              backgroundColor={buttonHovered ? (isSelected ? 'red400' : 'genieBlue') : 'backgroundSurface'}
-              className={subheadSmall}
+              color={buttonHovered || isSelected ? 'textPrimary' : 'accentAction'}
+              backgroundColor={
+                buttonHovered
+                  ? isSelected
+                    ? 'accentFailure'
+                    : 'accentAction'
+                  : isSelected
+                  ? 'backgroundInteractive'
+                  : 'accentActionSoft'
+              }
+              className={buttonTextSmall}
               onMouseEnter={toggleButtonHovered}
               onMouseLeave={toggleButtonHovered}
               onClick={(e) => {

src/nft/pages/profile/profile.tsx

@@ -14,7 +14,7 @@ import { useToggleWalletModal } from 'state/application/hooks'
 
 import * as styles from './sell.css'
 
-const SHOPPING_BAG_WIDTH = 324
+const SHOPPING_BAG_WIDTH = 360
 
 const Profile = () => {
   const sellPageState = useProfilePageState((state) => state.state)

src/nft/themes/darkTheme.ts

@@ -5,7 +5,7 @@ export const darkTheme: Theme = {
     accentFailure: vars.color.red300,
     accentFailureSoft: 'rgba(253, 118, 107, 0.12)',
     accentAction: vars.color.blue400,
-    accentActionSoft: '#000000E5',
+    accentActionSoft: 'rgba(76, 130, 251, 0.24)',
 
     explicitWhite: '#FFFFFF',
     green: vars.color.green200,