From c86d5ffa96a2015470a860f3f0022c0879d1c292 Mon Sep 17 00:00:00 2001
From: Lucemans <luc@lucemans.nl>
Date: Sat, 7 Oct 2023 00:19:14 +0000
Subject: [PATCH] Introduce Creeper & POAP Dismiss

---
 .github/.k8s/.gitignore   |  1 +
 .github/.k8s/deploy.yaml  |  5 ++++-
 .github/.k8s/ingress.yaml |  2 +-
 .github/.k8s/svc.yaml     |  2 +-
 Makefile                  |  5 +++++
 components/POAPModal.tsx  | 24 ++++++++++++++++++++++--
 hooks/useIYKRef.ts        | 23 ++++++++++++++++++++++-
 public/creeper.svg        | 17 +++++++++++++++++
 8 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 .github/.k8s/.gitignore
 create mode 100644 Makefile
 create mode 100644 public/creeper.svg

diff --git a/.github/.k8s/.gitignore b/.github/.k8s/.gitignore
new file mode 100644
index 0000000..4a424df
--- /dev/null
+++ b/.github/.k8s/.gitignore
@@ -0,0 +1 @@
+secret.yaml
diff --git a/.github/.k8s/deploy.yaml b/.github/.k8s/deploy.yaml
index 707876f..eb626e7 100644
--- a/.github/.k8s/deploy.yaml
+++ b/.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
diff --git a/.github/.k8s/ingress.yaml b/.github/.k8s/ingress.yaml
index 33fd49e..9dfb327 100644
--- a/.github/.k8s/ingress.yaml
+++ b/.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:
diff --git a/.github/.k8s/svc.yaml b/.github/.k8s/svc.yaml
index 3fbfaa5..247f85b 100644
--- a/.github/.k8s/svc.yaml
+++ b/.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
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..ae67ff5
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,5 @@
+rollout:
+	kubectl rollout restart -n ens-page deployments/ens-page
+
+status:
+	kubectl get pods -n ens-page -o wide
diff --git a/components/POAPModal.tsx b/components/POAPModal.tsx
index 0cce5a3..867bb82 100644
--- a/components/POAPModal.tsx
+++ b/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>
diff --git a/hooks/useIYKRef.ts b/hooks/useIYKRef.ts
index a4aaead..ce39025 100644
--- a/hooks/useIYKRef.ts
+++ b/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;
 };
diff --git a/public/creeper.svg b/public/creeper.svg
new file mode 100644
index 0000000..43a50ae
--- /dev/null
+++ b/public/creeper.svg
@@ -0,0 +1,17 @@
+<svg width="112" height="49" viewBox="0 0 112 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_127_205)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M94.6678 18.1301C97.9631 23.2379 99.9907 29.2597 100.285 35.7699L104.987 139.875C105.364 148.218 99.9395 155.719 91.8986 157.973L55.7688 168.104L16.3943 178.075C13.2064 178.883 10.5801 175.515 12.14 172.62L24.6352 149.429C25.9776 146.938 26.712 144.164 26.7786 141.335L29.2444 36.5378C29.6839 17.8594 44.5094 2.70993 63.1739 1.86682C71.1352 1.5072 78.603 3.79542 84.7249 7.953C92.9006 4.23722 98.7971 4.22502 104.996 10.9138C96.3155 12.2472 95.3511 15.6903 94.6683 18.1282C94.6681 18.1289 94.6679 18.1295 94.6678 18.1301Z" fill="#00DF8C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M94.6678 18.1301C97.9631 23.2379 99.9907 29.2597 100.285 35.7699L104.987 139.875C105.364 148.218 99.9395 155.719 91.8986 157.973L55.7688 168.104L16.3943 178.075C13.2064 178.883 10.5801 175.515 12.14 172.62L24.6352 149.429C25.9776 146.938 26.712 144.164 26.7786 141.335L29.2444 36.5378C29.6839 17.8594 44.5094 2.70993 63.1739 1.86682C71.1352 1.5072 78.603 3.79542 84.7249 7.953C92.9006 4.23722 98.7971 4.22502 104.996 10.9138C96.3155 12.2472 95.3511 15.6903 94.6683 18.1282C94.6681 18.1289 94.6679 18.1295 94.6678 18.1301Z" fill="url(#paint0_linear_127_205)"/>
+<ellipse cx="1.18142" cy="2.02328" rx="1.18142" ry="2.02328" transform="matrix(-0.998981 0.0451255 0.0451255 0.998981 83.8467 35.3511)" fill="#2A2D74"/>
+<ellipse cx="1.18142" cy="2.02328" rx="1.18142" ry="2.02328" transform="matrix(-0.998981 0.0451255 0.0451255 0.998981 76.8907 35.6655)" fill="#2A2D74"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_127_205" x1="31.737" y1="171.314" x2="93.2419" y2="13.3651" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1FEBF2"/>
+<stop offset="1" stop-color="#1FEBF2" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_127_205">
+<rect width="112" height="49" fill="white"/>
+</clipPath>
+</defs>
+</svg>