diff --git a/packages/icons/general/NFTAvatar.tsx b/packages/icons/general/NFTAvatar.tsx deleted file mode 100644 index cf796abfe173..000000000000 --- a/packages/icons/general/NFTAvatar.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { createIcon } from '../utils' - -export const NFTAvatarIcon = createIcon( - 'NFTAvatar', - - - - - - - - - - - - - - - - - - - - , - '0 0 55 28', -) diff --git a/packages/icons/general/NFTAvatarAmount.tsx b/packages/icons/general/NFTAvatarAmount.tsx deleted file mode 100644 index f68577be7b88..000000000000 --- a/packages/icons/general/NFTAvatarAmount.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { createIcon } from '../utils' - -export const NFTAvatarAmountIcon = createIcon( - 'NFTAvatarAmountIcon', - - - - - - - - - - - - - - - - - - - - - - - , - '0 0 43 16', -) diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts index 3cc3e7df9041..9b8affb4f06c 100644 --- a/packages/icons/general/index.ts +++ b/packages/icons/general/index.ts @@ -53,13 +53,12 @@ export * from './Loading' export * from './Minds' export * from './User' export * from './PublicKey' -export * from './NFTAvatarAmount' -export * from './NFTAvatar' export * from './Message' export * from './FileMessage' export * from './ITO' export * from './NFTRedPacket' export * from './Poll' +export * from './union' export * from './Tip' export * from './Delete' export * from './GrayMasks' diff --git a/packages/icons/general/union.tsx b/packages/icons/general/union.tsx new file mode 100644 index 000000000000..33f55469da8a --- /dev/null +++ b/packages/icons/general/union.tsx @@ -0,0 +1,20 @@ +import { createIcon } from '../utils' + +export const UnionIcon = createIcon( + 'UnionIcon', + + + + , + '0 0 14 14', +) diff --git a/packages/maskbook/src/components/InjectedComponents/NFT/NFTBadge.tsx b/packages/maskbook/src/components/InjectedComponents/NFT/NFTBadge.tsx index 4dca9b279d63..76626ab000a8 100644 --- a/packages/maskbook/src/components/InjectedComponents/NFT/NFTBadge.tsx +++ b/packages/maskbook/src/components/InjectedComponents/NFT/NFTBadge.tsx @@ -1,8 +1,10 @@ -import { NFTAvatarAmountIcon } from '@masknet/icons' +import { UnionIcon } from '@masknet/icons' import { useStylesExtends } from '@masknet/shared' import { makeStyles } from '@masknet/theme' import { resolveOpenSeaLink } from '@masknet/web3-shared' import { CircularProgress, Link, Typography } from '@material-ui/core' +import BigNumber from 'bignumber.js' +import classNames from 'classnames' import { useNFT } from './hooks' import type { AvatarMetaDB } from './types' @@ -11,34 +13,29 @@ const useStyles = makeStyles()({ display: 'flex', justifyContent: 'center', alignItems: 'center', - position: 'absolute', - left: 0, - top: 46, - right: 0, + paddingTop: 8, + paddingBottom: 8, }, wrapper: { - background: - 'linear-gradient(106.15deg, #FF0000 5.97%, #FF8A00 21.54%, #FFC700 42.35%, #52FF00 56.58%, #00FFFF 73.01%, #0038FF 87.8%, #AD00FF 101.49%, #FF0000 110.25%)', - borderRadius: 3, - minWidth: 43, - width: 'auto', display: 'flex', justifyContent: 'center', + flexDirection: 'column', + alignItems: 'center', }, icon: { - width: 28, - height: 11, + width: 12, + height: 12, + transform: 'translate(0px, 2px)', }, text: { + paddingLeft: 4, + paddingRight: 4, fontSize: 10, - transform: 'scale(0.8)', + whiteSpace: 'nowrap', margin: 0, color: 'white', - whiteSpace: 'nowrap', textShadow: '1px 1px black, 1px 0px black, 0px 1px black, -1px 0px black, 0px -1px black, -1px -1px black, 1px -1px black, -1px 1px black', - lineHeight: 1, - textDecoration: 'none', }, link: { display: 'flex', @@ -46,19 +43,51 @@ const useStyles = makeStyles()({ alignItems: 'center', AlignJustify: 'center', }, + box: { + background: + 'linear-gradient(106.15deg, #FF0000 5.97%, #FF8A00 21.54%, #FFC700 42.35%, #52FF00 56.58%, #00FFFF 73.01%, #0038FF 87.8%, #AD00FF 101.49%, #FF0000 110.25%)', + borderRadius: 4, + }, + loading: { + width: 64, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + }, + nft: { + marginTop: 20, + }, }) interface NFTBadgeProps extends withClasses<'root' | 'text' | 'icon'> { avatar: AvatarMetaDB size?: number } + +function formatPrice(amount: string) { + const _amount = new BigNumber(amount ?? '0') + if (_amount.isZero()) return '0' + if (_amount.isLessThan(1)) return _amount.toFixed(2) + if (_amount.isLessThan(1e3)) return _amount.toFixed(1) + if (_amount.isLessThan(1e6)) return `${_amount.div(1e6).toFixed(1)}K` + return `${_amount.div(1e6).toFixed(1)}M` +} + +function formatText(symbol: string, length: number) { + return symbol.length > length ? `${symbol.slice(0, length)}...` : symbol +} + export function NFTBadge(props: NFTBadgeProps) { const classes = useStylesExtends(useStyles(), props) - const { avatar, size = 10 } = props + const { avatar, size = 18 } = props - const { value = { amount: '0', symbol: 'ETH' }, loading } = useNFT(avatar.userId, avatar.address, avatar.tokenId) - - const { amount, symbol } = value + const { value = { amount: '0', symbol: 'ETH', name: '' }, loading } = useNFT( + avatar.userId, + avatar.address, + avatar.tokenId, + ) + const { amount, symbol, name } = value return (
-
- - {loading ? ( + {loading ? ( +
- ) : amount === '0' ? ( - 'no offer' - ) : ( - `${amount} ${symbol}` - )} - +
+ ) : ( + + )}
) } + +interface ShowPriceProps { + price: string + symbol: string + name: string + tokenId: string +} + +function ShowPrice({ name, symbol, tokenId, price }: ShowPriceProps) { + const { classes } = useStyles() + const text = (str: string, showIcon = false) => ( +
+ + {str} + {showIcon ? : null} + +
+ ) + + return ( + <> + {symbol && name && price !== '0' ? ( + <> + {text(`${name}`)} {text(`${price} ${symbol}`, true)} + + ) : !symbol && !name && price !== '0' ? ( + <> + {text('NFT', true)} {text(`${price} ${symbol}`)} + + ) : symbol && name && price === '0' ? ( + <> + {text(`${name}`)} {text('NFT', true)} + + ) : symbol && !name && price !== '0' ? ( + <> + {text('NFT', true)} {text(`${price} ${symbol}`)} + + ) : ( +
{text('NFT', true)}
+ )} + + ) +} diff --git a/packages/maskbook/src/components/InjectedComponents/NFT/gun/index.ts b/packages/maskbook/src/components/InjectedComponents/NFT/gun/index.ts index 55a079408973..b0f391c51ca0 100644 --- a/packages/maskbook/src/components/InjectedComponents/NFT/gun/index.ts +++ b/packages/maskbook/src/components/InjectedComponents/NFT/gun/index.ts @@ -41,7 +41,7 @@ export async function getNFTAvatars() { const NFTAvatarKeys = Object.keys(NFTAvatarNodes).filter((x) => x !== '_') const resultPromise = NFTAvatarKeys.map((key) => getNFTAvatar(key)) const result = (await Promise.all(resultPromise)).filter((x) => x) as AvatarMetaDB[] - console.log(result) + return result } diff --git a/packages/maskbook/src/components/InjectedComponents/NFT/utils/index.ts b/packages/maskbook/src/components/InjectedComponents/NFT/utils/index.ts index 82d089aed156..8d704d6efcd1 100644 --- a/packages/maskbook/src/components/InjectedComponents/NFT/utils/index.ts +++ b/packages/maskbook/src/components/InjectedComponents/NFT/utils/index.ts @@ -25,7 +25,7 @@ export async function getNFT(address: string, tokenId: string) { amount: order ? new BigNumber(getOrderUnitPrice(order) ?? 0).toFixed() : getLastSalePrice(asset.lastSale) ?? '0', - name: asset.assetContract.name, + name: asset.name, symbol: order?.paymentTokenContract?.symbol ?? asset.lastSale?.paymentToken?.symbol ?? 'ETH', image: asset.imageUrl ?? asset.imagePreviewUrl ?? '', } diff --git a/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx b/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx index a6ef664b4fc1..6e907fd190e1 100644 --- a/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx +++ b/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/Avatar.tsx @@ -25,13 +25,25 @@ function _(main: () => LiveSelector, signal: AbortSignal) { if (!avatarIdNode) return const avatarId = getAvatarId(avatarIdNode.getAttribute('src') ?? '') if (avatarId !== avatar.avatarId) return - const nftDom = ele.firstChild?.firstChild?.firstChild?.nextSibling?.firstChild?.firstChild + const nftDom = ele.firstChild?.firstChild?.firstChild?.nextSibling?.firstChild ?.firstChild as HTMLElement if (!nftDom) return const proxy = DOMProxy({ afterShadowRootInit: { mode: Flags.using_ShadowDOM_attach_mode } }) proxy.realCurrent = nftDom const root = createReactRootShadowed(proxy.afterShadow, { signal }) - root.render() + root.render( +
+ +
, + ) remover = root.destory } diff --git a/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx b/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx index 186c75e33123..3e2f7e65f9f8 100644 --- a/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx +++ b/packages/maskbook/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx @@ -21,26 +21,20 @@ export function injectNFTAvatarInTwitter(signal: AbortSignal) { const useStyles = makeStyles()((theme) => ({ root: { position: 'absolute', - top: '10px !important', + bottom: '-10px !important', left: 0, - width: 134, textAlign: 'center', color: 'white', + transform: 'scale(1) !important', + minWidth: 134, }, text: { fontSize: '20px !important', fontWeight: 700, - minWidth: 72, }, icon: { - width: '43px !important', - height: '16px !important', - }, - - recover: { - position: 'absolute', - right: 160, - top: 0, + width: '19px !important', + height: '19px !important', }, }))