diff --git a/.husky/lint-staged.config.json b/.husky/lint-staged.config.json index 57227fc..6107d5e 100644 --- a/.husky/lint-staged.config.json +++ b/.husky/lint-staged.config.json @@ -1,3 +1,3 @@ { - "*.{js,json,sol,ts}": "prettier --write" + "*.{js,jsx,json,sol,ts,tsx}": "prettier --write" } diff --git a/ui/package.json b/ui/package.json index 79d86f4..143d800 100644 --- a/ui/package.json +++ b/ui/package.json @@ -39,6 +39,7 @@ "eslint-plugin-react": "^7.31.11", "ethers": "^5.7.2", "prettier": "^2.8.0", + "react-icons": "^4.7.1", "react-query": "^3.39.2", "ts-loader": "^9.4.1", "typescript": "^4.9.3", diff --git a/ui/src/components/attributes-detail/attributes-detail.tsx b/ui/src/components/attributes-detail/attributes-detail.tsx index f1ee114..865be94 100644 --- a/ui/src/components/attributes-detail/attributes-detail.tsx +++ b/ui/src/components/attributes-detail/attributes-detail.tsx @@ -16,13 +16,16 @@ export const AttributesDetail = ({ return ( - {attributes.map((attribute) => ( - - ))} + {attributes.map( + (attribute) => + attribute.value !== '' && ( + + ) + )} ); diff --git a/ui/src/components/card/card-attributes.tsx b/ui/src/components/card/card-attributes.tsx index fc51e45..cbb1295 100644 --- a/ui/src/components/card/card-attributes.tsx +++ b/ui/src/components/card/card-attributes.tsx @@ -1,4 +1,4 @@ -import { Card, CardBody } from '@chakra-ui/react'; +import { Card, CardBody, Tooltip } from '@chakra-ui/react'; import { TileInfo } from '../tile-info'; type CardAttributesProps = { @@ -15,9 +15,11 @@ export const CardAttributes = ({ heading, info }: CardAttributesProps) => ( variant="outline" width="200px" > - - - + + + + + ); diff --git a/ui/src/components/card/card-site.tsx b/ui/src/components/card/card-site.tsx index b8e2287..27b155b 100644 --- a/ui/src/components/card/card-site.tsx +++ b/ui/src/components/card/card-site.tsx @@ -47,9 +47,10 @@ export const SiteCard: React.FC = ({ tokenId }) => { const { name, owner, image, external_url: externalUrl } = data as any; return ( = ({ tokenId }) => { > = (props) => { + const { width = '1.5em', height = '1.5em' } = props; + return ( + + MetaMask + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/ui/src/components/icon/icon-types.tsx b/ui/src/components/icon/icon-types.tsx new file mode 100644 index 0000000..3f362f7 --- /dev/null +++ b/ui/src/components/icon/icon-types.tsx @@ -0,0 +1,15 @@ +import { FaWallet } from 'react-icons/fa'; +import { IoExitOutline } from 'react-icons/io5'; +import { AiOutlineCopy } from 'react-icons/ai'; +import { MetamaskIcon } from './custom'; + +export const IconLibrary = Object.freeze({ + copy: AiOutlineCopy, + 'log-out': IoExitOutline, + metamask: MetamaskIcon, + wallet: FaWallet, +}); + +export type IconName = keyof typeof IconLibrary; + +export type IconType = typeof IconLibrary[Name]; diff --git a/ui/src/components/icon/icon.tsx b/ui/src/components/icon/icon.tsx new file mode 100644 index 0000000..eeb8115 --- /dev/null +++ b/ui/src/components/icon/icon.tsx @@ -0,0 +1,16 @@ +import { + forwardRef, + IconProps as IconPropsChakra, + Icon as IconChakra, +} from '@chakra-ui/react'; +import { IconLibrary, IconName, IconType } from './icon-types'; + +export type IconComponentProps = IconPropsChakra & { name: IconName }; + +export const Icon = forwardRef( + ({ name, ...iconProps }, ref) => { + const IconElement: IconType = IconLibrary[name]; + return ; + } +); + diff --git a/ui/src/components/icon/index.ts b/ui/src/components/icon/index.ts new file mode 100644 index 0000000..bd7846d --- /dev/null +++ b/ui/src/components/icon/index.ts @@ -0,0 +1 @@ +export * from './icon'; diff --git a/ui/src/components/wallet-button/index.ts b/ui/src/components/wallet-button/index.ts index 5e6feaf..d1199ac 100644 --- a/ui/src/components/wallet-button/index.ts +++ b/ui/src/components/wallet-button/index.ts @@ -1 +1,2 @@ export * from './wallet-button'; +export * from './wallet.utils'; diff --git a/ui/src/components/wallet-button/wallet-button.tsx b/ui/src/components/wallet-button/wallet-button.tsx index c56874b..9d86966 100644 --- a/ui/src/components/wallet-button/wallet-button.tsx +++ b/ui/src/components/wallet-button/wallet-button.tsx @@ -1,7 +1,16 @@ import { useCallback } from 'react'; import { useAppDispatch, useWalletStore, walletActions } from '@/store'; import { contractAddress } from '@/utils'; -import { Menu, MenuButton, MenuList, MenuItem, Button } from '@chakra-ui/react'; +import { + Menu, + MenuButton, + MenuList, + MenuItem, + Button, + Flex, +} from '@chakra-ui/react'; +import { Icon } from '../icon'; +import { WalletType } from './wallet.utils'; const WalletMenu: React.FC = () => { const { account = '', provider } = useWalletStore(); @@ -17,13 +26,33 @@ const WalletMenu: React.FC = () => { }, [dispatch]); return ( - - - {`${provider} (${contractAddress(account)})`} - - - Copy Account - Disconnect + + + + } + > + Copy Account + + } + > + Disconnect + ); @@ -40,15 +69,24 @@ const ConnectionMenu: React.FC = () => { return ( - } isLoading={state === 'loading'} disabled={state === 'loading'} > - Connect Wallet - - - Metamask + Connect + + + } + > + Metamask + ); diff --git a/ui/src/components/wallet-button/wallet.utils.ts b/ui/src/components/wallet-button/wallet.utils.ts new file mode 100644 index 0000000..2567ca3 --- /dev/null +++ b/ui/src/components/wallet-button/wallet.utils.ts @@ -0,0 +1,3 @@ +export enum WalletType { + metamask = 'metamask', +} diff --git a/ui/src/theme/foundations/colors.ts b/ui/src/theme/foundations/colors.ts new file mode 100644 index 0000000..adec9f2 --- /dev/null +++ b/ui/src/theme/foundations/colors.ts @@ -0,0 +1,16 @@ +export const colors = { + custom: { + gray: { + 100: '#4e4e4e', + 200: '#282824', + }, + black: '#161616', + blue: { + 100: '#1d4ed8', + }, + white: { + 50: '#c5c5c50a', + 100: '#f3f3f36b', + }, + }, +}; diff --git a/ui/src/theme/foundations/index.ts b/ui/src/theme/foundations/index.ts new file mode 100644 index 0000000..d757e0e --- /dev/null +++ b/ui/src/theme/foundations/index.ts @@ -0,0 +1 @@ +export * from './colors'; diff --git a/ui/src/theme/index.ts b/ui/src/theme/index.ts index ecacdbd..0334e12 100644 --- a/ui/src/theme/index.ts +++ b/ui/src/theme/index.ts @@ -1,12 +1,13 @@ import { extendTheme } from '@chakra-ui/react'; +import { colors } from './foundations'; const appTheme = { styles: { global: { body: { color: 'rgba(255, 255, 255)', - bg: '#161616', - margin: '50px', + bg: 'custom.black', + margin: '25px 50px', }, }, }, @@ -17,6 +18,7 @@ const appTheme = { sizes: { modalHeight: '345px', }, + colors, }; export const theme = extendTheme(appTheme); diff --git a/ui/src/views/detail/detail.tsx b/ui/src/views/detail/detail.tsx index a0772ca..2b80924 100644 --- a/ui/src/views/detail/detail.tsx +++ b/ui/src/views/detail/detail.tsx @@ -44,7 +44,7 @@ export const MintedSiteDetail = () => { return ( <> - + { + const { setFieldValue } = useFormikContext(); + + const handlePasteAddress = () => { + if (setFieldValue && props.name) { + navigator.clipboard + .readText() + .then((text) => setFieldValue(props.name as string, text)); + } + }; + + return ( + + + + + + + ); +}; + export const MintSite = () => { const setToastInfo = useToast(); const { provider } = useWalletStore(); @@ -94,128 +119,141 @@ export const MintSite = () => { return ( <> - - - } - variant="link" - size={'xl'} - textDecoration={'none'} - /> - - Mint your Site - - - - {({ values, touched, handleSubmit, isSubmitting, errors }) => ( -
- - - - - - Description - - {errors.description && ( - {errors.description} - )} - - - - - - - + + + + + + Mint your Site + + + + {({ values, touched, handleSubmit, isSubmitting, errors }) => ( + + - - - - - - -
- )} - - + + + Owner address + + + {errors.ownerAddress && ( + + {errors.ownerAddress} + + )} + + + + Description + + {errors.description && ( + + {errors.description} + + )} + + + + + + + + + + + + + + + + )} + + + diff --git a/ui/yarn.lock b/ui/yarn.lock index 5de93a8..6ff1462 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -3717,6 +3717,11 @@ react-focus-lock@^2.9.1: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-icons@^4.7.1: + version "4.7.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345" + integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"