[Modal,NftCard,Select,Input,]: Bug fix and feature added

.changeset/rare-tips-allow.md

@@ -0,0 +1,6 @@
+---
+'@web3uikit/core': patch
+'@web3uikit/styles': patch
+---
+
+Modal,NftCard,Select,InputNew - fix multiple bugs and add features, and add new color

packages/core/src/lib/InputNew/Input.tsx

@@ -53,6 +53,10 @@ const Input: React.FC<IInputProps> = ({
         setCurrentValue(value);
     }, [value]);
 
+    useEffect(() => {
+        setInvalidMessage(errorMessage);
+    }, [errorMessage]);
+
     const validate = (event: React.FocusEvent<HTMLInputElement>) => {
         onBlur && onBlur(event);
         if (!hasValidation) return;

packages/core/src/lib/InputNew/atoms/VisibilityToggle.tsx

@@ -12,6 +12,7 @@ const VisibilityToggle: React.FC<IVisibilityToggleProps> = ({
         className="input_visibility"
         data-testid="test-input-icon-visibility"
         onClick={() => onClick()}
+        tabIndex={-1}
     >
         {isInputHidden ? (
             <EyeClosed

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

@@ -7,6 +7,7 @@ import {
     Edit,
     Mail,
     ArrowCircleRight,
+    Cross,
 } from '@web3uikit/icons';
 import { Input } from '../Input';
 import { useArgs } from '@storybook/addons';
@@ -490,3 +491,41 @@ NoOverflow.args = {
         </div>,
     ],
 };
+
+export const CustomModal = Template.bind({});
+CustomModal.args = {
+    id: 'regular',
+    isVisible: true,
+    zIndex: 9999,
+    title: 'Custom Modal',
+    customize: {
+        backgroundColor: color.blue70,
+        color: color.aero20,
+        fontSize: '32px',
+        fontWeight: '600',
+        padding: '24px',
+        borderRadius: '10px',
+        border: '1px solid white',
+        margin: '10px',
+    },
+    closeButton: (
+        <Button
+            icon={<Cross />}
+            iconLayout="icon-only"
+            radius={100}
+            theme="custom"
+            customize={{ backgroundColor: color.aero20 }}
+        />
+    ),
+    children: [
+        <div style={{ textAlign: 'center' }}>
+            <Typography variant="h4" weight="550" color={color.white}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+                eu posuere tortor. Maecenas ac suscipit lacus. Fusce at enim
+                sagittis justo accumsan pellentesque. Proin faucibus posuere
+                varius. Nam egestas, purus eget auctor aliquam, sem nisi iaculis
+                tortor, at posuere urna lorem vitae est. 🤫
+            </Typography>
+        </div>,
+    ],
+};

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

@@ -1,11 +1,11 @@
 import { ModalProps } from './types';
-import styled from 'styled-components';
-
+import styled, { css } from 'styled-components';
 import { color, fonts, HexToRgb } from '@web3uikit/styles';
 
 type TStyleProps = Pick<
     ModalProps,
     | 'canOverflow'
+    | 'customize'
     | 'fixedMode'
     | 'hasCancel'
     | 'isCentered'
@@ -14,6 +14,7 @@ type TStyleProps = Pick<
     | 'zIndex'
 >;
 ``;
+
 const overflow = (): string => {
     return `
             overflow: auto;
@@ -28,28 +29,40 @@ const overflow = (): string => {
 const DivStyledWrap = styled.div<TStyleProps>`
     ${(p) => !p.canOverflow && overflow()}
     ${fonts.text};
-    background-color: ${color.white};
-    border-radius: 20px;
+    background-color: ${(p) => p.customize?.backgroundColor ?? color.white};
+    border: ${(p) => p.customize?.border ?? 'none'};
+    border-radius: ${(p) => p.customize?.borderRadius ?? '20px'};
     box-shadow: 0 4px 10px rgba(48, 71, 105, 0.1);
-    margin: 80px auto;
+    margin: ${(p) => p.customize?.margin ?? '80px auto'};
     max-width: ${(p) => p.width};
     width: 96%;
 `;
 
-const HeaderStyled = styled.header<{
-    title: any;
-    fixedMode: boolean;
-    headerHasBottomBorder: boolean;
-}>`
-    ${(p) => p.fixedMode && 'position: sticky; top: 0;background-color: white;'}
+type THeaderStyles = Pick<
+    ModalProps,
+    'fixedMode' | 'headerHasBottomBorder' | 'customize'
+> & { title: any };
+
+const HeaderStyled = styled.header<THeaderStyles>`
+    ${(p) =>
+        p.fixedMode &&
+        css`
+            position: sticky;
+            top: 0;
+            background-color: white;
+        `};
     ${(p) =>
         typeof p.title === 'string' &&
-        `h3 {
-        color: ${color.navy40};
-        padding-right: 8px;
-        margin-block-start: 0;
-        margin-block-end: 0;
-    }`}
+        css`
+            h3 {
+                color: ${p.customize?.color ?? color.navy40};
+                font-size: ${p.customize?.fontSize};
+                font-weight: ${p.customize?.fontWeight};
+                margin-block-end: 0;
+                margin-block-start: 0;
+                padding-right: 8px;
+            }
+        `};
     align-items: center;
     display: flex;
     padding: 24px 32px 20px;
@@ -72,13 +85,18 @@ const HeaderStyled = styled.header<{
     }
 `;
 
-const DivStyledContent = styled.div`
-    padding: 0px 32px 0px;
+const DivStyledContent = styled.div<Pick<TStyleProps, 'customize'>>`
+    padding: ${(p) => p.customize?.padding ?? '0px 32px 0px'};
 `;
 
 const FooterStyled = styled.footer<TStyleProps>`
     ${(p) =>
-        p.fixedMode && 'position: sticky;bottom: 0;background-color: white;'}
+        p.fixedMode &&
+        css`
+            position: sticky;
+            bottom: 0;
+            background-color: white;
+        `};
     border-top: 1px solid ${color.navy20};
     display: flex;
     flex-wrap: wrap;
@@ -114,7 +132,12 @@ const DivStyled = styled.div<TStyleProps>`
 
 const CustomFooterStyled = styled.footer<TStyleProps>`
     ${(p) =>
-        p.fixedMode && 'position: sticky;bottom: 0;background-color: white;'}
+        p.fixedMode &&
+        css`
+            position: sticky;
+            bottom: 0;
+            background-color: white;
+        `}
     border-top: 1px solid ${color.navy20};
     display: flex;
     padding: 0px 32px 32px;

packages/core/src/lib/Modal/Modal.tsx

@@ -19,6 +19,7 @@ const Modal: React.FC<ModalProps> = ({
     children,
     closeButton,
     customFooter,
+    customize,
     fixedMode = false,
     hasCancel = true,
     hasFooter = true,
@@ -60,19 +61,25 @@ const Modal: React.FC<ModalProps> = ({
 
     return (
         <DivStyled
+            customize={customize}
             data-testid="test-modal"
             id={id}
             isCentered={isCentered}
             isVisible={visible}
             zIndex={zIndex}
             {...props}
         >
-            <DivStyledWrap width={width} canOverflow={canOverflow}>
+            <DivStyledWrap
+                canOverflow={canOverflow}
+                customize={customize}
+                width={width}
+            >
                 <HeaderStyled
+                    customize={customize}
                     data-testid="test-modal-header"
-                    title={title}
                     fixedMode={fixedMode}
                     headerHasBottomBorder={headerHasBottomBorder}
+                    title={title}
                 >
                     <>
                         {typeof title == 'string' ? (
@@ -112,7 +119,11 @@ const Modal: React.FC<ModalProps> = ({
                     </>
                 </HeaderStyled>
 
-                <DivStyledContent id="content" data-testid="test-modal-content">
+                <DivStyledContent
+                    customize={customize}
+                    data-testid="test-modal-content"
+                    id="content"
+                >
                     {children}
                 </DivStyledContent>
 

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

@@ -1,3 +1,5 @@
+
+import { TCustomize } from '../../interfaces/customize';
 import type { ButtonProps } from '../Button';
 
 export interface ModalProps {
@@ -112,4 +114,8 @@ export interface ModalProps {
      * set z-index of modal. EG: 'auto', 10
      */
     zIndex?: string | number;
+    /**
+     * set custom styles
+     */
+    customize?: TCustomize
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NftCard from './NftCard';
 import { color } from '@web3uikit/styles';
@@ -82,3 +82,76 @@ Custom.args = {
     },
     detailsBorder: 'none',
 };
+export const PalmNetworkNft = Template.bind({});
+PalmNetworkNft.args = {
+    moralisApiResult: {
+        block_number: '',
+        owner_of: '',
+        transfer_index: [],
+        token_address: '0x19d4f9a260af1d7e0e99a32dbe418956af875c25',
+        token_id:
+            '10082949885042994343756379319869424059266282382079623606537702675585376546605',
+        amount: '1',
+        token_hash: 'fffe8584415ba3cdc8f68d787bafe94e',
+        block_number_minted: '2118553',
+
+        contract_type: 'ERC1155',
+        name: 'DC COMICS',
+        symbol: 'DCD',
+        token_uri:
+            'https://ipfs.moralis.io:2053/ipfs/bafybeifnml5ackajmuz7ylmw6zxnpdydpuwiscxoi4kn2srgkrzjjglwiq',
+        metadata:
+            '{"name":"Val-Zod, Superman","type":"video","description":"With Kal-El brainwashed by Darkseid and now a malevolent supervillain, a brave champion must rise to face him - and that comes in the form of Val-Zod, the new Superman! In this extra-sized issue, Val-Zod finally accepts his role as the new Superman of Earth 2 as he faces the twisted, brutal original Superman.  Val-Zod\'s Superman graces a cover in Andy Kubert\'s 2014 cover of Earth 2 #25: Rise of a Superman.","image":"ipfs://bafybeidwamf4f2vtfs3ocbfvbvtlmelj2ysvn3vxx7pkxriktmtchqzpoy","properties":{"Character":"Superman","Tier":"Rare"}}',
+        last_token_uri_sync: '2022-11-12T08:23:40.884Z',
+        last_metadata_sync: '2022-11-12T08:24:27.705Z',
+        minter_address: "ERC1155 tokens don't have a single minter",
+    },
+    chain: 'Palm',
+    customize: {
+        backgroundColor: color.aero10,
+        borderRadius: '10px',
+        border: '2px solid black',
+        margin: '50px',
+        padding: '20px',
+        fontSize: '16px',
+        fontWeight: '700',
+    },
+    detailsBorder: 'none',
+};
+
+export const ErrorNft = Template.bind({});
+ErrorNft.args = {
+    moralisApiResult: {
+        block_number: '',
+        owner_of: '',
+        transfer_index: [],
+        token_address: '0x19d4f9a260af1d7e0e99a32dbe418956af875c25',
+        token_id:
+            '86275255655979606840825330240032284343267514139596198785629754523673095289802',
+        amount: '1',
+        token_hash: 'ffffd87563e6c69ee9873dc05ad15369',
+        block_number_minted: '2447532',
+
+        contract_type: 'ERC1155',
+        name: 'DC COMICS',
+        symbol: 'DCD',
+        token_uri:
+            'https://ipfs.moralis.io:2053/ipfs/bafybeifyobjq4m4ab2thdvk5cc67dtwcdwrysqaxiogkcq5pvu7fcqpk2a',
+        metadata:
+            '{"name":"Harley Quinn","type":"video","description":"Harley Quinn and her henchmen - the Quinntets - are anxious to score some moolah in 2001\'s Harley Quinn #6 Who Wants to Rob A Millionaire? With Cover by Terry Dodson. Harley finds that being the leader of the pack isn\'t all it\'s cracked up to be. She figures the best way to keep the puppies at bay is to rob someone very rich. Who better than Bruce Wayne?","image":"https://ipfs.io/ipfs/QmWVwD9MSprkmiPt3cFCWGtEiaLisMp8QcxCMHMURBai3e","properties":{"Character":"Harley Quinn","Tier":"Rare"}}',
+        last_token_uri_sync: '2022-12-30T11:53:47.083Z',
+        last_metadata_sync: '2022-12-30T11:53:49.222Z',
+        minter_address: "ERC1155 tokens don't have a single minter",
+    },
+    chain: 'Palm',
+    customize: {
+        backgroundColor: color.aero10,
+        borderRadius: '10px',
+        border: '2px solid black',
+        margin: '50px',
+        padding: '20px',
+        fontSize: '16px',
+        fontWeight: '700',
+    },
+    detailsBorder: 'none',
+};

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

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { INftCardProps } from './types';
 import styles from './NftCard.styles';
 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';
+import { Illustration } from '../Illustrations';
 
 const { DivStyled, DivStyledContainer, FieldsetStyled } = styles;
 
@@ -19,6 +20,8 @@ const NFTCard: React.FC<INftCardProps &
     width = '400px',
     ...props
 }) => {
+    const [isError, setIsError] = useState(false);
+
     if (!data || !data.metadata) return <DivStyled>No metadata</DivStyled>;
 
     const getImage = () => {
@@ -27,10 +30,13 @@ const NFTCard: React.FC<INftCardProps &
             return image(
                 JSON.parse(String(data.metadata))?.animation_url,
                 JSON.parse(String(data.metadata))?.image ||
-                    JSON.parse(String(data.metadata))?.image_url,
+                    JSON.parse(String(data.metadata))?.image_url ||
+                    JSON.parse(String(data.metadata))?.file,
+                JSON.parse(String(data.metadata))?.type,
+                () => setIsError(true),
             );
         } catch (error) {
-            return null;
+            return <Illustration logo="lazyNft" />;
         }
     };
 
@@ -42,7 +48,9 @@ const NFTCard: React.FC<INftCardProps &
             {...props}
         >
             <DivStyledContainer customize={customize} width={width}>
-                <div className="nft-image">{getImage()}</div>
+                <div className="nft-image">
+                    {isError ? <Illustration logo="lazyNft" /> : getImage()}
+                </div>
                 <div className="nft-card-text">
                     <Typography variant="h4" weight="500" fontSize="20px">
                         <TruncateString

packages/core/src/lib/Select/SelectBeta/SelectBeta.styles.ts

@@ -167,7 +167,7 @@ const DivStyledOverlay = styled.div`
     bottom: 0;
     display: none;
     left: 0;
-    position: absolute;
+    position: fixed;
     right: 0;
     top: 0;
     z-index: 2;