diff --git a/src/components/AirdropModal/index.tsx b/src/components/AirdropModal/index.tsx deleted file mode 100644 index 20b76e7000a..00000000000 --- a/src/components/AirdropModal/index.tsx +++ /dev/null @@ -1,335 +0,0 @@ -import { BigNumber } from '@ethersproject/bignumber' -import type { TransactionResponse } from '@ethersproject/providers' -import { UNISWAP_NFT_AIRDROP_CLAIM_ADDRESS } from '@uniswap/sdk-core' -import { useWeb3React } from '@web3-react/core' -import uniswapNftAirdropClaim from 'abis/uniswap-nft-airdrop-claim.json' -import airdropBackgroundv2 from 'assets/images/airdopBackground.png' -import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button' -import { OpacityHoverState } from 'components/Common' -import Loader from 'components/Icons/LoadingSpinner' -import { useContract } from 'hooks/useContract' -import { ChevronRightIcon } from 'nft/components/icons' -import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable' -import { CollectionRewardsFetcher } from 'nft/queries/genie' -import { Airdrop, Rewards } from 'nft/types/airdrop' -import { useEffect, useState } from 'react' -import { AlertTriangle } from 'react-feather' -import { useModalIsOpen, useToggleModal } from 'state/application/hooks' -import { ApplicationModal } from 'state/application/reducer' -import styled from 'styled-components' -import { CloseIcon, ThemedText } from 'theme/components' - -import Modal from '../Modal' - -const ModalWrap = styled.div` - display: flex; - flex-direction: column; -` - -const Body = styled.div` - padding: 28px 20px 20px 20px; -` - -const ClaimButton = styled(ThemeButton)` - width: 100%; - background-color: ${({ theme }) => theme.accent1}; - border-radius: 12px; - color: ${({ theme }) => theme.white}; -` - -const Line = styled.div` - height: 1px; - width: 100%; - background-color: ${({ theme }) => theme.white}; - opacity: 0.24; - margin-top: 12px; - margin-bottom: 12px; -` - -const LinkWrap = styled.a` - text-decoration: none; - ${OpacityHoverState} -` - -const ImageContainer = styled.div` - position: relative; - width: 100%; -` - -const StyledImage = styled.img` - width: 100%; - height: 170px; -` - -const USDCLabel = styled.div` - font-weight: 535; - font-size: 36px; - line-height: 44px; - margin-top: 8px; - color: white; -` - -const TextContainer = styled.div` - position: absolute; - left: 16px; - top: 16px; - right: 16px; -` - -const RewardsDetailsContainer = styled.div` - display: flex; - width: 100%; - justify-content: space-between; -` - -const CurrencyText = styled.span` - color: white; - font-weight: 535; - font-size: 12px; - line-height: 14.5px; -` - -const ClaimContainer = styled.div` - display: flex; - flex-direction: column; - text-align: center; - height: 380px; - padding: 60px 28px; - padding-bottom: 20px; -` - -const SuccessText = styled.div` - font-weight: 485; - font-size: 16px; - line-height: 24px; - margin-top: 24px; - margin-bottom: 8px; -` - -const EtherscanLink = styled.a` - text-decoration: none; - - ${OpacityHoverState} -` - -const CloseButton = styled(ThemeButton)` - max-width: 68px; - margin-top: auto; - margin-left: auto; - margin-right: auto; -` - -const SyledCloseIcon = styled(CloseIcon)` - float: right; - height: 24px; - - ${OpacityHoverState} -` - -const Error = styled.div` - display: flex; - color: ${({ theme }) => theme.critical}; - font-weight: 535; - line-height: 24px; - border-radius: 16px; - padding: 12px 20px; - font-size: 14px; - align-items: center; - gap: 12px; -` - -const ReactLinkWrap = styled.div` - margin-bottom: 40px; -` - -const RewardsText = styled.span` - font-size: 12px; - line-height: 16px; - color: ${({ theme }) => theme.white}; - - &:first-child { - margin-bottom: 8px; - } -` - -const RewardsInformationText = styled.span` - display: inline-block; - font-size: 14px; - line-height: 20px; - color: ${({ theme }) => theme.neutral1}; - margin-bottom: 28px; -` - -const MainHeader = styled.span` - font-weight: 535; - font-size: 16px; - line-height: 20px; - color: ${({ theme }) => theme.white}; -` - -const EtherscanLinkWrap = styled.div` - display: flex; - align-items: center; - justify-content: center; - gap: 8px; -` - -enum RewardAmounts { - tradingRewardAmount = 300, - holderRewardAmount = 1000, - combinedAmount = 1300, -} - -const AirdropModal = () => { - const { account, provider } = useWeb3React() - const [claim, setClaim] = useState() - const [isClaimed, setIsClaimed] = useState(false) - const [hash, setHash] = useState('') - const [error, setError] = useState(false) - const setIsClaimAvailable = useIsNftClaimAvailable((state) => state.setIsClaimAvailable) - const [isSubmitting, setIsSubmitting] = useState(false) - const [totalAmount, setTotalAmount] = useState(0) - const isOpen = useModalIsOpen(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM) - const usdcAirdropToggle = useToggleModal(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM) - const contract = useContract(UNISWAP_NFT_AIRDROP_CLAIM_ADDRESS, uniswapNftAirdropClaim) - - const displayError = () => { - setIsSubmitting(false) - setError(true) - setTimeout(() => { - setError(false) - }, 5000) - } - - useEffect(() => { - if (account && provider && contract) { - ;(async () => { - try { - const { data } = await CollectionRewardsFetcher(account) - const claim = data.find((claim) => claim?.rewardType === Airdrop.GENIE_UNISWAP_USDC_AIRDROP) - - if (!claim) return - - const [isClaimed] = await contract.connect(provider).functions.isClaimed(claim?.index) - - if (claim && isClaimed === false) { - const usdAmount = BigNumber.from(claim.amount).div(10 ** 6) - setClaim(claim) - setTotalAmount(usdAmount.toNumber()) - setIsClaimAvailable(true) - } - } catch (err) { - displayError() - } - })() - } - }, [account, contract, provider, setIsClaimAvailable]) - - const makeClaim = async () => { - try { - if (contract && claim && claim.amount && claim.merkleProof && provider) { - setIsSubmitting(true) - - const response: TransactionResponse = await contract - .connect(provider?.getSigner()) - .functions.claim(claim.index, account, claim?.amount, claim?.merkleProof) - - await response.wait() - - setHash(response.hash) - setIsSubmitting(false) - setIsClaimed(true) - setIsClaimAvailable(false) - } - } catch (err) { - setIsSubmitting(false) - displayError() - } - } - - return ( - <> - - - {isClaimed ? ( - - Congratulations! - - You have successfully claimed {totalAmount} USDC. Thank you for supporting Genie.xyz. - - - - - Etherscan - - - - - - - Close - - - ) : ( - <> - - - - Uniswap NFT Airdrop - {totalAmount} USDC - - - Trading rewards{' '} - - {totalAmount === RewardAmounts.tradingRewardAmount || totalAmount === RewardAmounts.combinedAmount - ? `${RewardAmounts.tradingRewardAmount} USDC` - : '0'} - - - - Genie NFT holder rewards{' '} - - {totalAmount !== RewardAmounts.tradingRewardAmount - ? `${RewardAmounts.holderRewardAmount} USDC` - : '0'} - - - - - - - - As a long time supporter of Genie, you’ve been awarded {totalAmount} USDC tokens. - - - - Read more about Uniswap NFT. - - - - {error && ( - - - Claim USDC failed. Please try again later - - )} - - - {isSubmitting && } - Claim{isSubmitting && 'ing'} USDC - - - - )} - - - - ) -} - -export default AirdropModal diff --git a/src/components/TopLevelModals/index.tsx b/src/components/TopLevelModals/index.tsx index f5e15e43589..a94c17735cb 100644 --- a/src/components/TopLevelModals/index.tsx +++ b/src/components/TopLevelModals/index.tsx @@ -1,10 +1,6 @@ -import { OffchainActivityModal } from 'components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal' -import AirdropModal from 'components/AirdropModal' import AddressClaimModal from 'components/claim/AddressClaimModal' import { UkDisclaimerModal } from 'components/NavBar/UkDisclaimerModal' import DevFlagsBox from 'dev/DevFlagsBox' -import Bag from 'nft/components/bag/Bag' -import TransactionCompleteModal from 'nft/components/collection/TransactionCompleteModal' import { useModalIsOpen, useToggleModal } from 'state/application/hooks' import { ApplicationModal } from 'state/application/reducer' import { isDevelopmentEnv, isStagingEnv } from 'utils/env' @@ -17,10 +13,6 @@ export default function TopLevelModals() { return ( <> - - - - {shouldShowDevFlags && } diff --git a/src/nft/components/collection/TransactionCompleteModal.css.ts b/src/nft/components/collection/TransactionCompleteModal.css.ts deleted file mode 100644 index 596e15e0fe1..00000000000 --- a/src/nft/components/collection/TransactionCompleteModal.css.ts +++ /dev/null @@ -1,507 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { sprinkles, themeVars, vars } from 'nft/css/sprinkles.css' - -export const modalContainer = style([ - sprinkles({ - display: 'flex', - position: 'fixed', - height: 'full', - width: { sm: 'full', md: 'min' }, - left: { sm: '0', md: '1/2' }, - top: '0', - zIndex: 'modal', - overflow: 'scroll', - paddingY: '72', - paddingX: '12', - }), - { - flexDirection: 'column', - justifyContent: 'center', - gap: '24px', - '@media': { - 'screen and (min-width: 656px)': { - marginLeft: '-320px', - }, - }, - '::-webkit-scrollbar': { display: 'none' }, - scrollbarWidth: 'none', - }, -]) - -export const successModal = style([ - sprinkles({ - background: 'surface1', - borderRadius: '20', - display: 'flex', - flexWrap: 'wrap', - height: 'min', - position: 'relative', - width: { sm: 'full', md: 'min' }, - paddingTop: { sm: '28', md: '28' }, - paddingBottom: { sm: '28', md: '28' }, - }), - { - boxShadow: vars.color.dropShadow, - boxSizing: 'border-box', - '@media': { - 'screen and (min-width: 656px)': { - minWidth: '640px', - }, - }, - }, -]) - -export const uniLogo = style([ - sprinkles({ - position: 'absolute', - left: { sm: '12', md: '32' }, - top: { sm: '16', md: '20' }, - }), -]) - -export const title = style([ - sprinkles({ - fontWeight: 'medium', - color: 'neutral1', - fontSize: '20', - marginLeft: 'auto', - marginRight: 'auto', - marginTop: '0', - marginBottom: { sm: '8', md: '4' }, - }), - { - lineHeight: '25px', - }, -]) - -export const walletAddress = style([ - sprinkles({ - color: 'neutral2', - fontSize: '10', - display: 'flex', - alignItems: 'center', - height: 'min', - right: '16', - }), - { - bottom: '42px', - marginTop: '-2px', - lineHeight: '13px', - letterSpacing: '0.04em', - textTransform: 'uppercase', - }, -]) - -export const addressHash = style([ - sprinkles({ - color: 'neutral2', - fontSize: '10', - fontWeight: 'book', - marginTop: '4', - }), - { - lineHeight: '13px', - letterSpacing: '0.04em', - }, -]) - -export const subHeading = style([ - sprinkles({ - color: 'neutral1', - fontSize: '14', - width: 'full', - textAlign: 'center', - marginLeft: 'auto', - marginRight: 'auto', - marginTop: '0', - marginBottom: '20', - }), - { - lineHeight: '18px', - }, -]) - -export const successAssetsContainer = style([ - sprinkles({ - display: 'flex', - flexWrap: 'wrap', - width: 'full', - overflow: 'scroll', - justifyContent: 'center', - }), - { - height: 'min', - scrollbarWidth: 'none', - selectors: { - '&::-webkit-scrollbar': { - display: 'none', - }, - }, - }, -]) - -export const successAssetImage = style([ - sprinkles({ - borderRadius: '12', - flexShrink: '0', - }), - { - height: 'auto', - width: 'auto', - boxSizing: 'border-box', - objectFit: 'contain', - }, -]) - -export const successAssetImageGrid = style([ - sprinkles({ - marginRight: { sm: '4', md: '8' }, - marginBottom: { sm: '4', md: '8' }, - }), -]) - -export const overflowFade = style({ - backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, ${themeVars.colors.surface1} 100%)`, - width: '576px', - height: '20px', - marginLeft: '32px', - marginTop: '-20px', -}) - -export const totalEthCost = style([ - sprinkles({ - fontSize: '14', - color: 'neutral2', - marginTop: '1', - marginBottom: '0', - }), - { - lineHeight: '18px', - }, -]) - -export const bottomBar = style([ - sprinkles({ - color: 'neutral1', - fontSize: '14', - }), -]) - -export const button = style([ - sprinkles({ - height: '40', - textAlign: 'center', - fontWeight: 'medium', - fontSize: '14', - color: 'neutral1', - display: 'flex', - alignItems: 'center', - marginBottom: 'auto', - marginRight: 'auto', - bottom: { sm: '20', md: 'auto' }, - }), - { - left: 'calc(50% - 107px)', - width: '214px', - lineHeight: '18px', - borderRadius: '100px', - marginTop: '15px', - }, -]) - -export const mixedRefundModal = style([ - sprinkles({ - background: 'surface1', - borderRadius: '20', - display: 'flex', - flexWrap: 'wrap', - paddingTop: { sm: '24', md: '32' }, - paddingRight: { sm: '16', md: '24' }, - paddingLeft: { sm: '24', md: '32' }, - height: 'min', - width: { sm: 'full', md: 'min' }, - position: 'relative', - marginTop: '8', - }), - { - boxShadow: vars.color.dropShadow, - paddingBottom: '68px', - '@media': { - 'screen and (min-width: 656px)': { - minWidth: '640px', - paddingBottom: '32px', - }, - }, - }, -]) - -export const subtitle = style([ - sprinkles({ - color: 'neutral1', - fontWeight: 'medium', - fontSize: '16', - marginLeft: '4', - marginRight: 'auto', - marginBottom: { sm: '0', md: 'auto' }, - }), - { - lineHeight: '20px', - marginTop: '2px', - }, -]) - -export const interStd = style([ - sprinkles({ - color: 'neutral1', - fontSize: '14', - marginLeft: 'auto', - marginRight: 'auto', - marginTop: '10', - marginBottom: '16', - width: 'full', - }), - { - lineHeight: '18px', - }, -]) - -export const totalUsdRefund = style([ - sprinkles({ - color: 'neutral2', - fontSize: '12', - marginLeft: '4', - }), - { - lineHeight: '15px', - marginTop: '3px', - marginBottom: '2px', - }, -]) - -export const refundAssetsContainer = style([ - sprinkles({ - height: { sm: 'min', md: 'full' }, - width: { sm: 'full', md: 'half' }, - flexWrap: 'wrap', - overflow: 'scroll', - flexDirection: 'row', - display: 'inline-flex', - paddingLeft: { md: '16' }, - }), - { - maxHeight: '152px', - scrollbarWidth: 'none', - selectors: { - '&::-webkit-scrollbar': { - display: 'none', - }, - }, - }, -]) - -export const refundAssetImage = style([ - sprinkles({ - height: '52', - width: '52', - borderRadius: '8', - marginRight: '4', - marginBottom: '1', - }), - { - boxSizing: 'border-box', - border: `2px solid ${themeVars.colors.surface1}`, - filter: 'grayscale(100%)', - }, -]) - -export const refundOverflowFade = style([ - sprinkles({ - width: { sm: 'full', md: 'half' }, - marginLeft: 'auto', - zIndex: '1', - }), - { - backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, ${themeVars.colors.surface1} 100%)`, - height: '30px', - marginRight: '18px', - marginTop: '-20px', - }, -]) - -export const fullRefundModal = style([ - sprinkles({ - background: 'surface1', - borderRadius: '20', - display: 'flex', - flexWrap: 'wrap', - marginRight: 'auto', - textAlign: 'center', - marginLeft: { sm: 'auto', md: '100' }, - padding: '32', - height: 'min', - }), - { - boxShadow: vars.color.dropShadow, - width: '344px', - }, -]) - -export const returnButton = style([ - sprinkles({ - height: '40', - textAlign: 'center', - fontWeight: 'medium', - fontSize: '14', - color: 'white', - backgroundColor: 'accent1', - display: 'flex', - alignItems: 'center', - marginLeft: 'auto', - marginRight: 'auto', - marginTop: '10', - }), - { - width: '276px', - lineHeight: '18px', - borderRadius: '100px', - }, -]) - -export const fullRefundBackArrow = style([ - sprinkles({ - fill: 'white', - marginLeft: '12', - marginRight: '28', - }), -]) - -export const bodySmall = style([ - sprinkles({ - color: 'neutral1', - fontSize: '14', - marginLeft: 'auto', - marginRight: 'auto', - marginTop: '4', - }), - { - marginBottom: '22px', - lineHeight: '18px', - }, -]) - -export const allUnavailableAssets = style([ - sprinkles({ - width: 'full', - }), - { - overflow: 'auto', - maxHeight: '210px', - minHeight: '58px', - }, -]) - -export const fullRefundOverflowFade = style({ - backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, ${themeVars.colors.surface1} 100%)`, - width: '266px', - height: '20px', - marginTop: '-20px', - marginBottom: '20px', - position: 'relative', -}) - -export const toggleUnavailable = style([ - sprinkles({ - backgroundColor: 'surface1', - borderRadius: '8', - display: 'flex', - flexWrap: 'wrap', - marginTop: '1', - marginBottom: '1', - height: '52', - cursor: 'pointer', - }), -]) - -export const unavailableAssetPreview = style([ - sprinkles({ - borderRadius: '4', - height: '36', - width: '36', - position: 'relative', - }), - { - boxSizing: 'border-box', - border: `2px solid ${themeVars.colors.surface1}`, - marginLeft: '-16px', - filter: 'grayscale(100%)', - }, -]) - -export const unavailableText = style([ - sprinkles({ - color: 'neutral2', - fontWeight: 'book', - fontSize: '14', - paddingTop: '8', - paddingBottom: '8', - paddingLeft: '12', - }), - { - fontStyle: 'normal', - lineHeight: '18px', - }, -]) - -export const unavailableItems = style([ - sprinkles({ - fontWeight: 'book', - fontSize: '12', - display: 'flex', - }), - { - fontStyle: 'normal', - lineHeight: '15px', - }, -]) - -export const assetContainer = style({ - height: '48px', - width: '48px', - flexShrink: '0', - marginRight: '4px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', -}) - -export const fullRefundImage = style([ - sprinkles({ - borderRadius: '4', - height: 'auto', - maxHeight: '36', - width: 'auto', - maxWidth: '36', - objectFit: 'contain', - }), - { - boxSizing: 'border-box', - filter: 'grayscale(100%)', - }, -]) - -export const chevron = style([ - sprinkles({ - marginBottom: 'auto', - marginLeft: '0', - marginRight: 'auto', - height: '20', - width: '20', - }), - { - marginTop: '7px', - }, -]) - -export const chevronDown = style({ - transform: 'rotate(180deg)', -}) diff --git a/src/nft/components/collection/TransactionCompleteModal.tsx b/src/nft/components/collection/TransactionCompleteModal.tsx deleted file mode 100644 index 2b431a6cb05..00000000000 --- a/src/nft/components/collection/TransactionCompleteModal.tsx +++ /dev/null @@ -1,334 +0,0 @@ -import { Trans } from '@lingui/macro' -import clsx from 'clsx' -import { OpacityHoverState } from 'components/Common' -import { Box } from 'nft/components/Box' -import { Portal } from 'nft/components/common/Portal' -import { Row } from 'nft/components/Flex' -import { BackArrowIcon, ChevronUpIcon, LightningBoltIcon, TwitterIcon, UniIcon } from 'nft/components/icons' -import { Overlay, stopPropagation } from 'nft/components/modals/Overlay' -import { themeVars, vars } from 'nft/css/sprinkles.css' -import { useIsMobile, useNativeUsdPrice, useSendTransaction, useTransactionResponse } from 'nft/hooks' -import { TxResponse, TxStateType } from 'nft/types' -import { - formatEthPrice, - formatUsdPrice, - formatUSDPriceWithCommas, - generateTweetForPurchase, - getSuccessfulImageSize, - parseTransactionResponse, -} from 'nft/utils' -import { useEffect, useMemo, useRef, useState } from 'react' -import styled from 'styled-components' -import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink' - -import * as styles from './TransactionCompleteModal.css' - -const TWITTER_WIDTH = 560 -const TWITTER_HEIGHT = 480 - -const UploadLink = styled.a` - position: absolute; - right: 32px; - top: 32px; - color: ${({ theme }) => theme.neutral2}; - cursor: pointer; - - ${OpacityHoverState} - - @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - right: 12px; - top: 28px; - } -` - -const TxCompleteModal = () => { - const ethUsdPrice = useNativeUsdPrice() - const [showUnavailable, setShowUnavailable] = useState(false) - const txHash = useSendTransaction((state) => state.txHash) - const setTxState = useSendTransaction((state) => state.setState) - const txState = useSendTransaction((state) => state.state) - const transactionStateRef = useRef(txState) - const transactionResponse = useTransactionResponse((state) => state.transactionResponse) - const setTransactionResponse = useTransactionResponse((state) => state.setTransactionResponse) - const isMobile = useIsMobile() - const txHashUrl = getExplorerLink(1, txHash, ExplorerDataType.TRANSACTION) - const shouldShowModal = (txState === TxStateType.Success || txState === TxStateType.Failed) && txState - const { - nftsPurchased, - nftsNotPurchased, - showPurchasedModal, - showRefundModal, - totalPurchaseValue, - totalRefundValue, - totalUSDRefund, - txFeeFiat, - } = useMemo(() => { - return parseTransactionResponse(transactionResponse, ethUsdPrice) - }, [transactionResponse, ethUsdPrice]) - - const toggleShowUnavailable = () => { - setShowUnavailable(!showUnavailable) - } - - function closeTxCompleteScreen() { - setTransactionResponse({} as TxResponse) - setTxState(TxStateType.New) - } - - useEffect(() => { - useSendTransaction.subscribe((state) => (transactionStateRef.current = state.state)) - }, []) - - const shareTweet = () => { - window.open( - generateTweetForPurchase(nftsPurchased, txHashUrl), - 'newwindow', - `left=${(window.screen.width - TWITTER_WIDTH) / 2}, top=${ - (window.screen.height - TWITTER_HEIGHT) / 2 - }, width=${TWITTER_WIDTH}, height=${TWITTER_HEIGHT}` - ) - } - - return ( - <> - {shouldShowModal && ( - - - - {/* Successfully purchased NFTs */} - {showPurchasedModal && ( - - - -

- Complete! -

-

- Uniswap has granted your wish! -

- - - - - 32 ? (isMobile ? '172px' : '292px') : 'min-content', - }} - > - {[...nftsPurchased].map((nft, index) => ( - 1 && styles.successAssetImageGrid - )} - style={{ - maxHeight: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`, - maxWidth: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`, - }} - src={nft.imageUrl} - alt={nft.name} - key={index} - /> - ))} - - {nftsPurchased.length > 32 && } - - - - {nftsPurchased.length} NFT{nftsPurchased.length === 1 ? '' : 's'} - - {formatEthPrice(totalPurchaseValue.toString())} ETH - - - - View on Etherscan - - - - - )} - {/* NFTs that were not purchased ie Refunds */} - {showRefundModal && - /* Showing both purchases & refunds */ - (showPurchasedModal ? ( - - - -

Instant Refund

-

- Uniswap returned{' '} - {formatEthPrice(totalRefundValue.toString())} ETH back - to your wallet for unavailable items. -

- -

- {formatEthPrice(totalRefundValue.toString())} ETH -

-

{formatUSDPriceWithCommas(totalUSDRefund)}

-

- for {nftsNotPurchased.length} unavailable item - {nftsNotPurchased.length === 1 ? '' : 's'}. -

- - - - View on Etherscan - - - - - - - {nftsNotPurchased.map((nft, index) => ( - - {nft.name} - - ))} - - - - ) : ( - // Only showing when all assets are unavailable - - - {txState === TxStateType.Success ? ( - <> - -

Instant Refund

- - ) : ( -

Failed Transaction

- )} - -

- {txState === TxStateType.Success && - `Selected item${ - nftsPurchased.length === 1 ? ' is' : 's are' - } no longer available. Uniswap instantly refunded you for this incomplete transaction. `} - {formatUsdPrice(txFeeFiat)} was used for gas in attempt to complete this transaction. For support, - please visit our Discord -

- - {nftsNotPurchased.length >= 3 && ( - toggleShowUnavailable()}> - {!showUnavailable && ( - - {nftsNotPurchased.slice(0, 3).map((asset, index) => ( - {asset.name} - ))} - - )} - - Unavailable - - {nftsNotPurchased.length} item{nftsNotPurchased.length === 1 ? '' : 's'} - - - - - )} - {(showUnavailable || nftsNotPurchased.length < 3) && - nftsNotPurchased.map((asset, index) => ( - - - {asset.name} - - - -

- {formatEthPrice( - asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice - )}{' '} - ETH -

- - - {txState === TxStateType.Success ? 'Refunded' : asset.name} - - - - ))} - - {showUnavailable && } -

- {formatEthPrice(totalRefundValue.toString())} ETH -

-

{formatUSDPriceWithCommas(totalUSDRefund)}

- - - View on Etherscan - - -

- for {nftsNotPurchased.length} unavailable item - {nftsNotPurchased.length === 1 ? '' : 's'}. -

- closeTxCompleteScreen()} - > - - Return to Marketplace - - - ))} - - - )} - - ) -} - -export default TxCompleteModal diff --git a/src/nft/components/icons.tsx b/src/nft/components/icons.tsx index fc8ddd8a4d4..b7a6eb7c716 100644 --- a/src/nft/components/icons.tsx +++ b/src/nft/components/icons.tsx @@ -50,12 +50,6 @@ export const ChevronUpIcon = ({ ) -export const BackArrowIcon = (props: SVGProps) => ( - - - -) - export const VerifiedIcon = (props: SVGProps) => { const theme = useTheme() return ( @@ -145,28 +139,6 @@ export const EllipsisIcon = (props: SVGProps) => ( ) -export const LightningBoltIcon = (props: SVGProps) => ( - - - - - - - - - -) - export const SweepIcon = (props: SVGProps) => ( ( ) -export const BarChartIcon = (props: SVGProps) => ( - - - - - -) - export const DiscordIcon = (props: SVGProps) => ( { }%20(${asset.collectionName})%20https://app.uniswap.org/nfts/asset/${asset.address}/${asset.tokenId}%20via%20@uniswap` } -export const generateTweetForPurchase = (assets: UpdatedGenieAsset[], txHashUrl: string): string => { - const multipleCollections = assets.length > 0 && assets.some((asset) => asset.address !== assets[0].address) - const collectionUrl = assets.length > 0 && !multipleCollections ? `collection/${assets[0].address}` : '' - const tweetText = `I just purchased ${ - multipleCollections ? `${assets.length} NFTs` : `${assets.length} ${assets[0].collectionName ?? 'NFT'}` - } with @Uniswap 🦄\n\nhttps://app.uniswap.org/nfts/${collectionUrl}\n${txHashUrl}` - return `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}` -} - function getMinListingPrice(listings: Listing[]): number { return Math.min(...listings.map((listing) => listing.price ?? 0)) ?? 0 } diff --git a/src/nft/utils/currency.ts b/src/nft/utils/currency.ts index 7f3cc4ff1f3..0ff8555d3d9 100644 --- a/src/nft/utils/currency.ts +++ b/src/nft/utils/currency.ts @@ -22,12 +22,6 @@ export const formatEth = (price: number) => { } } -export const formatUSDPriceWithCommas = (price: number) => { - return `$${Math.round(price) - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, ',')}` -} - export const formatEthPrice = (price: string | undefined) => { if (!price) return 0 diff --git a/src/nft/utils/formatEventProperties.ts b/src/nft/utils/formatEventProperties.ts deleted file mode 100644 index 1da170b52f9..00000000000 --- a/src/nft/utils/formatEventProperties.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { GenieAsset } from 'nft/types' - -export const formatAssetEventProperties = (assets: GenieAsset[]) => ({ - collection_addresses: assets.map((asset) => asset.address), - token_ids: assets.map((asset) => asset.tokenId), - token_types: assets.map((asset) => asset.tokenType), -}) diff --git a/src/nft/utils/index.ts b/src/nft/utils/index.ts index eefa4619512..d63f5751c30 100644 --- a/src/nft/utils/index.ts +++ b/src/nft/utils/index.ts @@ -1,11 +1,4 @@ -export { - generateTweetForAsset, - generateTweetForList, - generateTweetForPurchase, - getAssetHref, - getMarketplaceIcon, - getRarityStatus, -} from './asset' +export { generateTweetForAsset, generateTweetForList, getAssetHref, getMarketplaceIcon, getRarityStatus } from './asset' export { blocklistedCollections } from './blocklist' export { buildNftTradeInputFromBagItems } from './buildSellObject' export { calculateCardIndex, calculateFirstCardIndex, calculateRank } from './carousel' @@ -14,12 +7,9 @@ export { ethNumberStandardFormatter, formatEth, formatEthPrice, - formatUsdPrice, - formatUSDPriceWithCommas, formatWeiToDecimal, wrapScientificNotation, } from './currency' -export { formatAssetEventProperties } from './formatEventProperties' export { isAudio } from './isAudio' export { isVideo } from './isVideo' export { floorFormatter, volumeFormatter } from './numbers' @@ -27,5 +17,3 @@ export { calcAvgGroupPoolPrice, calcPoolPrice, recalculateBagUsingPooledAssets } export { putCommas } from './putCommas' export { pluralize, roundAndPluralize } from './roundAndPluralize' export { timeLeft } from './time' -export { getSuccessfulImageSize, parseTransactionResponse } from './transactionResponse' -export { getTotalNftValue } from './updatedAssets' diff --git a/src/nft/utils/transactionResponse.ts b/src/nft/utils/transactionResponse.ts deleted file mode 100644 index 30da6566e8f..00000000000 --- a/src/nft/utils/transactionResponse.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { BigNumber } from '@ethersproject/bignumber' -import { formatEther } from '@ethersproject/units' -import { TxResponse, UpdatedGenieAsset } from 'nft/types' -import { getTotalNftValue } from 'nft/utils' - -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 474 / 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 -} diff --git a/src/nft/utils/updatedAssets.ts b/src/nft/utils/updatedAssets.ts index fdecfd5ac9f..836d999e0ad 100644 --- a/src/nft/utils/updatedAssets.ts +++ b/src/nft/utils/updatedAssets.ts @@ -10,17 +10,6 @@ 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) - ) - ) -} - export function filterUpdatedAssetsByState(assets: UpdatedGenieAsset[]): { unchanged: UpdatedGenieAsset[] priceChanged: UpdatedGenieAsset[]