From 6daf79159abb85f7962f1571cca4f82bd7e4767e Mon Sep 17 00:00:00 2001 From: Ken Erwin Date: Tue, 4 Jan 2022 18:51:37 -0500 Subject: [PATCH] Redeployed, now using shared types --- backend/chart/values.yaml | 2 +- backend/src/metadata/metadata.service.ts | 2 +- frontend/chart/values/prod.yaml | 2 +- frontend/components/EditTile.tsx | 167 +++++++++++++---------- frontend/components/Map.tsx | 8 +- frontend/components/MapTiles.tsx | 30 ++-- frontend/components/TileCard.tsx | 90 ++++++++---- frontend/components/TileOverlay.tsx | 29 ++-- frontend/pages/edit/index.tsx | 23 ++-- frontend/pages/house/[id].tsx | 78 +++++------ frontend/pages/owner/[address].tsx | 98 +++++++------ frontend/pages/tile/[id].tsx | 85 ++++++------ frontend/pages/timecapsule/index.tsx | 7 - frontend/pages/wrap/index.tsx | 21 ++- frontend/utils/api.tsx | 4 +- frontend/utils/misc.tsx | 6 +- 16 files changed, 353 insertions(+), 299 deletions(-) diff --git a/backend/chart/values.yaml b/backend/chart/values.yaml index 92bbff6..51c2ea4 100644 --- a/backend/chart/values.yaml +++ b/backend/chart/values.yaml @@ -14,7 +14,7 @@ OPENSEA_API_KEY: "" SYNC_TO_AWS: "true" replicaCount: 1 -image: 389059433654.dkr.ecr.us-east-1.amazonaws.com/backend:1.2.11 +image: 389059433654.dkr.ecr.us-east-1.amazonaws.com/backend:1.2.13 imagePullSecrets: [] nameOverride: "" fullnameOverride: "" diff --git a/backend/src/metadata/metadata.service.ts b/backend/src/metadata/metadata.service.ts index 2884a2a..0b23e8a 100644 --- a/backend/src/metadata/metadata.service.ts +++ b/backend/src/metadata/metadata.service.ts @@ -147,7 +147,7 @@ export class MetadataService { } else { await fs.writeFileSync('cache/metadata/' + tile.id + '.json', JSON.stringify(tileMetaData, null, 2)); // Write data for /tile endpoint - await fs.writeFileSync('cache/tile/' + tile.id, JSON.stringify(pixelMapTile, null, 2)); + await fs.writeFileSync('cache/tile/' + tile.id + '.json', JSON.stringify(pixelMapTile, null, 2)); await this.cacheManager.set('metadata-' + String(tile.id), jsonMetaData); } } diff --git a/frontend/chart/values/prod.yaml b/frontend/chart/values/prod.yaml index 1f01db9..7884cb7 100644 --- a/frontend/chart/values/prod.yaml +++ b/frontend/chart/values/prod.yaml @@ -1,4 +1,4 @@ -IMAGE: 389059433654.dkr.ecr.us-east-1.amazonaws.com/frontend:1.2.8 +IMAGE: 389059433654.dkr.ecr.us-east-1.amazonaws.com/frontend:1.2.13 API_ENDPOINT: https://api.pixelmap.io DOMAINS: - "pixelmap.io" diff --git a/frontend/components/EditTile.tsx b/frontend/components/EditTile.tsx index 8cd0080..5d39f14 100644 --- a/frontend/components/EditTile.tsx +++ b/frontend/components/EditTile.tsx @@ -1,42 +1,47 @@ -import { Disclosure,} from '@headlessui/react' +import { Disclosure } from "@headlessui/react"; -import TileImage from './TileImage'; -import { openseaLink, formatPrice } from '../utils/misc'; +import TileImage from "./TileImage"; +import { openseaLink, formatPrice } from "../utils/misc"; -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/outline' -import {TileAsset} from "../types/TileAsset"; +import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/outline"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; type Props = { - tile: TileAsset; + tile: PixelMapTile; index: number; handleImageEditor; handleLinkChange; handlePriceChange; handleSave; -} +}; -function EditTile({tile, index, handleImageEditor, handleLinkChange, handlePriceChange, handleSave}: Props) { +function EditTile({ + tile, + index, + handleImageEditor, + handleLinkChange, + handlePriceChange, + handleSave, +}: Props) { return ( {({ open }) => (
- - +
- + Tile #{tile.id}
- { open && - - } + {open && } - { !open && - - } + {!open && }
@@ -44,74 +49,92 @@ function EditTile({tile, index, handleImageEditor, handleLinkChange, handlePrice <>
- -
-
-
- - handleLinkChange(e.target.value, index)} - /> +
- - { !tile.wrapped && +
-
- } - { tile.wrapped && -
-

- Price: {formatPrice(tile)} -

- Set the price on OpenSea -
- } + {!tile.wrapped && ( +
+ +
+ + handlePriceChange(e.target.value, index) + } + /> + + ETH + +
+
+ )} -
+ {tile.wrapped && ( +
+

Price: {formatPrice(tile)}

+ + Set the price on{" "} + + OpenSea + + +
+ )} +
+ className="mt-3 ml-auto nes-btn is-primary transition duration-150 font-medium" + onClick={() => handleSave(tile)} + > + Save changes +
)} - ) + ); } -export default EditTile; \ No newline at end of file +export default EditTile; diff --git a/frontend/components/Map.tsx b/frontend/components/Map.tsx index 47fb55b..db70e2e 100644 --- a/frontend/components/Map.tsx +++ b/frontend/components/Map.tsx @@ -1,12 +1,12 @@ import React, { useState, useEffect } from "react"; import { useWeb3React } from "@web3-react/core"; -import { TileAsset } from "../types/TileAsset"; import MapToggles from "./MapToggles"; import MapTiles from "./MapTiles"; import TileOverlay from "./TileOverlay"; import styles from "../styles/components/Map.module.scss"; import getConfig from "next/config"; import Image from "next/image"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; const { publicRuntimeConfig } = getConfig(); export default function Map(props: any) { @@ -28,7 +28,7 @@ export default function Map(props: any) { useEffect(() => { setOwnedTiles( - props.tiles.filter((tile: TileAsset) => { + props.tiles.filter((tile: PixelMapTile) => { return ( account && account != "" && @@ -38,8 +38,8 @@ export default function Map(props: any) { ); setForSaleTiles( - props.tiles.filter((tile: TileAsset) => { - return tile.openseaPrice && tile.openseaPrice != "0.00"; + props.tiles.filter((tile: PixelMapTile) => { + return tile.openseaPrice && tile.openseaPrice != 0; }) ); }, [props.tiles, account]); diff --git a/frontend/components/MapTiles.tsx b/frontend/components/MapTiles.tsx index 9400f58..1afcdad 100644 --- a/frontend/components/MapTiles.tsx +++ b/frontend/components/MapTiles.tsx @@ -1,29 +1,27 @@ import React, { useState } from "react"; -import { TileAsset } from '../types/TileAsset'; +import TilePopover from "./TilePopover"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; -import TilePopover from './TilePopover'; - -function MapTiles({tiles}) { - let [currentTile, setCurrentTile] = useState(); - let [tileElement, setTileElement] = useState() +function MapTiles({ tiles }) { + let [currentTile, setCurrentTile] = useState(); + let [tileElement, setTileElement] = useState(); const handleClick = (tileIndex: number, ref: HTMLButtonElement) => { setCurrentTile(tiles[tileIndex]); setTileElement(ref); - } + }; return ( <> - { tiles.map( (tile: TileAsset, idx: number) => ( - + handleClick(idx, e.currentTarget); + }} + className="block nes-pointer w-4 h-4 ring-green-600 hover:ring hover:bg-green-500 hover:bg-opacity-40 hover:ring-opacity-100" + > ))} @@ -31,4 +29,4 @@ function MapTiles({tiles}) { ); } -export default React.memo(MapTiles); \ No newline at end of file +export default React.memo(MapTiles); diff --git a/frontend/components/TileCard.tsx b/frontend/components/TileCard.tsx index 16242bf..e81b019 100644 --- a/frontend/components/TileCard.tsx +++ b/frontend/components/TileCard.tsx @@ -1,30 +1,50 @@ import React, { useState } from "react"; -import Link from 'next/link' -import { TileAsset } from '../types/TileAsset'; -import portal from '../public/assets/images/portal.gif'; -import { shortenIfHex, formatPrice, openseaLink, cleanUrl } from "../utils/misc"; -import TileImage from './TileImage'; +import Link from "next/link"; +import portal from "../public/assets/images/portal.gif"; +import { + shortenIfHex, + formatPrice, + openseaLink, + cleanUrl, +} from "../utils/misc"; +import TileImage from "./TileImage"; import logo from "../public/assets/images/logo.png"; import Image from "next/image"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; interface TileCardProps { - tile: TileAsset, - large?: boolean + tile: PixelMapTile; + large?: boolean; } -export default function TileCard({tile, large}: TileCardProps) { +export default function TileCard({ tile, large }: TileCardProps) { const ownerName = tile.ens ? tile.ens : shortenIfHex(tile.owner, 12); return ( <> -
+
- +
-

+

PixelMap #{tile.id}

@@ -33,9 +53,17 @@ export default function TileCard({tile, large}: TileCardProps) {

-
@@ -50,25 +78,31 @@ export default function TileCard({tile, large}: TileCardProps) { src={portal} alt="Portal" /> -
{'Enter Tile'}
+
{"Enter Tile"}
- { tile.wrapped && - - {tile.openseaPrice != "0" ? 'Buy for ' + formatPrice(tile) : 'View on OpenSea'} - - } - - { !tile.wrapped && - - } + {!tile.wrapped && ( + + )}
diff --git a/frontend/components/TileOverlay.tsx b/frontend/components/TileOverlay.tsx index c67a801..fa24896 100644 --- a/frontend/components/TileOverlay.tsx +++ b/frontend/components/TileOverlay.tsx @@ -1,29 +1,28 @@ import React from "react"; -import { TileAsset } from '../types/TileAsset'; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; -function TileOverlay({tiles, bgColor}) { +function TileOverlay({ tiles, bgColor }) { return ( <> - { tiles.map( (tile: TileAsset, idx: number) => { - let y = Math.floor( (tile.id ) / 81 ) + 1; - let x = (tile.id + 1) - ( (y - 1) * 81); - + {tiles.map((tile: PixelMapTile, idx: number) => { + let y = Math.floor(tile.id / 81) + 1; + let x = tile.id + 1 - (y - 1) * 81; + return (
- -
+ gridColumnStart: `${x}`, + gridColumnEnd: `auto`, + gridRowStart: `${y}`, + gridRowEnd: `auto`, + }} + > ); })} ); } -export default React.memo(TileOverlay); \ No newline at end of file +export default React.memo(TileOverlay); diff --git a/frontend/pages/edit/index.tsx b/frontend/pages/edit/index.tsx index 8b89c7a..28162a5 100644 --- a/frontend/pages/edit/index.tsx +++ b/frontend/pages/edit/index.tsx @@ -4,8 +4,6 @@ import Head from "next/head"; import { useWeb3React } from "@web3-react/core"; import { Contract } from "@ethersproject/contracts"; -import { TileAsset } from "../../types/TileAsset"; - import EditTile from "../../components/EditTile"; import ImageEditorModal from "../../components/ImageEditorModal"; @@ -21,12 +19,15 @@ import { } from "../../constants/addresses"; import getConfig from "next/config"; import Layout from "../../components/Layout"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; function Edit() { - const [tiles, setTiles] = useState([]); - const [ownedTiles, setOwnedTiles] = useState([]); + const [tiles, setTiles] = useState([]); + const [ownedTiles, setOwnedTiles] = useState([]); const [isOpenImageEditor, setIsOpenImageEditor] = useState(false); - const [imageEditorTile, setImageEditorTile] = useState({ id: 0 }); + const [imageEditorTile, setImageEditorTile] = useState({ + id: 0, + }); const { publicRuntimeConfig } = getConfig(); const { account, library } = useWeb3React(); @@ -38,11 +39,11 @@ function Edit() { useEffect(() => { if (account) { - let owned = tiles.filter((tile: TileAsset) => { + let owned = tiles.filter((tile: PixelMapTile) => { return tile.owner.toLowerCase() === account.toLowerCase(); }); - owned = owned.map((tile: TileAsset) => { + owned = owned.map((tile: PixelMapTile) => { return tile; }); @@ -69,7 +70,7 @@ function Edit() { const handleImageChange = (image: string) => { let _tiles = ownedTiles; - _tiles = _tiles.map((tile: TileAsset) => { + _tiles = _tiles.map((tile: PixelMapTile) => { if (tile.id === imageEditorTile.id) { tile.image = image; } @@ -80,12 +81,12 @@ function Edit() { setOwnedTiles([..._tiles]); }; - const openImageEditor = (tile: TileAsset) => { + const openImageEditor = (tile: PixelMapTile) => { setImageEditorTile(tile); setIsOpenImageEditor(true); }; - const handleSave = (tile: TileAsset) => { + const handleSave = (tile: PixelMapTile) => { console.log(tile.image); let compressedImage = compressTileCode(tile.image); console.log(compressedImage); @@ -122,7 +123,7 @@ function Edit() { Edit your tiles
- {ownedTiles.map((ownedTile: TileAsset, index: number) => ( + {ownedTiles.map((ownedTile: PixelMapTile, index: number) => ( { - const [tile, setTile] = useState(); + const [tile, setTile] = useState(); const [fetching, setFetching] = useState(false); - const router = useRouter() + const router = useRouter(); const id = router.query.id as string; - useEffect( () => { + useEffect(() => { setFetching(true); - fetchSingleTile(id).then( (_tile) => { + fetchSingleTile(id).then((_tile) => { setTile(_tile); setFetching(false); }); @@ -28,35 +28,36 @@ const House = () => { return ( <>
-
+
-
- { !tile && - <> - - Tile - PixelMap.io - - - - } +
+ {!tile && ( + <> + + Tile - PixelMap.io + + + + )} - { fetching && -
- -
- } + {fetching && ( +
+ +
+ )} - { tile && !fetching && - <> - - Tile House #{tile.id} - PixelMap.io - - - - } + {tile && !fetching && ( + <> + + Tile House #{tile.id} - PixelMap.io + + + + )}
{
- ); -} +}; -export default House +export default House; diff --git a/frontend/pages/owner/[address].tsx b/frontend/pages/owner/[address].tsx index 5c99dec..bbab33c 100644 --- a/frontend/pages/owner/[address].tsx +++ b/frontend/pages/owner/[address].tsx @@ -1,46 +1,44 @@ -import React, { useEffect, useState } from 'react'; -import Head from 'next/head' -import Link from 'next/link' -import { useRouter } from 'next/router' +import React, { useEffect, useState } from "react"; +import Head from "next/head"; +import Link from "next/link"; +import { useRouter } from "next/router"; -import { fetchTiles } from '../../utils/api'; +import { fetchTiles } from "../../utils/api"; -import { TileAsset } from '../../types/TileAsset'; -import Loader from '../../components/Loader'; +import Loader from "../../components/Loader"; -import TileImage from '../../components/TileImage'; +import TileImage from "../../components/TileImage"; import { shortenIfHex, formatPrice } from "../../utils/misc"; import Layout from "../../components/Layout"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; const Owner = () => { - const router = useRouter() + const router = useRouter(); - const [tiles, setTiles] = useState([]); - const [ownedTiles, setOwnedTiles] = useState([]); + const [tiles, setTiles] = useState([]); + const [ownedTiles, setOwnedTiles] = useState([]); const [fetching, setFetching] = useState(false); - + const address = router.query.address as string; - useEffect( () => { + useEffect(() => { setFetching(true); - fetchTiles().then( (_tiles) => { + fetchTiles().then((_tiles) => { setTiles(_tiles); setFetching(false); }); }, []); - useEffect( () => { - if( address ) { - let owned = tiles.filter( (tile: TileAsset) => { + useEffect(() => { + if (address) { + let owned = tiles.filter((tile: PixelMapTile) => { return tile.owner.toLowerCase() === address.toLowerCase(); }); setOwnedTiles(owned); } - - }, [address, tiles] ); - + }, [address, tiles]); return ( <> @@ -49,34 +47,44 @@ const Owner = () => { - { fetching && -
- -
- } + {fetching && ( +
+ +
+ )} - { tiles && !fetching && -
-

{shortenIfHex(address || '')} Tiles

-
- { ownedTiles.map( (ownedTile: TileAsset, index: number) => ( - - - - ))} -
-
- } + Tile #{ownedTile.id} + + + ))} +
+ + )} - ); -} +}; -export default Owner +export default Owner; diff --git a/frontend/pages/tile/[id].tsx b/frontend/pages/tile/[id].tsx index b8231ba..39a151b 100644 --- a/frontend/pages/tile/[id].tsx +++ b/frontend/pages/tile/[id].tsx @@ -1,24 +1,24 @@ -import React, { useEffect, useState } from 'react'; -import Head from 'next/head' -import { useRouter } from 'next/router' +import React, { useEffect, useState } from "react"; +import Head from "next/head"; +import { useRouter } from "next/router"; -import { fetchSingleTile } from '../../utils/api'; +import { fetchSingleTile } from "../../utils/api"; -import { TileAsset } from '../../types/TileAsset'; -import Loader from '../../components/Loader'; -import TileCard from '../../components/TileCard'; +import Loader from "../../components/Loader"; +import TileCard from "../../components/TileCard"; import Layout from "../../components/Layout"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; const Tile = () => { - const [tile, setTile] = useState(); + const [tile, setTile] = useState(); const [fetching, setFetching] = useState(false); - const router = useRouter() + const router = useRouter(); const id = router.query.id as string; - useEffect( () => { + useEffect(() => { setFetching(true); - fetchSingleTile(id).then( (_tile) => { + fetchSingleTile(id).then((_tile) => { setTile(_tile); setFetching(false); }); @@ -26,39 +26,38 @@ const Tile = () => { return ( <> - { !tile && - <> - - Tile - PixelMap.io - - - - } - - { fetching && -
- -
- } - - { tile && !fetching && - <> - - Tile #{tile.id} - PixelMap.io - - - -
-
- + {!tile && ( + <> + + Tile - PixelMap.io + + + + )} + + {fetching && ( +
+ +
+ )} + + {tile && !fetching && ( + <> + + Tile #{tile.id} - PixelMap.io + + + +
+
+ +
-
- - - } + + + )} - ); -} +}; -export default Tile +export default Tile; diff --git a/frontend/pages/timecapsule/index.tsx b/frontend/pages/timecapsule/index.tsx index f8ee5c7..fe9ccc5 100644 --- a/frontend/pages/timecapsule/index.tsx +++ b/frontend/pages/timecapsule/index.tsx @@ -9,16 +9,9 @@ import { TimeCapsuleTile, } from "../../utils/api"; -import { TileAsset } from "../../types/TileAsset"; -import Loader from "../../components/Loader"; import styles from "../../styles/pages/Home.module.scss"; import Image from "next/image"; import Header from "../../components/Header"; -import TileImage from "../../components/TileImage"; -import Link from "next/link"; -import { cleanUrl, formatPrice, openseaLink } from "../../utils/misc"; -import portal from "../../public/assets/images/portal.gif"; -import EditTile from "../../components/EditTile"; const TimeCapsule = () => { const large = true; diff --git a/frontend/pages/wrap/index.tsx b/frontend/pages/wrap/index.tsx index f9c87d1..cb7809f 100644 --- a/frontend/pages/wrap/index.tsx +++ b/frontend/pages/wrap/index.tsx @@ -4,8 +4,6 @@ import Head from "next/head"; import { useWeb3React } from "@web3-react/core"; import { Contract } from "@ethersproject/contracts"; -import { TileAsset } from "../../types/TileAsset"; - import WrapTile from "../../components/WrapTile"; import Account from "../../components/Account"; @@ -20,10 +18,11 @@ import { WRAPPED_PIXELMAP_CONTRACT, } from "../../constants/addresses"; import Layout from "../../components/Layout"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; function Wrap() { - const [tiles, setTiles] = useState([]); - const [ownedTiles, setOwnedTiles] = useState([]); + const [tiles, setTiles] = useState([]); + const [ownedTiles, setOwnedTiles] = useState([]); const { account, library } = useWeb3React(); @@ -37,11 +36,11 @@ function Wrap() { useEffect(() => { if (account) { - let owned = tiles.filter((tile: TileAsset) => { + let owned = tiles.filter((tile: PixelMapTile) => { return tile.owner.toLowerCase() === account.toLowerCase(); }); - owned = owned.map((tile: TileAsset) => { + owned = owned.map((tile: PixelMapTile) => { return tile; }); @@ -58,7 +57,7 @@ function Wrap() { setOwnedTiles([..._tiles]); }; - const handleSave = async (tile: TileAsset, index: number) => { + const handleSave = async (tile: PixelMapTile, index: number) => { setTileErrorMessage(tile, index, ""); try { @@ -78,7 +77,7 @@ function Wrap() { } }; - const handleWrap = async (tile: TileAsset, index: number) => { + const handleWrap = async (tile: PixelMapTile, index: number) => { setTileErrorMessage(tile, index, ""); try { @@ -93,7 +92,7 @@ function Wrap() { } }; - const handleRefresh = async (tile: TileAsset, index: number) => { + const handleRefresh = async (tile: PixelMapTile, index: number) => { setTileErrorMessage(tile, index, ""); let _tiles = ownedTiles; @@ -122,7 +121,7 @@ function Wrap() { }; const setTileErrorMessage = ( - tile: TileAsset, + tile: PixelMapTile, index: number, error: string ) => { @@ -171,7 +170,7 @@ function Wrap() { {account && (
- {ownedTiles.map((ownedTile: TileAsset, index: number) => ( + {ownedTiles.map((ownedTile: PixelMapTile, index: number) => ( { @@ -19,7 +19,7 @@ export const fetchSingleTile = async (id: string) => { let tile: PixelMapTile; try { - const res = await fetch(`https://pixelmap.art/tile/${id}`); + const res = await fetch(`https://pixelmap.art/tile/${id}.json`); tile = await res.json(); } catch (err) {} diff --git a/frontend/utils/misc.tsx b/frontend/utils/misc.tsx index 23befa5..23ea3c8 100644 --- a/frontend/utils/misc.tsx +++ b/frontend/utils/misc.tsx @@ -1,7 +1,7 @@ import { BigNumber, BigNumberish } from "@ethersproject/bignumber"; import { formatUnits, parseUnits } from "@ethersproject/units"; import { parse } from "path"; -import { TileAsset } from "../types/TileAsset"; +import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile"; export function shortenIfHex(hex: string, length = 12) { if (hex.length < length) { @@ -57,10 +57,10 @@ export const cleanUrl = (url: string) => { } }; -export const formatPrice = (tile: TileAsset) => { +export const formatPrice = (tile: PixelMapTile) => { let price = tile.openseaPrice; - if (price === "0.0") { + if (price === 0.0) { return "–"; }