Added ENS support!

frontend/Dockerfile

@@ -15,7 +15,7 @@ FROM node:alpine AS builder
 WORKDIR /app
 COPY . .
 COPY --from=deps /app/node_modules ./node_modules
-RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+RUN NODE_OPTIONS=--openssl-legacy-provider yarn build && yarn install --production --ignore-scripts --prefer-offline
 
 # Production image, copy all the files and run next
 FROM node:alpine AS runner

frontend/components/Account.tsx

@@ -4,7 +4,7 @@ import { UserRejectedRequestError } from "@web3-react/injected-connector";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { injected } from "../utils/web3Connectors";
 import useENSName from "../hooks/useENSName";
-import { formatEtherscanLink, shortenHex } from "../utils/misc";
+import { formatEtherscanLink, shortenIfHex } from "../utils/misc";
 
 type Props = {
   triedToEagerConnect: boolean;
@@ -94,9 +94,9 @@ const Account = ({ triedToEagerConnect }: Props) => {
         className: "nes-btn py-1 is-primary text-sm font-semibold transition duration-150"
       }}
     >
-      {ENSName || `${shortenHex(account, 4)}`}
+      {ENSName || `${shortenIfHex(account, 12)}`}
     </a>
   );
 };
 
-export default Account;
+export default Account;

frontend/components/TileCard.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import Link from 'next/link'
 import { TileAsset } from '../types/TileAsset';
 
-import { shortenHex, formatPrice, openseaLink, cleanUrl } from "../utils/misc";
+import { shortenIfHex, formatPrice, openseaLink, cleanUrl } from "../utils/misc";
 import TileImage from './TileImage';
 
 interface TileCardProps {
@@ -27,7 +27,7 @@ export default function TileCard({tile, large}: TileCardProps) {
           </h3>
 
           <p className={"text-sm text-gray-700"}>
-            Owner: <Link href={`/owner/${tile.owner}`}>{shortenHex(tile.owner, 6)}</Link>
+            Owner: <Link href={`/owner/${tile.owner}`}>{shortenIfHex(tile.owner, 12)}</Link>
           </p>
 
           <div className="truncate">
@@ -64,4 +64,4 @@ export default function TileCard({tile, large}: TileCardProps) {
       </div>
     </>
   );
-}
+}

frontend/components/TilePopover.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { usePopperTooltip } from 'react-popper-tooltip';
-import { shortenHex, formatPrice, openseaLink, cleanUrl } from "../utils/misc";
+import { shortenIfHex, formatPrice, openseaLink, cleanUrl } from "../utils/misc";
 import TileCard from './TileCard';
 
 import { XIcon } from '@heroicons/react/outline'
@@ -46,4 +46,4 @@ export default function TilePopover({tile, referenceElement}) {
       )}
     </>
   );
-}
+}

frontend/pages/owner/[address].tsx

@@ -9,7 +9,7 @@ import { TileAsset } from '../../types/TileAsset';
 import Loader from '../../components/Loader';
 
 import TileImage from '../../components/TileImage';
-import { shortenHex, formatPrice } from "../../utils/misc";
+import { shortenIfHex, formatPrice } from "../../utils/misc";
 
 const Owner = () => {
   const router = useRouter()
@@ -56,7 +56,7 @@ const Owner = () => {
 
     { tiles && !fetching &&
       <main className="w-full max-w-7xl mx-auto mt-12 sm:mt-24 min-h-80 px-3">
-        <h1 className="text-3xl font-bold mb-4 text-white">{shortenHex(address || '')} Tiles</h1>
+        <h1 className="text-3xl font-bold mb-4 text-white">{shortenIfHex(address || '')} Tiles</h1>
         <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
         { ownedTiles.map( (ownedTile: TileAsset, index: number) => (
           <Link href={`/tile/${ownedTile.id}`} key={index} passHref={true}>

frontend/utils/misc.tsx

@@ -3,7 +3,10 @@ import { formatUnits, parseUnits } from "@ethersproject/units";
 import { parse } from "path";
 import { TileAsset } from '../types/TileAsset';
 
-export function shortenHex(hex: string, length = 4) {
+export function shortenIfHex(hex: string, length = 12) {
+  if (hex.length < length) {
+    return hex
+  }
   return `${hex.substring(0, length + 2)}…${hex.substring(
     hex.length - length
   )}`;
@@ -81,4 +84,4 @@ export const openseaLink = (id: number) => {
 
 export const convertEthToWei = (price: string) => {
   return parseUnits(price || "0", "ether");
-}
+}