Upgrade ETHDenver Experience

app/[slug]/page.tsx

@@ -20,7 +20,7 @@ const theme2Class = {
 
 const theme2Color = {
     frensday2023: '#2A2244',
-    ethdenver2024: '#844AFF',
+    ethdenver2024: '#888CDC',
 };
 
 export default async function ({
@@ -73,10 +73,11 @@ export default async function ({
                     </div>
                 </div>
                 <RecordsSection enstate={enstate} farcaster={farcaster} />
-                {event == 'frensday2023' && (
+                {['frensday2023', 'ethdenver2024'].includes(event) && (
                     <XMTPSection
                         address={enstate.address}
                         name={enstate.name}
+                        event={event}
                     />
                 )}
                 {iykData && (

app/styles/ethdenver24.css

@@ -1,22 +1,31 @@
 html:has(.theme-ethdenver24) {
     body, html {
-        @apply bg-gradient-to-b from-[#844AFF] to-[#844AFF] text-white;
+        @apply bg-[#888CDC] text-[#1D1C47];
     }
-    /* body:before {
+    body:before {
         content: '';
-        @apply fixed inset-0 -z-10 brightness-75;
+        @apply fixed inset-0 -z-10 opacity-25;
         background: url('/ethdenver24/bg.svg') no-repeat center center;
-    } */
+    }
     .btn {
-        @apply bg-[#FF65AF] hover:bg-[#FF65AF] active:bg-[#FF65AF] text-white;
+        @apply bg-[#1D1C47] hover:brightness-110 active:brightness-125 text-white font-bold;
+    }
+    .btn.minting {
+        @apply !bg-[#0C0B3E] !border-[#3E3D70] !text-[#3E3D70] border;
     }
     .card-bg {
-        @apply bg-[#F8F8F9] shadow-lg;
+        @apply bg-[#0C0B3E] shadow-xl shadow-[#1D1C47];
     }
     .card-body {
-        @apply text-black;
+        @apply text-white;
     }
     .link {
-        @apply text-[#FF65AF];
+        @apply text-ens-light-blue-primary underline;
+    }
+    .card-body .btn {
+        @apply bg-[#3E3D70]
+    }
+    .card-body input {
+        @apply bg-[#3E3D70] border-transparent active:border-ens-light-blue-primary;
     }
 }

components/Headers/EventHeader.tsx

@@ -12,5 +12,17 @@ export const EventHeader = ({ event }) => {
         );
     }
 
+    if (event == 'ethdenver2024') {
+        return (
+            <div className="px-6 w-full">
+                <img
+                    src="/ethdenver24/header.svg"
+                    alt="ethdenver"
+                    className="w-full h-auto mx-auto"
+                />
+            </div>
+        );
+    }
+
     return <></>;
 };

components/POAPModal/POAPModal.tsx

@@ -145,6 +145,7 @@ export const POAPModal: FC<{
                                 }}
                                 poap_name={name}
                                 event_name={event_name}
+                                event_slug={event}
                             />
                         )}
                         {state === EXPIRED_STATE && <ExpiredPOAP />}

components/POAPModal/stages/AlreadyClaimed.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { FiExternalLink } from 'react-icons/fi';
 
 export const AlreadyClaimed: FC<{ to: string }> = ({ to }) => {
     return (
@@ -15,7 +16,7 @@ export const AlreadyClaimed: FC<{ to: string }> = ({ to }) => {
                 target="_blank"
                 className="btn w-full p-4"
             >
-                View Collection
+                View Collection <FiExternalLink />
             </a>
         </div>
     );

components/POAPModal/stages/Expired.tsx

@@ -8,11 +8,10 @@ export const ExpiredPOAP: FC<{}> = () => {
             <a
                 href="https://iyk.app/admin?utm_source=ens-page&utm_campaign=expired-poap"
                 target="_blank"
-                className="link underline"
+                className="link underline whitespace-nowrap"
             >
                 via the IYK Dashboard
             </a>
-            .
         </div>
     );
 };

components/POAPModal/stages/MintToProfile.tsx

@@ -33,13 +33,14 @@ export const MintToProfile: FC<{
 
     return (
         <div className="space-y-2 w-full">
-            <div className="w-full max-w-xs mx-auto">
+            <div className="w-full max-w-xs mx-auto font-bold">
                 {getTextFromInfo(poap_name, event_slug, event_name)}
             </div>
             <div className="w-full">
                 <button
                     className={clsx(
                         'btn w-full py-3 space-x-2 transition-all',
+                        stage === 'minting' && 'minting',
                         stage === 'minted' && '!bg-ens-light-green-primary'
                     )}
                     onClick={async () => {
@@ -70,7 +71,7 @@ export const MintToProfile: FC<{
                     disabled={stage === 'minting'}
                 >
                     {stage === 'start' && 'Mint POAP'}
-                    {stage === 'minting' && 'Minting...'}
+                    {stage === 'minting' && 'Minting POAP'}
                     {stage === 'minted' && 'Minted'}
                     {stage === 'minting' && (
                         <FiLoader className="animate-spin" />

components/POAPModal/stages/NameInput.tsx

@@ -3,23 +3,25 @@ import { FC, useState } from 'react';
 import { FiLoader, FiSearch } from 'react-icons/fi';
 
 import { useEnstate } from '../../../hooks/useEnstate';
+import { getTextFromInfo } from '../settings';
 
 const eth_address_regex = /^0x[\dA-Fa-f]{40}$/;
 
 export const NameInput: FC<{
     onSubmit: (_name: string) => void;
     poap_name: string;
     event_name: string;
-}> = ({ onSubmit, poap_name, event_name }) => {
+    event_slug: string;
+}> = ({ onSubmit, poap_name, event_name, event_slug }) => {
     const [inputData, setInputData] = useState('');
     const [loading, setLoading] = useState(false);
 
     const validENS = true;
 
     return (
         <div className="w-full space-y-2">
-            <div className="w-full max-w-xs mx-auto">
-                Mint a POAP to show you met {poap_name} at {event_name}!
+            <div className="w-full max-w-xs mx-auto font-bold">
+                {getTextFromInfo(poap_name, event_slug, event_name)}
             </div>
             <form
                 className="flex justify-stretch items-stretch gap-3 w-full"

components/XMTP/section.tsx

@@ -2,17 +2,26 @@ import { FC } from 'react';
 
 import { AButton } from '../AButton/button';
 
-export const XMTPSection: FC<{ name: string; address: string }> = ({
-    name,
-    address,
-}) => {
+export const XMTPSection: FC<{
+    name: string;
+    address: string;
+    event: string;
+}> = ({ name, address, event }) => {
     return (
         <div className="text-center space-y-4 mt-4">
-            <div className="text-3xl font-bold balance px-12">
-                Send {name}
-                <wbr /> a <wbr />
-                <span className="text-[#3889FF]">frENSday</span> message
-            </div>
+            {event == 'frensday2023' ? (
+                <div className="text-3xl font-bold balance px-12">
+                    Send {name}
+                    <wbr /> a <wbr />
+                    <span className="text-[#3889FF]">frENSday</span> message
+                </div>
+            ) : (
+                <div className="text-3xl font-bold balance px-12">
+                    Message
+                    <br />
+                    {name}
+                </div>
+            )}
             <div className="flex flex-col gap-2">
                 <AButton
                     href={`https://go.cb-w.com/messaging?address=${address}`}