Merge pull request #88 from liteflow-labs/fix/various-component-fixes

Fix/various component fixes
liteflow-labs · Nov 30, 2022 · 3616bae · 3616bae · vercel · Nov 30, 2022
2 parents cc37c23 + d3bf3fa
commit 3616bae
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 38 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -14,6 +14,12 @@
 
 #### Fixed
 
+- Fix issue with react key [#88](https://github.com/liteflow-labs/liteflow-js/pull/88)
+- Add missing ref to components [#88](https://github.com/liteflow-labs/liteflow-js/pull/88)
+- Fix double link on menu for mobile and cards [#88](https://github.com/liteflow-labs/liteflow-js/pull/88)
+- Remove invalid attribute for videos [#88](https://github.com/liteflow-labs/liteflow-js/pull/88)
+- Fix structure for wallet balances [#88](https://github.com/liteflow-labs/liteflow-js/pull/88)
+
 #### Security
 
 ## [v1.0.0-beta.8](https://github.com/liteflow-labs/libraries/releases/tag/v1.0.0-beta.8) - 2022-11-15

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nft/components",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   "scripts": {

diff --git a/packages/components/src/History/HistoryList.tsx b/packages/components/src/History/HistoryList.tsx
@@ -42,13 +42,14 @@ type IProps = {
 
 const HistoryList: VFC<IProps> = ({ histories, blockExplorer }) => {
   const { t } = useTranslation('components')
-  const ListItem = (history: IProps['histories'][0]) => {
+  const ListItem = (history: IProps['histories'][0], i: number) => {
     switch (history.action) {
       case 'LISTING':
         invariant(history.unitPrice, 'unitPrice is required')
         return (
           <ListingListItem
             {...history}
+            key={i}
             currency={history.currency}
             unitPrice={history.unitPrice}
           />
@@ -60,6 +61,7 @@ const HistoryList: VFC<IProps> = ({ histories, blockExplorer }) => {
         return (
           <PurchaseListItem
             {...history}
+            key={i}
             currency={history.currency}
             unitPrice={history.unitPrice}
             toAddress={history.toAddress}
@@ -75,6 +77,7 @@ const HistoryList: VFC<IProps> = ({ histories, blockExplorer }) => {
           return (
             <MintListItem
               {...history}
+              key={i}
               blockExplorer={blockExplorer}
               toAddress={history.toAddress}
             />
@@ -83,13 +86,14 @@ const HistoryList: VFC<IProps> = ({ histories, blockExplorer }) => {
         return (
           <TransferListItem
             {...history}
+            key={i}
             toAddress={history.toAddress}
             blockExplorer={blockExplorer}
           />
         )
 
       case 'LAZYMINT':
-        return <LazyMintListItem {...history} />
+        return <LazyMintListItem {...history} key={i} />
     }
   }
   if (histories.length === 0)
@@ -98,7 +102,7 @@ const HistoryList: VFC<IProps> = ({ histories, blockExplorer }) => {
         {t('history.none')}
       </Text>
     )
-  return <List>{histories.map((history) => ListItem(history))}</List>
+  return <List>{histories.map((history, i) => ListItem(history, i))}</List>
 }
 
 export default HistoryList
diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx
@@ -1,25 +1,28 @@
 import { Link as ChakraLink, LinkProps } from '@chakra-ui/react'
 import NextLink from 'next/link'
 import React from 'react'
+import { forwardRef } from 'react'
 
 type IProps = LinkProps & {
   href: string
 }
 
-const Link = (props: IProps): JSX.Element => {
+const Link = forwardRef<any, IProps>((props, ref) => {
   const { children, href, isExternal, ...rest } = props
   if (isExternal) {
     return (
-      <ChakraLink href={href} isExternal {...rest}>
+      <ChakraLink ref={ref} href={href} isExternal {...rest}>
         {children}
       </ChakraLink>
     )
   }
   return (
     <NextLink passHref href={href}>
-      <ChakraLink {...rest}>{children}</ChakraLink>
+      <ChakraLink ref={ref} {...rest}>
+        {children}
+      </ChakraLink>
     </NextLink>
   )
-}
+})
 
 export default Link
diff --git a/packages/components/src/Navbar/Navbar.tsx b/packages/components/src/Navbar/Navbar.tsx
@@ -71,7 +71,7 @@ type MultiLang = {
 // Mobile navigation item
 const NavItemMobile: FC<HTMLAttributes<any> & { as?: As<any> | undefined }> = ({
   children,
-  as = 'a',
+  as = 'span',
   ...props
 }) => {
   return (

diff --git a/packages/components/src/Token/Card.tsx b/packages/components/src/Token/Card.tsx
@@ -109,17 +109,15 @@ const NFTCard: VFC<Props> = ({
       </Flex>
       <Stack spacing={3} p={6}>
         <Link href={href}>
-          <a>
-            <Heading
-              as="h4"
-              variant="heading2"
-              color="brand.black"
-              title={asset.name}
-              isTruncated
-            >
-              {asset.name}
-            </Heading>
-          </a>
+          <Heading
+            as="h4"
+            variant="heading2"
+            color="brand.black"
+            title={asset.name}
+            isTruncated
+          >
+            {asset.name}
+          </Heading>
         </Link>
         <Avatar
           address={creator.address}

diff --git a/packages/components/src/Token/Media.tsx b/packages/components/src/Token/Media.tsx
@@ -37,7 +37,8 @@ const TokenMedia: VFC<
     setImageError(false)
   }, [image])
 
-  if (animationUrl)
+  if (animationUrl) {
+    const { objectFit, src, ...videoProps } = props as ImageProps
     return (
       <video
         src={animationUrl}
@@ -46,9 +47,10 @@ const TokenMedia: VFC<
         muted
         loop
         controls={controls}
-        {...(props as Omit<VideoHTMLAttributes<any>, 'src'>)}
+        {...(videoProps as Omit<VideoHTMLAttributes<any>, 'src'>)}
       />
     )
+  }
   if (image) {
     const rest = props as Omit<ImageProps, 'src'>
     if (imageError)

diff --git a/packages/components/src/Wallet/Account/WalletBalanceList.tsx b/packages/components/src/Wallet/Account/WalletBalanceList.tsx
@@ -32,18 +32,11 @@ const WalletBalanceList: VFC<IProps> = ({ account, currencies }) => {
           key={x.id}
           withSeparator={i < currenciesArr.length - 1}
           image={<Image src={x.image} width={40} height={40} />}
-          label={
-            <Flex
-              w="full"
-              direction={{ base: 'column', md: 'row' }}
-              align={{ md: 'center' }}
-              justify={{ md: 'space-between' }}
-            >
-              <span>{x.name}</span>
-              <Text as="span" color="brand.black" fontWeight="medium">
-                <WalletBalance account={account} currency={x} />
-              </Text>
-            </Flex>
+          label={x.name}
+          action={
+            <Text as="span" color="brand.black" fontWeight="medium">
+              <WalletBalance account={account} currency={x} />
+            </Text>
           }
         />
       ))}

diff --git a/packages/components/src/Wallet/Image.tsx b/packages/components/src/Wallet/Image.tsx
@@ -26,7 +26,6 @@ const AccountImage: VFC<{
   const customTag = { Image: Image as any }
   return (
     <customTag.Image
-      ref={ref}
       src={image}
       alt={address}
       width={size || defaultSize}

diff --git a/packages/email-connector/package.json b/packages/email-connector/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nft/email-connector",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   "scripts": {

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nft/hooks",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   "scripts": {

diff --git a/packages/templates/package.json b/packages/templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nft/templates",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   "scripts": {