feat: nft redpacket confirm

DimensionDev · Jan 3, 2025 · fdc6050 · fdc6050
1 parent 904493d
commit fdc6050
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 189 deletions.
diff --git a/.ignore b/.ignore
@@ -1,3 +1,5 @@
 # Ignores for rg or ag
 patches/
 packages/mask/dashboard/assets/images/SetupTutorial.svg
+
+**/locale/*.{po,json}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/NFTCard.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/NFTCard.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { formatTokenId } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
-import { memo } from 'react'
+import { memo, type HTMLProps } from 'react'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -52,16 +52,15 @@ const useStyles = makeStyles()((theme) => {
     }
 })
 
-interface NFTCardProps {
+interface NFTCardProps extends HTMLProps<HTMLDivElement> {
     token: Web3Helper.NonFungibleAssetAll
-    onRemove: (token: Web3Helper.NonFungibleAssetAll) => void
+    onRemove?: (token: Web3Helper.NonFungibleAssetAll) => void
 }
 
-export const NFTCard = memo(function NFTCard(props: NFTCardProps) {
-    const { token, onRemove } = props
-    const { classes } = useStyles()
+export const NFTCard = memo(function NFTCard({ token, onRemove, className, ...rest }: NFTCardProps) {
+    const { classes, cx } = useStyles()
     return (
-        <div className={classes.card}>
+        <div className={cx(classes.card, className)} {...rest}>
             <AssetPreviewer
                 url={token.metadata?.mediaURL || token.metadata?.imageURL}
                 classes={{
@@ -72,7 +71,9 @@ export const NFTCard = memo(function NFTCard(props: NFTCardProps) {
             <Typography className={classes.cardName} color="textSecondary">
                 {formatTokenId(token.tokenId, 2)}
             </Typography>
-            <Icons.Clear size={20} className={classes.removeButton} onClick={() => onRemove(token)} />
+            {onRemove ?
+                <Icons.Clear size={20} className={classes.removeButton} />
+            :   null}
         </div>
     )
 })
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/contexts/RedPacketContext.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/contexts/RedPacketContext.tsx
@@ -169,7 +169,7 @@ export const RedPacketProvider = memo(function RedPacketProvider({ children }: P
     const [selectedNfts, setSelectedNfts] = useState<Web3Helper.NonFungibleAssetAll[]>([])
     const [myNfts, setMyNfts] = useState<OrderedERC721Token[]>([])
     const [selectOption, setSelectOption] = useState<NFTSelectOption>(NFTSelectOption.Partial)
-    const [collection, setCollection] = useState<NonFungibleCollection<ChainId, SchemaType>>()
+    const [collection, setCollection] = useState<Web3Helper.NonFungibleCollectionAll>()
 
     const contextValue = useMemo(() => {
         return {

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx
@@ -57,11 +57,11 @@ const useStyles = makeStyles()((theme) => {
         },
 
         assets: {
-            display: 'flex',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(86px, 1fr))',
             gap: 10,
         },
         card: {
-            width: 86,
             position: 'relative',
             borderRadius: 8,
             overflow: 'hidden',