feat: porting over transaction screens (#4720)

* feat: porting over transaction screens

* cannot trigger unless flag enabled

* inital comment addressings

* adjusting zIndex

* changing zIndex when modal is open

src/components/TopLevelModals/index.tsx

@@ -2,6 +2,7 @@ import { useWeb3React } from '@web3-react/core'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
 import TokensBanner from 'components/Tokens/TokensBanner'
+import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
 import useAccountRiskCheck from 'hooks/useAccountRiskCheck'
 import { lazy } from 'react'
@@ -11,6 +12,7 @@ import { ApplicationModal } from 'state/application/reducer'
 
 const Cart = lazy(() => import('nft/components/sell/modal/ListingTag'))
 const Bag = lazy(() => import('nft/components/bag/Bag'))
+const TransactionCompleteModal = lazy(() => import('nft/components/collection/TransactionCompleteModal'))
 
 export default function TopLevelModals() {
   const addressClaimOpen = useModalIsOpen(ApplicationModal.ADDRESS_CLAIM)
@@ -30,6 +32,7 @@ export default function TopLevelModals() {
         (location.pathname.includes('/pool') || location.pathname.includes('/swap')) && <TokensBanner />}
       <Cart />
       <Bag />
+      {useNftFlag() === NftVariant.Enabled && <TransactionCompleteModal />}
     </>
   )
 }

src/nft/components/bag/Bag.css.ts

@@ -13,7 +13,6 @@ export const bagContainer = style([
     color: 'textPrimary',
     paddingTop: '20',
     paddingBottom: '24',
-    zIndex: { sm: 'offcanvas', md: '3' },
   }),
   {
     '@media': {

src/nft/components/bag/Bag.tsx

@@ -314,7 +314,7 @@ const Bag = () => {
     <>
       {bagExpanded && shouldShowBag ? (
         <Portal>
-          <Column className={styles.bagContainer}>
+          <Column zIndex={isMobile || isOpen ? 'modal' : '3'} className={styles.bagContainer}>
             <BagHeader numberOfAssets={itemsInBag.length} toggleBag={toggleBag} resetFlow={reset} />
             {itemsInBag.length === 0 && bagStatus === BagStatus.ADDING_TO_BAG && <EmptyState />}
             <ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />

src/nft/components/modals/Overlay.css.ts

@@ -11,7 +11,7 @@ export const overlay = style([
     position: 'fixed',
     display: 'block',
     background: 'black',
-    zIndex: '2',
+    zIndex: 'modalBackdrop',
   }),
   {
     opacity: 0.72,

src/nft/hooks/useSendTransaction.ts

@@ -12,14 +12,6 @@ import CryptoPunksMarket from '../abis/CryptoPunksMarket.json'
 import { GenieAsset, RouteResponse, RoutingItem, TxResponse, TxStateType, UpdatedGenieAsset } from '../types'
 import { combineBuyItemsWithTxRoute } from '../utils/txRoute/combineItemsWithTxRoute'
 
-// Shortens a given txHash. With standard charsToShorten var of 4, a hash will become 0x1234...1234
-export const shortenTxHash = (txHash: string, charsToShorten = 4, addCharsToBack = 0): string => {
-  return `${txHash.substring(0, charsToShorten + 2)}...${txHash.substring(
-    txHash.length - charsToShorten,
-    txHash.length - (charsToShorten + addCharsToBack)
-  )}`
-}
-
 interface TxState {
   state: TxStateType
   setState: (state: TxStateType) => void

src/nft/hooks/useTransactionResponse.ts

+import { TxResponse } from 'nft/types'
 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
-import { TxResponse } from '../types'
-
 type TransactionResponseValue = TxResponse | undefined
 
 type TransactionResponseState = {

src/nft/utils/index.ts

@@ -2,8 +2,11 @@ export * from './buildActivityAsset'
 export * from './buildSellObject'
 export * from './calcPoolPrice'
 export * from './currency'
+export * from './fetchPrice'
 export * from './isAudio'
 export * from './isVideo'
 export * from './listNfts'
 export * from './putCommas'
 export * from './rarity'
+export * from './transactionResponse'
+export * from './updatedAssets'

src/nft/utils/transactionResponse.ts

+import { BigNumber } from '@ethersproject/bignumber'
+import { formatEther } from '@ethersproject/units'
+import { TxResponse, UpdatedGenieAsset } from 'nft/types'
+import { getTotalNftValue } from 'nft/utils'
+
+// Shortens a given txHash. With standard charsToShorten var of 4, a hash will become 0x1234...1234
+export const shortenTxHash = (txHash: string, charsToShorten = 4, addCharsToBack = 0): string => {
+  return `${txHash.substring(0, charsToShorten + 2)}...${txHash.substring(
+    txHash.length - charsToShorten,
+    txHash.length - (charsToShorten + addCharsToBack)
+  )}`
+}
+
+export const parseTransactionResponse = (transactionResponse: TxResponse | undefined, ethPrice: number) => {
+  let nftsPurchased: UpdatedGenieAsset[] = []
+  let nftsNotPurchased: UpdatedGenieAsset[] = []
+  let showPurchasedModal = false
+  let showRefundModal = false
+  let totalPurchaseValue = BigNumber.from(0)
+  let totalRefundValue = BigNumber.from(0)
+  let totalUSDRefund = 0
+  let txFeeFiat = 0
+
+  if (transactionResponse !== undefined) {
+    const { nftsPurchased: purchasedNfts, nftsNotPurchased: notPurchasedNfts, txReceipt } = transactionResponse
+    if (nftsPurchased && nftsNotPurchased && txReceipt) {
+      nftsPurchased = purchasedNfts
+      nftsNotPurchased = notPurchasedNfts
+      showPurchasedModal = nftsPurchased.length >= 1
+      showRefundModal = nftsNotPurchased.length >= 1
+      totalPurchaseValue = getTotalNftValue(nftsPurchased)
+      totalRefundValue = getTotalNftValue(nftsNotPurchased)
+      totalUSDRefund = totalRefundValue && parseFloat(formatEther(totalRefundValue)) * ethPrice
+      const txFee = BigNumber.from(txReceipt ? txReceipt.gasUsed : 0).mul(
+        BigNumber.from(txReceipt ? txReceipt.effectiveGasPrice : 0)
+      )
+      txFeeFiat = parseFloat(formatEther(txFee)) * ethPrice
+    }
+  }
+
+  return {
+    nftsPurchased,
+    nftsNotPurchased,
+    showPurchasedModal,
+    showRefundModal,
+    totalPurchaseValue,
+    totalRefundValue,
+    totalUSDRefund,
+    txFeeFiat,
+  }
+}
+
+// Given the length of the array of successfully purchased NFTs, returns the maxHeight and maxWidth of each asset preview
+export const getSuccessfulImageSize = (numSuccessful: number, isMobile: boolean) => {
+  const sizeModifier = isMobile ? 2 : 1
+  if (numSuccessful === 1) {
+    return 574 / sizeModifier
+  } else if (numSuccessful === 2) {
+    return 280 / sizeModifier
+  } else if (numSuccessful === 3 || (numSuccessful >= 5 && numSuccessful < 7)) {
+    return 184 / sizeModifier
+  } else if (numSuccessful === 4 || (numSuccessful >= 7 && numSuccessful < 13)) {
+    return 136 / sizeModifier
+  } else if (numSuccessful >= 13 && numSuccessful < 21) {
+    return 108 / sizeModifier
+  } else return isMobile ? 39 : 64
+}

src/nft/utils/updatedAssets.ts

@@ -9,3 +9,14 @@ export const updatedAssetPriceDifference = (asset: UpdatedGenieAsset) => {
 export const sortUpdatedAssets = (x: UpdatedGenieAsset, y: UpdatedGenieAsset) => {
   return updatedAssetPriceDifference(x).gt(updatedAssetPriceDifference(y)) ? -1 : 1
 }
+
+export const getTotalNftValue = (nfts: UpdatedGenieAsset[]): BigNumber => {
+  return (
+    nfts &&
+    nfts.reduce(
+      (ethTotal, nft) =>
+        ethTotal.add(BigNumber.from(nft.updatedPriceInfo ? nft.updatedPriceInfo.ETHPrice : nft.priceInfo.ETHPrice)),
+      BigNumber.from(0)
+    )
+  )
+}