[NFTCard] : New styles for card

.changeset/great-tools-look.md

@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Add styles for nft card

.github/workflows/chromatic.yml

@@ -17,7 +17,7 @@ jobs:
             - name: Install pnpm
               uses: pnpm/[email protected]
               with:
-                  version: 7
+                  version: 7.11.0
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/main.yml

@@ -17,7 +17,7 @@ jobs:
             - name: Install pnpm
               uses: pnpm/[email protected]
               with:
-                  version: 7
+                  version: 7.11.0
 
             - name: Use Node ${{ matrix.node }}
               uses: actions/setup-node@v2

.github/workflows/publish.yml

@@ -21,7 +21,7 @@ jobs:
             - name: Install pnpm
               uses: pnpm/[email protected]
               with:
-                  version: 7
+                  version: 7.11.0
 
             - name: Use Node ${{ matrix.node }}
               uses: actions/setup-node@v2

.github/workflows/size.yml

@@ -12,7 +12,7 @@ jobs:
             - name: Install pnpm
               uses: pnpm/[email protected]
               with:
-                  version: 7
+                  version: 7.11.0
 
             - uses: andresz1/size-limit-action@v1
               with:

.github/workflows/storybook.yml

@@ -16,7 +16,7 @@ jobs:
             - name: Install pnpm
               uses: pnpm/[email protected]
               with:
-                  version: 7
+                  version: 7.11.0
 
             - name: Use Node ${{ matrix.node }}
               uses: actions/setup-node@v2

packages/core/src/IconsGallery/IconGallery.tsx

@@ -1,4 +1,4 @@
-import { Input, useCopyToClipboard, useNotification } from '../lib/index';
+import { Input, Row, useCopyToClipboard, useNotification } from '../lib/index';
 import * as Icons from '@web3uikit/icons';
 import { IPosition, notifyType } from '../lib/Notification/types';
 import { useState } from 'react';
@@ -7,14 +7,15 @@ import { color } from '@web3uikit/styles';
 const { StyledDivGallery, StyledDivGrid, StyledDivIcon } = styles;
 
 const IconsGallery = () => {
+    const [iconColor, setIconColor] = useState<string>(color.blue70);
     const AllIcons = Object.values(Icons);
     const AllCustomStyledIcons = AllIcons.map((Icon, index) => {
         return (
             <StyledDivIcon
                 key={Icon.name.slice(3)}
                 onClick={() => handleClick(Icon.name.slice(3), 'info')}
             >
-                <Icon fontSize={30} color={color.blue70} />
+                <Icon fontSize={30} fill={iconColor} />
             </StyledDivIcon>
         );
     });
@@ -39,13 +40,19 @@ const IconsGallery = () => {
 
     return (
         <StyledDivGallery>
-            <Input
-                value={searchText}
-                onChange={(e) => setSearchText(e.target.value)}
-                type="text"
-                prefixIcon={<Icons.Search />}
-                style={{ margin: '50px' }}
-            />
+            <Row alignItems="center">
+                <Input
+                    value={searchText}
+                    onChange={(e) => setSearchText(e.target.value)}
+                    type="text"
+                    prefixIcon={<Icons.Search />}
+                    style={{ margin: '50px' }}
+                />
+                <input
+                    type="color"
+                    onChange={(e) => setIconColor(e.target.value)}
+                />
+            </Row>
             <StyledDivGrid>
                 {AllCustomStyledIcons.filter((Icon: JSX.Element) =>
                     Icon.key

packages/core/src/lib/NftCard/NftCard.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NftCard from './NftCard';
+import { color } from '@web3uikit/styles';
 
 export default {
     title: '4.UI/NftCard',
@@ -34,4 +35,43 @@ Default.args = {
         minter_address: '0x8be13ff71224ad525f0474553aa7f8621b856bd4',
     },
     chain: 'Ethereum',
+    backgroundColor: color.aero10,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+    moralisApiResult: {
+        token_address: '0x2953399124f0cbb46d2cbacd8a89cf0599974963',
+        token_id:
+            '113461209507512867518933452141320285231135646094834536306130710983923277496520',
+        amount: '96',
+        owner_of: '0xfad8c4d1b26f280ca7a3f3f05e0fba1954e69c93',
+        token_hash: '6a5c632686374a276c17510e45fa546f',
+        block_number_minted: '27090571',
+        block_number: '36819147',
+        transfer_index: [36819147, 74, 250, 0],
+        contract_type: 'ERC1155',
+        name: 'OpenSea Collections',
+        symbol: 'OPENSTORE',
+        token_uri:
+            'https://api.opensea.io/api/v2/metadata/matic/0x2953399124F0cBB46d2CbACD8A89cF0599974963/0xfad8c4d1b26f280ca7a3f3f05e0fba1954e69c930000000000001c00000000c8',
+        metadata:
+            '{"image":"https://lh3.googleusercontent.com/rp89xp0BIhvqaRPeSt-ONlBXyKb016HFAOr_f3HjkdQjBgcXmwZJXPafTlfft9qR6yKB7Ga7ycFtu2Oa4Aqder4_rBoKyMqL8b-e6Q","name":"Moralis Core Keycard","description":"The Core Team Keycard is used to identify a Moralis Core Team member.\\n\\nThe token is held proudly by Moralis developers, content creators, and supporting team members a like!\\n\\nKeep the hedgehog, push the flywheel together, be the movement: Moralis!","external_link":null,"animation_url":"https://openseauserdata.com/files/61af0e98bb91bee60234fcad25a9b343.mp4","traits":[]}',
+        last_token_uri_sync: '2022-12-05T16:00:31.675Z',
+        last_metadata_sync: '2022-12-05T16:00:34.932Z',
+        minter_address: "ERC1155 tokens don't have a single minter",
+        normalized_metadata: {
+            name: 'Moralis Core Keycard',
+            description:
+                'The Core Team Keycard is used to identify a Moralis Core Team member.\n\nThe token is held proudly by Moralis developers, content creators, and supporting team members a like!\n\nKeep the hedgehog, push the flywheel together, be the movement: Moralis!',
+            animation_url: null,
+            external_link: null,
+            image:
+                'https://lh3.googleusercontent.com/rp89xp0BIhvqaRPeSt-ONlBXyKb016HFAOr_f3HjkdQjBgcXmwZJXPafTlfft9qR6yKB7Ga7ycFtu2Oa4Aqder4_rBoKyMqL8b-e6Q',
+            attributes: [],
+        },
+    },
+    chain: 'Polygon',
+    backgroundColor: color.aero10,
+    detailsBorder: 'none',
 };

packages/core/src/lib/NftCard/NftCard.styles.ts

@@ -9,13 +9,13 @@ const DivStyled = styled.div`
 
 const DivStyledContainer = styled.div<Partial<INftCardProps>>`
     ${resetCSS};
-    background-color: ${color.white};
+    background-color: ${(props) => props.backgroundColor ?? color.white};
     border-radius: 20px;
     box-shadow: 0px 4px 10px rgba(48, 71, 105, 0.1);
     height: min(830px, auto);
     margin: auto;
     overflow: auto;
-    padding: 24px 35px 50px;
+    padding: 32px;
     text-align: center;
 
     .nft-image > * {
@@ -40,17 +40,15 @@ const DivStyledContainer = styled.div<Partial<INftCardProps>>`
         `}
 `;
 
-const FieldsetStyled = styled.fieldset`
-    border: 2px solid ${color.navy30};
-    border-radius: 16px;
+const FieldsetStyled = styled.fieldset<Partial<INftCardProps>>`
     margin-top: 40px;
-    padding: 12px 24px;
     text-align: left;
     legend {
-        color: ${color.navy40};
-        font-size: 14px;
-        font-weight: 550;
-        line-height: 24px;
+        color: ${color.blue70};
+        font-family: inherit;
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 28px;
     }
     table,
     tr {
@@ -74,6 +72,21 @@ const FieldsetStyled = styled.fieldset`
     .address {
         color: ${color.navy40};
     }
+    ${(p) =>
+        p.detailsBorder !== 'none'
+            ? css`
+                  border: ${p.detailsBorder ?? `2px solid ${color.navy30}`};
+                  border-radius: 16px;
+                  padding: 12px 24px;
+                  legend {
+                      color: ${color.navy40};
+                      font-family: inherit;
+                      font-size: 14px;
+                      font-weight: 550;
+                      line-height: 24px;
+                  }
+              `
+            : 'border:none'}
 `;
 
 export default {

packages/core/src/lib/NftCard/NftCard.tsx

@@ -5,13 +5,16 @@ import { Typography } from '../Typography';
 import { color } from '@web3uikit/styles';
 import { image } from '../../utils/utils';
 import NftDetails from './NftDetail.helper';
+import TruncateString from '../Credentials/components/TruncateString';
 
 const { DivStyled, DivStyledContainer, FieldsetStyled } = styles;
 
 const NFTCard: React.FC<INftCardProps &
     React.HTMLAttributes<HTMLDivElement>> = ({
+    backgroundColor = color.white,
     chain,
     customDetails,
+    detailsBorder,
     moralisApiResult: data,
     width = '400px',
     ...props
@@ -33,27 +36,23 @@ const NFTCard: React.FC<INftCardProps &
 
     return (
         <DivStyled className="NftCard" data-testid="test-NftCard" {...props}>
-            <DivStyledContainer width={width}>
-                <Typography
-                    variant="h3"
-                    weight="600"
-                    color={color.blueGray50}
-                    style={{ marginBottom: '52px' }}
-                >
-                    {data?.name}
-                </Typography>
+            <DivStyledContainer backgroundColor={backgroundColor} width={width}>
                 <div className="nft-image">{getImage()}</div>
                 <div className="nft-card-text">
-                    <Typography variant="h4" weight="500">
-                        {data?.token_id}
+                    <Typography variant="h4" weight="500" fontSize="20px">
+                        <TruncateString
+                            text={`${data.name} #${data?.token_id}`}
+                            fontSize="20px"
+                            textColor={color.blue70}
+                        />
                     </Typography>
                 </div>
                 {data.contract_type && (
                     <Typography variant="body16" weight="400">
                         {data.contract_type}
                     </Typography>
                 )}
-                <FieldsetStyled>
+                <FieldsetStyled detailsBorder={detailsBorder}>
                     <legend>Details</legend>
                     {customDetails ? (
                         customDetails

packages/core/src/lib/NftCard/NftDetail.helper.tsx

@@ -1,6 +1,8 @@
+import { color } from '@web3uikit/styles';
 import React from 'react';
 import { getEllipsisTxt } from '../../utils/utils';
 import { CopyButton } from '../CopyButton';
+import TruncateString from '../Credentials/components/TruncateString';
 import { INftCardProps } from './types';
 
 const NftDetails: React.FC<{
@@ -28,7 +30,13 @@ const NftDetails: React.FC<{
                 )}
                 <tr>
                     <th>Token Id</th>
-                    <td className="card-text">{data?.token_id}</td>
+                    <td className="card-text">
+                        <TruncateString
+                            text={data?.token_id}
+                            fontSize="16px"
+                            textColor={color.blueGray50}
+                        />
+                    </td>
                 </tr>
                 <tr>
                     <th>Symbol</th>

packages/core/src/lib/NftCard/types.ts

@@ -38,4 +38,14 @@ export interface INftCardProps {
      * custom details component
      */
     customDetails: ReactNode;
+
+    /**
+     * set card background color
+     */
+    backgroundColor: string;
+
+    /**
+     * set border for details section
+     */
+    detailsBorder: string | 'none';
 }