From 22bcff60eb6f3c28e6c9fa8c5b1c93babe0e2fe8 Mon Sep 17 00:00:00 2001 From: codingsh Date: Fri, 4 Oct 2024 06:18:19 +0400 Subject: [PATCH] chore(nft): add review suggestions --- templates/nft/Inspector.tsx | 37 +++++++++++----------- templates/nft/utils/formatters.ts | 1 + templates/nft/utils/reservoir.ts | 51 +++++++++++++++++++------------ templates/nft/views/buy.tsx | 9 +++--- templates/nft/views/sell.tsx | 8 +++-- 5 files changed, 60 insertions(+), 46 deletions(-) create mode 100644 templates/nft/utils/formatters.ts diff --git a/templates/nft/Inspector.tsx b/templates/nft/Inspector.tsx index eae8cae1..279e56e7 100644 --- 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() @@ -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 new file mode 100644 index 00000000..7bb4704c --- /dev/null +++ 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 index 08cd905a..7c3fe3f6 100644 --- 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 { - 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 { - 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 index 8994f565..358bacc0 100644 --- 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 }) => ( ) diff --git a/templates/nft/views/sell.tsx b/templates/nft/views/sell.tsx index 53ba4f76..561fa246 100644 --- 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) => ( )