Added portal to Tile House, fixed values.yaml, removed theme support for

now

Author: kenerwin88

frontend/chart/templates/deployment.yaml

@@ -24,10 +24,10 @@ spec:
         - name: {{ .Chart.Name }}
           securityContext:
             {{- toYaml .Values.securityContext | nindent 12 }}
-          image: "{{ .Values.image }}"
+          image: "{{ .Values.IMAGE }}"
           env:
           - name: NEXT_PUBLIC_API_ENDPOINT
-            value: "https://api.{{ .Values.domain }}"
+            value: "{{ .Values.API_ENDPOINT }}"
           imagePullPolicy: Always
           ports:
             - name: http
@@ -41,7 +41,7 @@ spec:
             httpGet:
               path: /
               port: http
-            initialDelaySeconds: 60
+            initialDelaySeconds: 15
           resources:
             {{- toYaml .Values.resources | nindent 12 }}
       {{- with .Values.nodeSelector }}

frontend/chart/values.yaml

@@ -3,8 +3,6 @@
 # Declare variables to be passed into your templates.
 
 replicaCount: 2
-
-image: 389059433654.dkr.ecr.us-east-1.amazonaws.com/frontend:0.2
 imagePullSecrets: []
 nameOverride: ""
 fullnameOverride: ""

frontend/chart/values/prod.yaml

@@ -1,4 +1,5 @@
 IMAGE: 389059433654.dkr.ecr.us-east-1.amazonaws.com/frontend:1.0.5
+API_ENDPOINT: https://api.pixelmap.io
 DOMAINS:
   - "pixelmap.io"
   - "pixelmap.com"

frontend/components/Account.tsx

@@ -1,7 +1,7 @@
 import MetaMaskOnboarding from "@metamask/onboarding";
 import { useWeb3React } from "@web3-react/core";
 import { UserRejectedRequestError } from "@web3-react/injected-connector";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { injected } from "../utils/web3Connectors";
 import useENSName from "../hooks/useENSName";
 import { formatEtherscanLink, shortenIfHex } from "../utils/misc";
@@ -23,7 +23,7 @@ const Account = ({ triedToEagerConnect }: Props) => {
   // initialize metamask onboarding
   const onboarding = useRef<MetaMaskOnboarding>();
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     onboarding.current = new MetaMaskOnboarding();
   }, []);
 

frontend/components/Layout.tsx

@@ -1,13 +1,11 @@
 import { useContext } from 'react';
-import { ThemeContext, ThemeSetting } from '../components/ThemeContext';
 
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 
 import styles from '../styles/pages/Home.module.scss';
 
 export default function Layout({ children }) {
-  const { theme } = useContext(ThemeContext)
   const hours = new Date().getHours();
   const isDayTime = hours > 7 && hours < 20;
 
@@ -24,4 +22,4 @@ export default function Layout({ children }) {
 
     </div>
   )
-}
+}

frontend/components/ThemeContext.tsx

@@ -1,9 +1,11 @@
 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 logo from "../public/assets/images/logo.png";
+import Image from "next/image";
 
 interface TileCardProps {
   tile: TileAsset,
@@ -20,7 +22,6 @@ export default function TileCard({tile, large}: TileCardProps) {
             <TileImage className={`${large ? "h-20 w-20 md:h-40 md:w-40" : "h-16 w-16 md:h-20 md:w-20"}`} image={tile.image} />
           </div>
         </div>
-        
         <div className={`flex-grow-1 space-y-1 ${large ? "md:space-y-3" : ""}`}>
           <h3 className={`text-gray-900 font-bold ${large ? "md:text-3xl" : "text-xl"} mb-1 relative`}>
             <span>PixelMap #{tile.id}</span>
@@ -29,35 +30,43 @@ export default function TileCard({tile, large}: TileCardProps) {
           <p className={"text-sm text-gray-700"}>
             Owner: <Link href={`/owner/${tile.owner}`}>{shortenIfHex(tile.owner, 12)}</Link>
           </p>
-          
+
           <div className="truncate">
             <a href={cleanUrl(tile.url)} className={`text-blue-600 break-all truncate text-sm whitespace-normal ${large ? 'md:text-base': ''}`} target="_blank" rel="noreferrer">{tile.url}</a>
           </div>
-      
+
         </div>
       </div>
 
       <div className={`px-4 py-3 bg-gray-50 ${large ? "md:px-8 md:py-4" : ""}`}>
         <div className="flex justify-between items-center">
-          <div>
-            <h3 className="text-sm tracking-wide font-medium text-gray-500">Price</h3>
-            <p className="font-bold text-lg ml-1">{formatPrice(tile)}</p>
-          </div>
+          <Link href={`/house/${encodeURIComponent(tile.id)}`}>
+            <div className="nes-btn is-primary flex items-center justify-between md:px-5.5 py-1 md:py-1">
+              <Image
+                className="w-full h-auto"
+                width={30}
+                height={30}
+                src={portal}
+                alt="Portal"
+              />
+              <div className="font-bold md:px-3" >{'Enter Tile'}</div>
+            </div>
+          </Link>
           <div>
             { tile.wrapped &&
-              <a className="nes-btn is-primary font-bold" target="_blank" href={openseaLink(tile.id)} rel="noreferrer">
-                {tile.openseaPrice != "0" ? 'Buy on OpenSea' : 'View on OpenSea'}
-              </a>
+            <a className="nes-btn is-primary font-bold  md:px-5.5 py-1 md:py-2.5" target="_blank" href={openseaLink(tile.id)} rel="noreferrer">
+              {tile.openseaPrice != "0" ? 'Buy for ' + formatPrice(tile) : 'View on OpenSea'}
+            </a>
             }
 
-            { !tile.wrapped && 
-              <button className="flex items-center justify-center">
-                <div>
-                  <p className="mr-2 text-green-600">Buy on Marketplace</p>
-                  <p className="text-sm text-gray-500">(Coming soon)</p>
-                </div>
-                
-              </button>
+            { !tile.wrapped &&
+            <button className="flex items-center justify-center">
+              <div>
+                <p className="mr-2 text-green-600">Not Wrapped</p>
+                <p className="text-sm text-gray-500">(Use Etherscan)</p>
+              </div>
+
+            </button>
             }
           </div>
         </div>

frontend/components/TileCard.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 
 import { Web3ReactProvider } from '@web3-react/core';
-import { ThemeProvider } from '../components/ThemeContext';
 
 import getLibrary from '../utils/getLibrary';
 import Layout from '../components/Layout'
@@ -12,11 +11,9 @@ function App({ Component, pageProps }) {
 
   return (
     <Web3ReactProvider getLibrary={getLibrary}>
-      <ThemeProvider>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </ThemeProvider>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </Web3ReactProvider>
   )
 }

frontend/components/ToggleTheme.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+
+import { fetchSingleTile } from '../../utils/api';
+
+import { TileAsset } from '../../types/TileAsset';
+import Loader from '../../components/Loader';
+
+const House = () => {
+  const [tile, setTile] = useState<TileAsset>();
+  const [fetching, setFetching] = useState(false);
+  const router = useRouter()
+  const id = router.query.id as string;
+
+  useEffect( () => {
+    setFetching(true);
+
+    fetchSingleTile(id).then( (_tile) => {
+      setTile(_tile);
+      setFetching(false);
+    });
+  }, [, id]);
+
+  return (
+    <>
+      { !tile &&
+      <>
+        <Head>
+          <title>Tile - PixelMap.io</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+      </>
+      }
+
+      { fetching &&
+      <div className="flex items-center justify-center min-h-80">
+        <Loader />
+      </div>
+      }
+
+      { tile && !fetching &&
+      <>
+        <Head>
+          <title>Tile House #{tile.id} - PixelMap.io</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+      </>
+      }
+    </>
+
+  );
+}
+
+export default House