Introduce Creeper & POAP Dismiss

.github/.k8s/.gitignore

@@ -0,0 +1 @@
+secret.yaml

.github/.k8s/deploy.yaml

@@ -3,7 +3,7 @@ apiVersion: apps/v1
 kind: Deployment
 metadata:
   name: ens-page
-  namespace: default
+  namespace: ens-page
 spec:
   replicas: 1
   selector:
@@ -21,3 +21,6 @@ spec:
           ports:
             - containerPort: 3000
           resources: {}
+          envFrom:
+            - secretRef:
+                name: iyk-api-key

.github/.k8s/ingress.yaml

@@ -3,7 +3,7 @@ apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
   name: ens-page
-  namespace: default
+  namespace: ens-page
   annotations:
     cert-manager.io/cluster-issuer: le-http
 spec:

.github/.k8s/svc.yaml

@@ -2,7 +2,7 @@ apiVersion: v1
 kind: Service
 metadata:
   name: ens-page
-  namespace: default
+  namespace: ens-page
 spec:
   ports:
     - port: 3000

Makefile

@@ -0,0 +1,5 @@
+rollout:
+	kubectl rollout restart -n ens-page deployments/ens-page
+
+status:
+	kubectl get pods -n ens-page -o wide

components/POAPModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { FiX } from 'react-icons/fi';
 
 import { IYKRefResponse as IYKReferenceResponse } from '../hooks/useIYKRef';
 import { POAPMetadata } from '../hooks/usePOAPData';
@@ -10,10 +11,19 @@ export const POAPModal: FC<{
     name: string;
     metadata: POAPMetadata;
 }> = ({ data, name, metadata }) => {
+    const [dismissed, setDismissed] = useState(false);
+
+    if (dismissed) return;
+
     return (
         <div className="fixed bottom-0 inset-x-0 px-3 pb-4">
             <div className="w-full max-w-md mx-auto">
                 <div className="p-4 text-center relative">
+                    <img
+                        src="/creeper.svg"
+                        alt=""
+                        className="absolute top-0 left-4 h-12"
+                    />
                     <div className="absolute inset-x-0 bottom-0 top-12 bg-[#14032C] rounded-3xl -z-10"></div>
                     <div className="w-24 h-24 bg-slate-100 rounded-full mx-auto">
                         <img
@@ -27,7 +37,17 @@ export const POAPModal: FC<{
                             Mint POAP
                         </div>
                     </div>
-                    Claim your POAP to show you met {name} at frENSday!
+                    <button
+                        className="absolute right-4 top-16 text-xl opacity-50"
+                        onClick={() => {
+                            setDismissed(true);
+                        }}
+                    >
+                        <FiX />
+                    </button>
+                    <div className="w-full max-w-xs mx-auto">
+                        Claim your POAP to show you met {name} at frENSday!
+                    </div>
                 </div>
             </div>
         </div>

hooks/useIYKRef.ts

@@ -20,6 +20,24 @@ export type IYKRefResponse = {
     linkedToken: IYKLinkedToken;
 };
 
+const DEBUG_VALUE = {
+    uid: '1304147270046608',
+    isValidRef: true,
+    poapEvents: [
+        {
+            id: 22_278,
+            poapEventId: 127_866,
+            otp: '7AalDLzTKE92NMLRlPquu',
+            status: 'expired',
+        },
+    ],
+    linkedToken: {
+        contractAddress: '0x6b26ca239e522ac80d636aafd61d339a90ca694d',
+        chainId: 137,
+        tokenId: '12971',
+    },
+};
+
 export const useIYKRef = async (reference?: string) => {
     if (!reference) return;
 
@@ -29,5 +47,8 @@ export const useIYKRef = async (reference?: string) => {
 
     if (!response.ok) return;
 
-    return (await response.json()) as IYKRefResponse;
+    const result: IYKRefResponse = await response.json();
+
+    // return DEBUG_VALUE;
+    return result;
 };