Skip to content

Commit

Permalink
refactor: collectible
Browse files Browse the repository at this point in the history
  • Loading branch information
@guanbinrui
guanbinrui committed May 20, 2022
1 parent a61aa57 commit 1cc6116
Show file tree
Hide file tree
Showing 30 changed files with 810 additions and 976 deletions.
8 changes: 4 additions & 4 deletions packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ import {
useChainId,
useFungibleTokenBalance,
useWallet,
useWeb3State,
useWeb3Connection,
useWeb3Hub,
} from '@masknet/plugin-infra/web3'
import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'

Expand Down Expand Up @@ -160,7 +160,7 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
const web3State = useWeb3State(NetworkPluginID.PLUGIN_EVM)
const hub = useWeb3Hub(NetworkPluginID.PLUGIN_EVM)
const [minGasLimitContext, setMinGasLimitContext] = useState(0)
const navigate = useNavigate()

Expand Down Expand Up @@ -245,14 +245,14 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,

// #region Set default gas price
useAsync(async () => {
const gasOptions = await web3State.GasOptions?.getGasOptions?.(chainId)
const gasOptions = await hub?.getGasOptions?.(chainId)

const gasPrice = methods.getValues('gasPrice')
if (gasOptions && !gasPrice) {
const gasPrice = new BigNumber(gasOptions[GasOptionType.FAST].suggestedMaxFeePerGas)
methods.setValue('gasPrice', formatWeiToGwei(gasPrice).toString())
}
}, [methods.setValue, methods.getValues, chainId, web3State])
}, [methods.setValue, methods.getValues, chainId, hub])
// #endregion

// #region Get min gas limit with amount and recipient address
Expand Down
2 changes: 1 addition & 1 deletion packages/mask/src/plugin-infra/register.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import '../plugins/RedPacket'
import '../plugins/Gitcoin'
import '../plugins/Snapshot'
import '../plugins/Savings'
// import '../plugins/Collectible'
import '../plugins/Collectible'
// import '../plugins/External'
import '../plugins/Transak'
import '../plugins/Polls'
Expand Down
22 changes: 12 additions & 10 deletions packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { MakeOfferDialog } from './MakeOfferDialog'
import { PostListingDialog } from './PostListingDialog'
import { CheckoutDialog } from './CheckoutDialog'
import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
import { useChainId } from '@masknet/plugin-infra/web3'
import { NetworkPluginID } from '@masknet/web3-shared-base'
import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'

const useStyles = makeStyles()((theme) => {
return {
Expand All @@ -32,8 +32,9 @@ export interface ActionBarProps {}
export function ActionBar(props: ActionBarProps) {
const { t } = useI18N()
const { classes } = useStyles()
const { asset, assetOrder } = CollectibleState.useContainer()
const { asset } = CollectibleState.useContainer()
const assets = asset.value
const account = useAccount(NetworkPluginID.PLUGIN_EVM)
const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)

const {
Expand All @@ -49,10 +50,11 @@ export function ActionBar(props: ActionBarProps) {
} = useControlledDialog()

if (!asset.value) return null
const isOwner = isSameAddress(asset.value.owner?.address, account)
return (
<Box className={classes.root} sx={{ padding: 1.5 }} display="flex" justifyContent="center">
<ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId}>
{!asset.value.isOwner && asset.value.is_auction && assetOrder.value ? (
{!isOwner && asset.value.auction ? (
<ActionButton
className={classes.button}
color="primary"
Expand All @@ -61,7 +63,7 @@ export function ActionBar(props: ActionBarProps) {
{t('plugin_collectible_buy_now')}
</ActionButton>
) : null}
{!asset.value.isOwner && asset.value.is_auction ? (
{!isOwner && asset.value.auction ? (
<ActionButton
className={classes.button}
color="primary"
Expand All @@ -72,7 +74,7 @@ export function ActionBar(props: ActionBarProps) {
</ActionButton>
) : null}

{!asset.value.isOwner && !asset.value.is_auction ? (
{!isOwner && !asset.value.auction ? (
<ActionButton
className={classes.button}
color="primary"
Expand All @@ -81,7 +83,7 @@ export function ActionBar(props: ActionBarProps) {
{t('plugin_collectible_make_offer')}
</ActionButton>
) : null}
{assets?.isOwner ? (
{isOwner ? (
<ActionButton
className={classes.button}
color="primary"
Expand All @@ -91,13 +93,13 @@ export function ActionBar(props: ActionBarProps) {
</ActionButton>
) : null}
<CheckoutDialog
asset={asset}
asset={asset.value}
order={assetOrder}
open={openCheckoutDialog}
onClose={onCloseCheckoutDialog}
/>
<MakeOfferDialog asset={asset} open={openOfferDialog} onClose={onCloseOfferDialog} />
<PostListingDialog asset={asset} open={openListingDialog} onClose={onCloseListingDialog} />
<MakeOfferDialog asset={asset.value} open={openOfferDialog} onClose={onCloseOfferDialog} />
<PostListingDialog asset={asset.value} open={openListingDialog} onClose={onCloseListingDialog} />
</ChainBoundary>
</Box>
)
Expand Down
8 changes: 4 additions & 4 deletions packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,16 @@ export function ArticleTab(props: ArticleTabProps) {

return useMemo(() => {
if (!asset.value) return null
// TODO: Migrate `hasNativeAPI` to `@masknet/shared` to use it in <NFTCardStyledAssetPlayer /> directly.
const resourceUrl = hasNativeAPI
? asset.value.image_url || asset.value.animation_url
: asset.value.animation_url || asset.value.image_url
? asset.value.metadata?.imageURL || asset.value.metadata?.mediaURL
: asset.value.metadata?.mediaURL || asset.value.metadata?.imageURL
return (
<CollectibleTab>
<div className={classes.body}>
{/* Todo: Migrate `hasNativeAPI` to `@masknet/shared` to use it in <NFTCardStyledAssetPlayer /> directly. */}
<NFTCardStyledAssetPlayer url={resourceUrl} classes={classes} isNative={hasNativeAPI} />
</div>
</CollectibleTab>
)
}, [asset.value?.animation_url, asset.value?.image_url, classes])
}, [asset.value?.metadata?.mediaURL, asset.value?.metadata?.imageURL, classes])
}
41 changes: 19 additions & 22 deletions packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '@mui/material'
import { makeStyles } from '@masknet/theme'
import { Trans } from 'react-i18next'
import { useFungibleTokenWatched } from '@masknet/web3-shared-evm'
import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
import { UnreviewedWarning } from './UnreviewedWarning'
import { useI18N } from '../../../utils'
import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
Expand All @@ -22,11 +22,9 @@ import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundar
import { PluginCollectibleRPC } from '../messages'
import { PluginTraderMessages } from '../../Trader/messages'
import { CheckoutOrder } from './CheckoutOrder'
import type { useAsset } from '../../EVM/hooks/useAsset'
import type { useAssetOrder } from '../hooks/useAssetOrder'
import type { Coin } from '../../Trader/types'
import { isGreaterThan, NetworkPluginID } from '@masknet/web3-shared-base'
import { useAccount } from '@masknet/plugin-infra/web3'
import { CurrencyType, isGreaterThan, NetworkPluginID, NonFungibleAsset, NonFungibleTokenOrder } from '@masknet/web3-shared-base'
import { useAccount, useFungibleTokenWatched } from '@masknet/plugin-infra/web3'

const useStyles = makeStyles()((theme) => {
return {
Expand Down Expand Up @@ -57,37 +55,36 @@ const useStyles = makeStyles()((theme) => {
})

export interface CheckoutDialogProps {
asset?: ReturnType<typeof useAsset>
order: ReturnType<typeof useAssetOrder>
asset?: NonFungibleAsset<ChainId, SchemaType>
order?: NonFungibleTokenOrder<ChainId, SchemaType>
open: boolean
onClose: () => void
}

export function CheckoutDialog(props: CheckoutDialogProps) {
const { asset, open, onClose, order } = props
const isVerified = asset?.value?.is_verified ?? false
const { asset, order, open, onClose } = props
const isVerified = asset?.collection?.verified ?? false
const { t } = useI18N()
const { classes } = useStyles()
const account = useAccount(NetworkPluginID.PLUGIN_EVM)

const [unreviewedChecked, setUnreviewedChecked] = useState(false)
const [ToS_Checked, setToS_Checked] = useState(false)
const [insufficientBalance, setInsufficientBalance] = useState(false)
const { token, balance } = useFungibleTokenWatched({
type: EthereumTokenType.Native,
address: order.value?.paymentTokenContract?.address ?? '',
})
const { token, balance } = useFungibleTokenWatched(
NetworkPluginID.PLUGIN_EVM,
order?.paymentToken?.address ?? '',
)
const onCheckout = useCallback(async () => {
if (!asset?.value) return
if (!asset.value.token_id || !asset.value.token_address) return
if (!order.value) return
if (!asset?.tokenId || !asset.address) return
if (!order) return

await PluginCollectibleRPC.fulfillOrder({
order: order.value,
order,
accountAddress: account,
recipientAddress: account,
})
}, [asset?.value, account, order?.value])
}, [account, asset, order])

const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)

Expand All @@ -108,14 +105,14 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
}, [token.value, openSwapDialog])

const validationMessage = useMemo(() => {
if (isGreaterThan(order?.value?.basePrice ?? 0, balance.value ?? 0)) {
if (isGreaterThan(order?.price?.[CurrencyType.USD] ?? 0, balance.value ?? 0)) {
setInsufficientBalance(true)
return t('plugin_collectible_insufficient_balance')
}
if (!isVerified && !unreviewedChecked) return t('plugin_collectible_ensure_unreviewed_item')
if (!isVerified && !ToS_Checked) return t('plugin_collectible_check_tos_document')
return ''
}, [isVerified, unreviewedChecked, ToS_Checked, order.value])
}, [isVerified, unreviewedChecked, ToS_Checked, order])

return (
<InjectedDialog title={t('plugin_collectible_checkout')} open={open} onClose={onClose}>
Expand Down Expand Up @@ -197,14 +194,14 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
completeOnClick={onClose}
failedOnClick="use executor"
/>
{asset?.value?.isOrderWeth || insufficientBalance ? (
{asset?.isOrderWeth || insufficientBalance ? (
<ActionButton
className={classes.button}
variant="contained"
size="large"
onClick={onConvertClick}>
{insufficientBalance
? t('plugin_collectible_get_more_token', { token: token.value?.symbol })
? t('plugin_collectible_get_more_token', { token: token.symbol })
: t('plugin_collectible_convert_eth')}
</ActionButton>
) : null}
Expand Down
27 changes: 14 additions & 13 deletions packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutOrder.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Table, TableHead, TableBody, TableRow, TableCell, Typography, Link } from '@mui/material'
import { makeStyles } from '@masknet/theme'
import { Image } from '../../../components/shared/Image'
import { formatBalance } from '@masknet/web3-shared-base'
import { ERC20TokenDetailed, useChainId } from '@masknet/web3-shared-evm'
import { CurrencyType, formatBalance, FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
import { resolveAssetLinkOnCurrentProvider } from '../pipes'
import { useI18N } from '../../../utils'
import type { Order } from 'opensea-js/lib/types'
import { CollectibleState } from '../hooks/useCollectibleState'
import { useChainId } from '@masknet/plugin-infra/web3'
import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'

const useStyles = makeStyles()((theme) => ({
itemInfo: {
Expand All @@ -20,17 +21,17 @@ const useStyles = makeStyles()((theme) => ({

export function CheckoutOrder() {
const { t } = useI18N()
const { token, asset, assetOrder, provider } = CollectibleState.useContainer()
const order = assetOrder?.value ?? asset?.value?.desktopOrder
const { token, asset, provider } = CollectibleState.useContainer()
const order = asset?.value?.auction ?? asset?.value?.desktopOrder
const { classes } = useStyles()
const chainId = useChainId()
const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
if (!asset?.value || !token) return null
if (!order) return null

const price = (order as Order).currentPrice ?? asset.value.current_price
const price = (order as Order).currentPrice ?? asset.value.price?.[CurrencyType.USD]
const getPrice = () => {
if (!price) return 'error'
const decimal = asset.value?.response_.collection.payment_tokens.find((item: ERC20TokenDetailed) => {
const decimal = asset.value?.pay.find((item: FungibleToken<ChainId, SchemaType>) => {
return item.symbol === asset.value?.current_symbol
})?.decimals
if (!decimal) return 'error'
Expand All @@ -49,9 +50,9 @@ export function CheckoutOrder() {
<TableRow>
<TableCell>
<div className={classes.itemInfo}>
<Image height={80} width={80} src={asset.value?.image_url ?? ''} />
<Image height={80} width={80} src={asset.value?.metadata?.imageURL ?? ''} />
<div className={classes.texts}>
<Typography>{asset.value.collection_name ?? ''}</Typography>
<Typography>{asset.value.collection?.name ?? ''}</Typography>
{token.contractAddress && token.tokenId ? (
<Link
color="primary"
Expand All @@ -63,17 +64,17 @@ export function CheckoutOrder() {
token.tokenId,
provider,
)}>
<Typography>{asset.value.name ?? ''}</Typography>
<Typography>{asset.value.metadata?.name ?? ''}</Typography>
</Link>
) : (
<Typography>{asset.value.name ?? ''}</Typography>
<Typography>{asset.value.metadata?.name ?? ''}</Typography>
)}
</div>
</div>
</TableCell>
<TableCell align="right">
<Typography>
{getPrice()} {asset.value.current_symbol}
{getPrice()} {asset.value.metadata?.symbol}
</Typography>
</TableCell>
</TableRow>
Expand All @@ -83,7 +84,7 @@ export function CheckoutOrder() {
</TableCell>
<TableCell align="right">
<Typography>
{getPrice()} {asset.value.current_symbol}
{getPrice()} {asset.value.metadata?.symbol}
</Typography>
</TableCell>
</TableRow>
Expand Down
Loading

0 comments on commit 1cc6116

Please sign in to comment.