From 5b82e7ce6defb057ce0ef4cc01b77872d90502d5 Mon Sep 17 00:00:00 2001
From: Septs <github@septs.pw>
Date: Thu, 31 Mar 2022 19:24:40 +0800
Subject: [PATCH] chore: improve purchase dialog

---
 .../ArtBlocks/SNSAdaptor/PurchaseDialog.tsx   | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx
index b01ad22f3610..eeec4036bee1 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useMemo, useState, useEffect } from 'react'
+import { useCallback, useMemo, useState, useEffect } from 'react'
 import { useI18N } from '../../../utils'
 import { makeStyles } from '@masknet/theme'
 import {
@@ -28,7 +28,6 @@ import { leftShift } from '@masknet/web3-shared-base'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
 import { usePurchaseCallback } from '../hooks/usePurchaseCallback'
 import { WalletMessages } from '../../Wallet/messages'
-
 import type { Project } from '../types'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
@@ -68,20 +67,17 @@ export function PurchaseDialog(props: ActionBarProps) {
     })
 
     const [ToS_Checked, setToS_Checked] = useState(false)
-    const [purchaseState, purchaseCallback, resetCallback] = usePurchaseCallback(
+    const [purchaseState, onCheckout, resetCallback] = usePurchaseCallback(
         project.projectId,
         project.pricePerTokenInWei,
         token.value?.type,
     )
     const { GEN_ART_721_MINTER: spender } = useArtBlocksConstants()
 
-    const onCheckout = useCallback(() => {
-        purchaseCallback()
-    }, [usePurchaseCallback])
-
-    const price = useMemo(() => {
-        return leftShift(project.pricePerTokenInWei, token.value?.decimals)
-    }, [project.pricePerTokenInWei, token.value?.decimals])
+    const price = useMemo(
+        () => leftShift(project.pricePerTokenInWei, token.value?.decimals),
+        [project.pricePerTokenInWei, token.value?.decimals],
+    )
 
     const postLink = usePostLink()
     const shareText = [
@@ -104,11 +100,9 @@ export function PurchaseDialog(props: ActionBarProps) {
         useCallback(
             (ev) => {
                 if (!ev.open) {
-                    if (
-                        purchaseState.type === TransactionStateType.HASH ||
-                        purchaseState.type === TransactionStateType.CONFIRMED
-                    )
-                        onClose()
+                    const allowedTypes = [TransactionStateType.HASH, TransactionStateType.CONFIRMED]
+                    if (!allowedTypes.includes(purchaseState.type)) return
+                    onClose()
                 }
                 resetCallback()
             },
@@ -150,16 +144,14 @@ export function PurchaseDialog(props: ActionBarProps) {
                             amount={price.toString()}
                             balance={balance.value ?? '0'}
                             token={token.value as FungibleTokenDetailed}
-                            onAmountChange={() => {
-                                return
-                            }}
+                            onAmountChange={() => {}}
                         />
                         <FormControlLabel
                             control={
                                 <Checkbox
                                     color="primary"
                                     checked={ToS_Checked}
-                                    onChange={(ev: ChangeEvent<HTMLInputElement>) => setToS_Checked(ev.target.checked)}
+                                    onChange={(event) => setToS_Checked(event.target.checked)}
                                 />
                             }
                             label={
@@ -189,7 +181,7 @@ export function PurchaseDialog(props: ActionBarProps) {
                                     disabled={!!validationMessage}
                                     color="primary"
                                     variant="contained"
-                                    onClick={purchaseCallback}
+                                    onClick={onCheckout}
                                     fullWidth>
                                     {validationMessage || isTransaction
                                         ? t('plugin_artblocks_purchase')