release 2.0

.github/workflows/main.yml

@@ -22,6 +22,7 @@ jobs:
           REACT_APP_SERVICE_URL: ${{ secrets.REACT_APP_SERVICE_URL }}
           REACT_APP_RPC_URL_1: ${{ secrets.REACT_APP_RPC_URL_1 }}
           REACT_APP_RPC_URL_4: ${{ secrets.REACT_APP_RPC_URL_4 }}
+          NODE_ENV: production
         run: SKIP_PREFLIGHT_CHECK=true yarn build
 
       - name: 💾 Create artifact

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluuuid/nft-marketplace",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "homepage": "https://nft.s2paganini.com",
   "dependencies": {
     "@ethersproject/constants": "^5.4.0",

src/components/Gallery/Gallery.tsx

@@ -1,5 +1,5 @@
 import { BigNumber, utils } from 'ethers'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Box, Button, Flex, Grid, Heading } from 'theme-ui'
 import { useAppState } from '../../state'
 import { Token } from '..'
@@ -8,14 +8,16 @@ export type GalleryProps = {}
 type StateOrder = 'price' | 'alpha'
 
 const Gallery = () => {
-  const { user, tokensOnSale, updateTokensOnSale } = useAppState()
+  const { user, tokensOnSale } = useAppState()
+  const updateTokensOnSale = useAppState(
+    useCallback(({ updateTokensOnSale }) => updateTokensOnSale, [])
+  )
+
   const [order, setOrder] = useState<StateOrder>('alpha')
 
   useEffect(() => {
     updateTokensOnSale()
-  }, [updateTokensOnSale, user?.ownedTokens])
-
-  console.log(user?.ownedTokens)
+  }, [updateTokensOnSale])
 
   return (
     <Box>

src/components/Token/Token.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, MouseEvent, useState, useEffect } from 'react'
+import { FormEvent, MouseEvent, useState } from 'react'
 import { utils, BigNumber, constants } from 'ethers'
 import {
   Spinner,
@@ -15,9 +15,8 @@ import {
 } from 'theme-ui'
 import useSWR from 'swr'
 import { useAppState } from '../../state'
-import { fetcherMetadata } from '../../utils/fetchers'
-import { METADATA_API, toShort } from '../../utils'
-import { useWeb3React } from '@web3-react/core'
+import { fetcherMetadata, fetchOwner } from '../../utils/fetchers'
+import { formatPriceEth, METADATA_API, toShort } from '../../utils'
 
 export type TokenProps = {
   id: string
@@ -39,27 +38,13 @@ const Token = ({ token, isOnSale, onTransfer, onBuy, onSale }: TokenCompProps) =
   const [onSaleActive, setOnSale] = useState<boolean>(false)
   const [address, setAddress] = useState<string>('')
   const [price, setPrice] = useState<string>('')
-  const [owner, setOwner] = useState<string>('')
-  const {
-    user,
-    ethPrice,
-    contract,
-    updateTokensOnSale,
-    setUser,
-    transferToken,
-    buyToken,
-    setTokenSale,
-  } = useAppState()
-  const { library } = useWeb3React()
+  const { user, ethPrice, contractDetails, transferToken, buyToken, setTokenSale } = useAppState()
 
   const onTransferClick = async (e: FormEvent | MouseEvent) => {
     e.preventDefault()
-    try {
-      if (utils.isAddress(address) && onTransfer) {
-        await transferToken(token.id, address)
-      }
-    } catch (e) {
-      throw new Error(e)
+    if (onTransfer && utils.isAddress(address)) {
+      transferToken(token.id, address)
+      setTransfer(false)
     }
   }
 
@@ -73,33 +58,16 @@ const Token = ({ token, isOnSale, onTransfer, onBuy, onSale }: TokenCompProps) =
     if (!onSale) return
     try {
       await setTokenSale(token.id, utils.parseEther(price), true)
-      await updateTokensOnSale()
-      await setUser(library)
+      setOnSale(false)
     } catch (e) {
       throw new Error(e)
     }
   }
 
-  useEffect(() => {
-    const loadOwner = async () => {
-      try {
-        const owner = await contract?.payload.ownerOf(token.id)
-        setOwner(owner)
-      } catch (e) {
-        // throw new Error(e)
-        console.error(e)
-      }
-    }
-
-    loadOwner()
-  }, [contract, token.id])
-
+  const { data: owner } = useSWR(token.id, fetchOwner)
   const { data } = useSWR(`${METADATA_API}/token/${token.id}`, fetcherMetadata)
 
-  const tokenPriceEth = new Intl.NumberFormat('us-GB', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(Number(utils.formatEther(token.price)) * Number(ethPrice))
+  const tokenPriceEth = formatPriceEth(token.price, ethPrice)
 
   if (!data)
     return (
@@ -127,28 +95,30 @@ const Token = ({ token, isOnSale, onTransfer, onBuy, onSale }: TokenCompProps) =
               ({tokenPriceEth})
             </Text>
           </Heading>
-          <Box mt={2}>
-            <Text as="p" sx={{ color: 'lightBlue', fontSize: 1, fontWeight: 'bold' }}>
-              Owner
-            </Text>
-            <NavLink
-              target="_blank"
-              href={`https://rinkeby.etherscan.io/address/${owner}`}
-              variant="owner"
-              style={{
-                textOverflow: 'ellipsis',
-                width: '100%',
-                position: 'relative',
-                overflow: 'hidden',
-              }}
-            >
-              {toShort(owner)}
-            </NavLink>
-          </Box>
+          {owner && !onTransfer && (
+            <Box mt={2}>
+              <Text as="p" sx={{ color: 'lightBlue', fontSize: 1, fontWeight: 'bold' }}>
+                Owner
+              </Text>
+              <NavLink
+                target="_blank"
+                href={`https://rinkeby.etherscan.io/address/${owner}`}
+                variant="owner"
+                style={{
+                  textOverflow: 'ellipsis',
+                  width: '100%',
+                  position: 'relative',
+                  overflow: 'hidden',
+                }}
+              >
+                {toShort(owner)}
+              </NavLink>
+            </Box>
+          )}
           <Box mt={2}>
             <NavLink
               target="_blank"
-              href={`https://testnets.opensea.io/assets/${contract?.details.address}/${token.id}`}
+              href={`https://testnets.opensea.io/assets/${contractDetails?.address}/${token.id}`}
               variant="openSea"
             >
               View on Opensea.io

src/components/TransactionProgress/TransactionProgress.tsx

@@ -1,39 +1,58 @@
-import { useWeb3React } from '@web3-react/core'
-import { useEffect } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { Card, Flex, Spinner } from 'theme-ui'
 import { useAppState } from '../../state'
 import { toShort } from '../../utils'
 
 const TransactionProgress = () => {
-  const { transaction, user, setTransaction, setUser, updateTokensOnSale } = useAppState()
+  const { setTransaction, setUser, updateTokensOnSale } = useAppState(
+    useCallback(
+      ({ setTransaction, setUser, updateTokensOnSale }) => ({
+        setTransaction,
+        setUser,
+        updateTokensOnSale,
+      }),
+      []
+    )
+  )
+
+  const transactionRef = useRef(useAppState.getState().transaction)
+  const [loading, setLoading] = useState<boolean>(false)
 
-  const { library } = useWeb3React()
+  const update = useCallback(async () => {
+    await setUser()
+    setTransaction(undefined)
+    updateTokensOnSale()
+    setLoading(false)
+  }, [setTransaction, setUser, updateTokensOnSale])
 
   useEffect(() => {
-    const loadTransaction = async () => {
-      if (!user || !user.address || !transaction) return
-
-      const receipt = await transaction.wait()
-      if (receipt.confirmations >= 1) {
-        await setUser(library)
-        setTransaction(undefined)
-        updateTokensOnSale()
-      } else {
-        throw new Error(receipt)
+    useAppState.subscribe(async ({ transaction }) => {
+      try {
+        transactionRef.current = transaction
+        if (!transaction) return
+        setLoading(true)
+        const receipt = await transaction.wait()
+        if (receipt.confirmations >= 1) {
+          update()
+        }
+      } catch (e) {
+        console.log('transaction', e)
+        setLoading(false)
       }
-    }
+    })
 
-    loadTransaction()
-  }, [transaction, library, user, setTransaction, setUser, updateTokensOnSale])
-
-  console.log('asdasdasd', transaction)
+    return () => {
+      useAppState.destroy()
+    }
+  }, [update])
 
-  if (!transaction) return null
+  if (!loading) return null
 
   return (
     <Card variant="transaction">
       <Flex sx={{ alignItems: 'center' }}>
-        <Spinner size={20} color="white" sx={{ mr: 2 }} /> Transaction: {toShort(transaction.hash)}
+        <Spinner size={20} color="white" sx={{ mr: 2 }} /> Transaction:{' '}
+        {toShort(transactionRef.current.hash)}
       </Flex>
     </Card>
   )

src/components/index.ts

@@ -1,6 +1,5 @@
 export * from './Token'
 export * from './Header'
-export * from './Profile'
 export * from './Gallery'
 export * from './ContractDetails'
 export * from './MetamaskLogin'

src/index.tsx

@@ -10,6 +10,7 @@ import theme from './theme'
 Sentry.init({
   dsn: 'https://06951a956c7a4a6db2f776b1bc697efd@o72860.ingest.sentry.io/5842491',
   integrations: [new Integrations.BrowserTracing()],
+  enabled: process.env.NODE_ENV !== 'development',
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.