address route

ensdomains · Oct 20, 2023 · 5575432 · 5575432
1 parent 6869c76
commit 5575432
Show file tree

Hide file tree

Showing 18 changed files with 493 additions and 236 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -21,7 +21,9 @@
   },
   "dependencies": {
     "@cloudflare/workers-types": "^4.20231016.0",
+    "@ensdomains/ensjs": "next",
     "@vercel/og": "^0.5.19",
+    "itty-router": "^4.0.23",
     "react": "^18.2.0",
     "viem": "^1.16.6"
   }

diff --git a/scripts/build.ts b/scripts/build.ts
@@ -19,6 +19,7 @@ const built = await esbuild.build({
   plugins: [wasmPlugin],
   alias: {
     "viem/*": "./node_modules/viem/_esm/*",
+    "@ensdomains/ensjs/*": "./node_modules/@ensdomains/ensjs/dist/esm/*",
   },
   metafile: true,
 });

diff --git a/src/components/AvatarWithEnsIcon.tsx b/src/components/AvatarWithEnsIcon.tsx
@@ -0,0 +1,37 @@
+type Props = {
+  src: string;
+};
+
+export const AvatarWithEnsIcon = ({ src }: Props) => {
+  return (
+    <div style={{ display: "flex", position: "relative" }}>
+      <img
+        style={{
+          border: "16px solid #fff",
+          borderRadius: "999px",
+          // -1px padding to remove weird border
+          padding: "-1px",
+          marginLeft: "-16px",
+          marginRight: "-16px",
+        }}
+        width="332"
+        height="332"
+        src={src}
+      />
+      <svg
+        style={{ left: "-37px", top: "-21px", position: "absolute" }}
+        xmlns="http://www.w3.org/2000/svg"
+        width="116"
+        height="116"
+        viewBox="0 0 116 116"
+        fill="none"
+      >
+        <rect width="116" height="116" rx="58" fill="white" />
+        <path
+          d="M35.45 40.0445C36.086 38.8601 37.0038 37.8504 38.1225 37.1044L56.8972 24L37.6603 55.7949C37.6603 55.7949 35.9794 52.9557 35.3239 51.5191C34.5071 49.7129 34.0951 47.7501 34.1168 45.7679C34.1386 43.7858 34.5937 41.8324 35.45 40.0445ZM27.7014 61.9775C27.9134 65.0181 28.7729 67.9782 30.2223 70.6598C31.6716 73.3415 33.6775 75.6825 36.1055 77.5264L56.872 92C56.872 92 43.8793 73.2843 32.9204 54.661C31.8109 52.6934 31.065 50.5422 30.7185 48.3104C30.5651 47.2997 30.5651 46.2717 30.7185 45.261C30.4327 45.7904 29.8781 46.8739 29.8781 46.8739C28.7669 49.1391 28.0101 51.5613 27.6342 54.0562C27.4178 56.6932 27.4403 59.3444 27.7014 61.9775ZM80.6471 64.4975C79.9746 63.0611 78.3107 60.2218 78.3107 60.2218L59.1075 92L77.8821 78.904C79.0008 78.158 79.9187 77.1484 80.5547 75.964C81.411 74.176 81.8659 72.2226 81.8879 70.2406C81.9096 68.2585 81.4976 66.2954 80.6807 64.4892L80.6471 64.4975ZM88.2695 54.0308C88.0574 50.9904 87.198 48.0301 85.7488 45.3486C84.2993 42.667 82.2934 40.3259 79.8654 38.482L59.1325 24C59.1325 24 72.1168 42.7157 83.0843 61.339C84.1907 63.3073 84.9337 65.4584 85.2777 67.6896C85.4311 68.7003 85.4311 69.7284 85.2777 70.739C85.5635 70.2096 86.1181 69.1261 86.1181 69.1261C87.2293 66.8609 87.9862 64.4387 88.3619 61.9438C88.5811 59.307 88.5615 56.6558 88.3032 54.0225L88.2695 54.0308Z"
+          fill="#3889FF"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/src/components/LargeEnsIcon.tsx b/src/components/LargeEnsIcon.tsx
@@ -0,0 +1,35 @@
+export const LargeEnsIcon = () => {
+  return (
+    <div
+      style={{
+        width: "300px",
+        height: "300px",
+        borderRadius: "999px",
+        background: "rgba(255, 255, 255, 0.15)",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="158"
+        height="175"
+        viewBox="0 0 158 175"
+        fill="none"
+      >
+        <g clip-path="url(#clip0_216_348)">
+          <path
+            d="M20.5791 41.1745C22.2227 38.135 24.5947 35.5438 27.4858 33.6294L76.0071 0L26.2912 81.5943C26.2912 81.5943 21.9473 74.3083 20.2532 70.6216C18.1421 65.9862 17.0774 60.9491 17.1336 55.8624C17.1899 50.7757 18.3659 45.7627 20.5791 41.1745ZM0.553712 97.4606C1.10155 105.264 3.32272 112.86 7.06849 119.742C10.8143 126.624 15.9982 132.631 22.2731 137.363L75.9418 174.507C75.9418 174.507 42.3635 126.477 14.0415 78.6844C11.1741 73.635 9.24653 68.1145 8.35097 62.387C7.95452 59.7934 7.95452 57.1551 8.35097 54.5616C7.61249 55.92 6.17903 58.7008 6.17903 58.7008C3.30728 64.5136 1.35148 70.7299 0.379959 77.1323C-0.179242 83.8997 -0.121087 90.7034 0.553712 97.4606ZM137.386 103.928C135.648 100.241 131.348 92.9549 131.348 92.9549L81.7192 174.507L130.24 140.898C133.131 138.984 135.503 136.393 137.147 133.354C139.36 128.765 140.536 123.752 140.593 118.666C140.649 113.579 139.584 108.542 137.473 103.906L137.386 103.928ZM157.085 77.0672C156.537 69.2648 154.316 61.6678 150.571 54.7862C146.825 47.9046 141.641 41.8967 135.366 37.1648L81.784 0C81.784 0 115.341 48.0297 143.685 95.8221C146.544 100.873 148.464 106.394 149.353 112.12C149.75 114.713 149.75 117.351 149.353 119.945C150.092 118.587 151.525 115.806 151.525 115.806C154.397 109.993 156.353 103.777 157.324 97.3742C157.891 90.6073 157.84 83.8037 157.173 77.0459L157.085 77.0672Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_216_348">
+            <rect width="158" height="175" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+};
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -0,0 +1,73 @@
+import { ReactElement } from "react";
+
+type Props = {
+  imageElement: ReactElement;
+  title: string;
+  subtitle?: string | null;
+  type: "address" | "name";
+};
+
+export const Layout = ({ imageElement, title, subtitle, type }: Props) => {
+  return (
+    <div
+      style={{
+        gap: "48px",
+        paddingLeft: "100px",
+        paddingRight: "129px",
+        width: "1200px",
+        height: "630px",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        background:
+          "linear-gradient(331deg, #4CB6F2 14.47%, #7298F8 59.89%, #8598FB 96.38%)",
+      }}
+    >
+      {imageElement}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "24px",
+          alignItems: "flex-start",
+          justifyContent: "center",
+        }}
+      >
+        <h1
+          style={{
+            display: "block",
+            margin: 0,
+            color: "#FFF",
+            fontFamily: "Satoshi",
+            fontSize: type === "name" ? "90px" : "76px",
+            fontStyle: "normal",
+            fontWeight: 830,
+            lineHeight: "93%",
+            maxWidth: "630px",
+            whiteSpace: "no-wrap" as any,
+            textOverflow: "ellipsis",
+            wordBreak: "break-word",
+            lineClamp: '3 "...  "',
+          }}
+        >
+          {type === "name" ? title.replace(/\./g, ".\u200B") : title}
+        </h1>
+        {subtitle && (
+          <p
+            style={{
+              margin: 0,
+              color: "rgba(255, 255, 255, 0.65)",
+              fontFamily: "Satoshi",
+              fontSize: "40px",
+              fontStyle: "normal",
+              fontWeight: 700,
+              lineHeight: "75%",
+            }}
+          >
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};