ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: erc1155 specific functionality to details page (#4867)

Browse Source 
* adding erc1155 specific functionality to details page

* style update
This commit is contained in:
Jack Short 2022-10-24 11:34:39 -04:00 committed by GitHub
parent 0987a311cf
commit a920a93b3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 68 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/nft/components/details/AssetPriceDetails.tsx
View File

@ -1,7 +1,7 @@
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { CancelListingIcon } from 'nft/components/icons' import { CancelListingIcon, MinusIcon, PlusIcon } from 'nft/components/icons'
import { useBag } from 'nft/hooks' import { useBag } from 'nft/hooks'
import { CollectionInfoForAsset, GenieAsset } from 'nft/types' import { CollectionInfoForAsset, GenieAsset, TokenType } from 'nft/types'
import { ethNumberStandardFormatter, formatEthPrice, getMarketplaceIcon, timeLeft } from 'nft/utils' import { ethNumberStandardFormatter, formatEthPrice, getMarketplaceIcon, timeLeft } from 'nft/utils'
import { useMemo } from 'react' import { useMemo } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
@ -58,6 +58,39 @@ const BuyNowButton = styled.div<{ assetInBag: boolean; margin: boolean; useAccen
cursor: pointer; cursor: pointer;
` `
const Erc1155BuyNowButton = styled.div`
display: flex;
flex-direction: row;
width: 100%;
background-color: ${({ theme }) => theme.backgroundSurface};
border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
border-radius: 12px;
margin-top: 12px;
text-align: center;
cursor: pointer;
justify-content: space-between;
overflow-x: hidden;
`
const Erc1155BuyNowText = styled.div`
display: flex;
width: 100%;
padding: 10px 12px;
justify-content: center;
cursor: default;
`
const Erc1155ChangeButton = styled(Erc1155BuyNowText)<{ remove: boolean }>`
background-color: ${({ theme, remove }) => (remove ? theme.accentFailureSoft : theme.accentActionSoft)};
color: ${({ theme, remove }) => (remove ? theme.accentFailure : theme.accentAction)};
cursor: pointer;
:hover {
background-color: ${({ theme, remove }) => (remove ? theme.accentFailure : theme.accentAction)};
color: ${({ theme }) => theme.textPrimary};
}
`
const NotForSaleContainer = styled.div` const NotForSaleContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -156,10 +189,18 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
const itemsInBag = useBag((s) => s.itemsInBag) const itemsInBag = useBag((s) => s.itemsInBag)
const addAssetToBag = useBag((s) => s.addAssetToBag) const addAssetToBag = useBag((s) => s.addAssetToBag)
const removeAssetFromBag = useBag((s) => s.removeAssetFromBag) const removeAssetFromBag = useBag((s) => s.removeAssetFromBag)
const isErc1555 = asset.tokenType === TokenType.ERC1155
const assetInBag = useMemo(() => { const { quantity, assetInBag } = useMemo(() => {
return itemsInBag.some((item) => item.asset.tokenId === asset.tokenId && item.asset.address === asset.address) return {
}, [itemsInBag, asset]) quantity: itemsInBag.filter(
(x) => x.asset.tokenType === 'ERC1155' && x.asset.tokenId === asset.tokenId && x.asset.address === asset.address
).length,
assetInBag: itemsInBag.some(
(item) => asset.tokenId === item.asset.tokenId && asset.address === item.asset.address
),
}
}, [asset, itemsInBag])
const isOwner = const isOwner =
asset.owner && typeof asset.owner === 'string' ? account?.toLowerCase() === asset.owner.toLowerCase() : false asset.owner && typeof asset.owner === 'string' ? account?.toLowerCase() === asset.owner.toLowerCase() : false
@ -189,14 +230,28 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
{expirationDate && ( {expirationDate && (
<ThemedText.BodySecondary fontSize={'14px'}>Sale ends: {timeLeft(expirationDate)}</ThemedText.BodySecondary> <ThemedText.BodySecondary fontSize={'14px'}>Sale ends: {timeLeft(expirationDate)}</ThemedText.BodySecondary>
)} )}
<BuyNowButton {!isErc1555 || !assetInBag ? (
assetInBag={assetInBag} <BuyNowButton
margin={true} assetInBag={assetInBag}
useAccentColor={true} margin={true}
onClick={() => (assetInBag ? removeAssetFromBag(asset) : addAssetToBag(asset))} useAccentColor={true}
> onClick={() => (assetInBag ? removeAssetFromBag(asset) : addAssetToBag(asset))}
<ThemedText.SubHeader lineHeight={'20px'}>{assetInBag ? 'Remove' : 'Buy Now'}</ThemedText.SubHeader> >
</BuyNowButton> <ThemedText.SubHeader lineHeight={'20px'}>{assetInBag ? 'Remove' : 'Buy Now'}</ThemedText.SubHeader>
</BuyNowButton>
) : (
<Erc1155BuyNowButton>
<Erc1155ChangeButton remove={true} onClick={() => removeAssetFromBag(asset)}>
<MinusIcon width="20px" height="20px" />
</Erc1155ChangeButton>
<Erc1155BuyNowText>
<ThemedText.SubHeader lineHeight={'20px'}>{quantity}</ThemedText.SubHeader>
</Erc1155BuyNowText>
<Erc1155ChangeButton remove={false} onClick={() => addAssetToBag(asset)}>
<PlusIcon width="20px" height="20px" />
</Erc1155ChangeButton>
</Erc1155BuyNowButton>
)}
</BestPriceContainer> </BestPriceContainer>
) : ( ) : (
<NotForSale collection={collection} /> <NotForSale collection={collection} />