diff --git a/packages/nextjs/pages/overview/[id].tsx b/packages/nextjs/pages/overview/[id].tsx index b61d0b3b..e3e8bb77 100644 --- a/packages/nextjs/pages/overview/[id].tsx +++ b/packages/nextjs/pages/overview/[id].tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { WithRouterProps } from "next/dist/client/with-router"; import Image from "next/image"; import Link from "next/link"; @@ -59,6 +59,8 @@ const Page = ({ router }: WithRouterProps) => { const isOwner = useIsOwner(deedData); const fileClient = useFileClient(); + const picturesRef = useRef(); + useEffect(() => { if (router.isReady && !isConnecting) { setIsLoading(true); @@ -66,16 +68,6 @@ const Page = ({ router }: WithRouterProps) => { } }, [router.isReady, isConnecting, authToken]); - const pictures = - deedData?.propertyDetails.propertyImages - ?.filter(x => !!x.fileId && !x.restricted) - ?.map(image => getTargetNetwork().ipfsGateway + image.fileId) ?? []; - if (pictures.length < 4) { - for (let index = pictures.length; index < 4; index++) { - pictures.push(`/images/residential${index + 1}.png`); - } - } - const handleChange = (ev: LightChangeEvent) => { setDeedData((prevState: DeedInfoModel) => ({ ...prevState, [ev.name]: ev.value })); }; @@ -104,6 +96,17 @@ const Page = ({ router }: WithRouterProps) => { if (resp.ok && resp.value) { setInitialData(resp.value); setDeedData(resp.value); + const pictures = + resp.value?.propertyDetails.propertyImages + ?.filter(x => !!x.fileId && !x.restricted) + ?.map(image => getTargetNetwork().ipfsGateway + image.fileId) ?? []; + + if (pictures.length < 4) { + for (let index = pictures.length; index < 4; index++) { + pictures.push(`/images/residential${index + 1}.png`); + } + } + picturesRef.current = pictures; if (resp.value.mintedId && id === resp.value.id) { await router.replace(`/overview/${resp.value.mintedId}`, undefined, { shallow: true }); } @@ -116,7 +119,7 @@ const Page = ({ router }: WithRouterProps) => { } }, [id, deedData.mintedId, chainId, authToken, isValidator], - ); + ).bind(this); const handleErrorClick = async () => { if (errorCode === "unexpected") { @@ -297,7 +300,7 @@ const Page = ({ router }: WithRouterProps) => { {/* Images */}
- {pictures?.slice(0, 4).map((picture, index) => { + {picturesRef.current?.slice(0, 4).map((picture, index) => { return (
= { deedSubgraph: "http://localhost:8000/subgraphs/name/Deed3", ipfsGateway: "http://localhost:8080/ipfs/", }, - [chains.mainnet.id]: { - color: "#ff8b9e", - storageAddress: "0x91B0d67D3F47A30FBEeB159E67209Ad6cb2cE22E", - deedMintingFeeDollar: 0, - stableCoin: { - address: "0x0000000000", - decimals: 18, - symbol: "ETH", - }, - }, [chains.arbitrum.id]: { color: "#28a0f0", - storageAddress: "arb1:0x84F1d8D4B10b1C56e032aE09bCA57f393638cd4E", + storageAddress: "0x84F1d8D4B10b1C56e032aE09bCA57f393638cd4E", deedMintingFeeDollar: 500, stableCoin: { address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", decimals: 6, symbol: "USDC", }, + ipfsGateway: "https://ipfs.io/ipfs/", + blockExplorer: "https://arbiscan.io/", }, [chains.sepolia.id]: { color: "#2bbdf7", @@ -58,7 +50,6 @@ export const NETWORKS_EXTRA_DATA: Record = { decimals: 18, symbol: "DAI", }, - deedSubgraph: "https://api.studio.thegraph.com/query/56229/deed3-sepolia/version/latest", ipfsGateway: "https://ipfs.io/ipfs/", blockExplorer: "https://blockscout.com/xdai/mainnet", }, @@ -75,6 +66,16 @@ export const NETWORKS_EXTRA_DATA: Record = { }, blockExplorer: "https://polygonscan.com/", }, + [chains.mainnet.id]: { + color: "#ff8b9e", + storageAddress: "0x91B0d67D3F47A30FBEeB159E67209Ad6cb2cE22E", + deedMintingFeeDollar: 0, + stableCoin: { + address: "0x0000000000", + decimals: 18, + symbol: "ETH", + }, + }, // [chains.hardhat.id]: { // color: "#b8af0c", // nativeCurrencyTokenAddress: "0x0000000000",