chore(nft): add review suggestions

FTCHD · Oct 4, 2024 · 22bcff6 · 22bcff6
1 parent 37aca97
commit 22bcff6
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 46 deletions.
diff --git a/templates/nft/Inspector.tsx b/templates/nft/Inspector.tsx
@@ -4,7 +4,8 @@ import { useFarcasterId, useFrameConfig, useResetPreview, useUploadImage } from
 import { Configuration } from '@/sdk/inspector'
 import { TrashIcon, UploadIcon } from 'lucide-react'
 import toast from 'react-hot-toast'
-import type { Config, NFT } from '.'
+import type { Config } from '.'
+import type { NFT } from './types'
 
 export default function Inspector() {
     const [config, updateConfig] = useFrameConfig<Config>()
@@ -34,22 +35,22 @@ export default function Inspector() {
         updateConfig({ nfts: updatedNFTs })
     }
 
-    const handleImageUpload = async (index: number, file: File) => {
-        try {
-            const reader = new FileReader()
-            reader.onloadend = async () => {
+    const uploadImageFile = (file: File, onSuccess: (filePath: string) => void) => {
+        const reader = new FileReader()
+        reader.onloadend = async () => {
+            try {
                 const base64String = reader.result as string
                 const { filePath } = await uploadImage({
                     base64String: base64String.split(',')[1],
                     contentType: file.type,
                 })
-                updateNFT(index, 'imageUrl', filePath)
+                onSuccess(filePath)
+            } catch (error) {
+                console.error('Error uploading image:', error)
+                toast.error('Failed to upload image')
             }
-            reader.readAsDataURL(file)
-        } catch (error) {
-            console.error('Error uploading image:', error)
-            toast.error('Failed to upload image')
         }
+        reader.readAsDataURL(file)
     }
 
     return (
@@ -77,14 +78,12 @@ export default function Inspector() {
                             type="file"
                             accept="image/*"
                             className="hidden"
-                            onChange={async (e) => {
+                            onChange={(e) => {
                                 const file = e.target.files?.[0]
                                 if (file) {
-                                    const { filePath } = await uploadImage({
-                                        base64String: await file.text(),
-                                        contentType: file.type,
+                                    uploadImageFile(file, (filePath) => {
+                                        updateConfig({ coverImage: filePath })
                                     })
-                                    updateConfig({ coverImage: filePath })
                                 }
                             }}
                         />
@@ -208,14 +207,12 @@ export default function Inspector() {
                             type="file"
                             accept="image/*"
                             className="hidden"
-                            onChange={async (e) => {
+                            onChange={(e) => {
                                 const file = e.target.files?.[0]
                                 if (file) {
-                                    const { filePath } = await uploadImage({
-                                        base64String: await file.text(),
-                                        contentType: file.type,
+                                    uploadImageFile(file, (filePath) => {
+                                        updateConfig({ successBackground: filePath })
                                     })
-                                    updateConfig({ successBackground: filePath })
                                 }
                             }}
                         />

diff --git a/templates/nft/utils/formatters.ts b/templates/nft/utils/formatters.ts
@@ -0,0 +1 @@
+export const weiToEth = (wei: string) => Number(wei) / 1e18
diff --git a/templates/nft/utils/reservoir.ts b/templates/nft/utils/reservoir.ts
@@ -4,6 +4,10 @@ import axios from 'axios'
 import type { ReservoirOrderResponse } from '../types'
 
 const RESERVOIR_API_KEY = process.env.RESERVOIR_API_KEY
+if (!RESERVOIR_API_KEY) {
+    throw new Error('RESERVOIR_API_KEY is not defined in the environment variables.')
+}
+
 const RESERVOIR_API_BASE_URL = 'https://api.reservoir.tools'
 
 const reservoirClient = axios.create({
@@ -18,30 +22,39 @@ export async function buyTokens(
     tokenId: string,
     takerAddress: string
 ): Promise<ReservoirOrderResponse> {
-    const response = await reservoirClient.post('/execute/buy/v7', {
-        items: [{ token: `${contractAddress}:${tokenId}` }],
-        taker: takerAddress,
-        source: 'frametrain-nft-marketplace',
-    })
+    try {
+        const response = await reservoirClient.post('/execute/buy/v7', {
+            items: [{ token: `${contractAddress}:${tokenId}` }],
+            taker: takerAddress,
+            source: 'frametrain-nft-marketplace',
+        })
 
-    return response.data
+        return response.data
+    } catch (error) {
+        throw new Error(`Failed to buy tokens: ${error.message}`)
+    }
 }
 
 export async function createListing(
     contractAddress: string,
     tokenId: string,
-    makerAddress: string
+    makerAddress: string,
+    weiPrice: string
 ): Promise<ReservoirOrderResponse> {
-    const response = await reservoirClient.post('/execute/list/v5', {
-        maker: makerAddress,
-        source: 'frametrain-nft-marketplace',
-        params: [
-            {
-                token: `${contractAddress}:${tokenId}`,
-                weiPrice: '1000000000000000000',
-            },
-        ],
-    })
-
-    return response.data
+    try {
+        const response = await reservoirClient.post('/execute/list/v5', {
+            maker: makerAddress,
+            source: 'frametrain-nft-marketplace',
+            params: [
+                {
+                    token: `${contractAddress}:${tokenId}`,
+                    weiPrice: weiPrice,
+                },
+            ],
+        })
+
+        return response.data
+    } catch (error) {
+        throw new Error(`Failed to create listing: ${error.message}`)
+    }
 }
diff --git a/templates/nft/views/buy.tsx b/templates/nft/views/buy.tsx
@@ -1,11 +1,12 @@
 import BasicView from '@/sdk/views/BasicView'
 import type { NFT, ReservoirOrderResponse } from '../types'
+import { weiToEth } from '../utils/formatters'
 
-const BuyView = (nft: NFT, buyData: ReservoirOrderResponse) => (
+const BuyView = ({ nft, buyData }: { nft: NFT; buyData: ReservoirOrderResponse }) => (
     <BasicView
-        title={`Buy ${nft.name}`}
-        subtitle={`Price: ${buyData.price} ETH`}
-        background={nft.imageUrl}
+        title={`Buy ${nft.name || 'Unnamed NFT'}`}
+        subtitle={`Price: ${buyData.price ? `${weiToEth(buyData.price).toFixed(4)} ETH` : 'N/A'}`}
+        background={nft.imageUrl || '/nft/fallback-image.jpg'}
     />
 )
 

diff --git a/templates/nft/views/sell.tsx b/templates/nft/views/sell.tsx
@@ -1,11 +1,13 @@
 import BasicView from '@/sdk/views/BasicView'
 import type { NFT, ReservoirOrderResponse } from '../types'
 
+import { weiToEth } from '../utils/formatters'
+
 const SellView = (nft: NFT, listingData: ReservoirOrderResponse) => (
     <BasicView
-        title={`Sell ${nft.name}`}
-        subtitle={`List Price: ${listingData.price} ETH`}
-        background={nft.imageUrl}
+        title={`Sell ${nft?.name || 'NFT'}`}
+        subtitle={`List Price: ${listingData?.price ? weiToEth(listingData.price) : 'N/A'} ETH`}
+        background={nft?.imageUrl || '/nft/fallback-image.jpg'}
     />
 )