Devcon Eligibility (#29)

Co-authored-by: Hunter Chang <[email protected]> Co-authored-by: Carlos Sánchez <[email protected]>
BuidlGuidl · Sep 6, 2024 · ece63dd · ece63dd
1 parent cea631e
commit ece63dd
Show file tree

Hide file tree

Showing 9 changed files with 387 additions and 13 deletions.
diff --git a/packages/nextjs/.env.example b/packages/nextjs/.env.example
@@ -13,4 +13,4 @@ NEXT_PUBLIC_ALCHEMY_API_KEY=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 
 # URL for the BG API (no backslash at the end)
-BG_BACKEND_API=
+NEXT_PUBLIC_BG_BACKEND_API=
diff --git a/packages/nextjs/components/AccentShape.tsx b/packages/nextjs/components/AccentShape.tsx
@@ -0,0 +1,59 @@
+export function AccentShape() {
+  return (
+    <div aria-hidden="true" className="absolute inset-x-0 -top-40 transform-gpu blur-3xl overflow-hidden sm:-top-80">
+      <div
+        style={{
+          clipPath:
+            "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+        }}
+        className="relative left-[calc(50%-10rem)] aspect-[1155/678] w-[30rem] -translate-x-1/2 rotate-[20deg] bg-gradient-to-tr from-[#FF78A5] to-[#B293FE] opacity-30 sm:left-[calc(50%-50rem)] sm:w-[70rem]"
+      />
+    </div>
+  );
+}
+
+export function AccentShapeSecondary() {
+  return (
+    <div
+      aria-hidden="true"
+      className="absolute inset-x-0 top-[20%] transform-gpu blur-3xl overflow-hidden sm:-top-[30%]"
+    >
+      <div
+        style={{
+          clipPath:
+            "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+        }}
+        className="relative left-[calc(50%+5rem)] aspect-[1155/678] w-[30rem] -translate-x-1/2 bg-gradient-to-tr from-[#FF78A5] to-[#B293FE] opacity-20 sm:left-[calc(50%+40rem)] sm:w-[70rem]"
+      />
+    </div>
+  );
+}
+
+export function AccentGrid() {
+  return (
+    <div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-base-100/70 ring-1 ring-base-100 lg:w-1/2">
+      <svg
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full stroke-base-100 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+      >
+        <defs>
+          <pattern
+            x="100%"
+            y={-1}
+            id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+            width={200}
+            height={200}
+            patternUnits="userSpaceOnUse"
+          >
+            <path d="M130 200V.5M.5 .5H200" fill="none" />
+          </pattern>
+        </defs>
+        <rect fill="#E1E5FE" width="100%" height="100%" strokeWidth={0} />
+        <svg x="100%" y={-1} className="overflow-visible fill-base-100">
+          <path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
+        </svg>
+        <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
+      </svg>
+    </div>
+  );
+}
diff --git a/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx b/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
@@ -1,17 +1,24 @@
 import { useCallback, useEffect, useState } from "react";
 import Blockies from "react-blockies";
-import { isAddress } from "viem";
-import { Address } from "viem";
+import { Address, isAddress } from "viem";
 import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
-import { CommonInputProps, InputBase } from "~~/components/scaffold-eth";
+import { InputBase } from "~~/components/scaffold-eth";
 
 // ToDo:  move this function to an utility file
 const isENS = (address = "") => address.endsWith(".eth") || address.endsWith(".xyz");
 
+interface AddressInputProps<T = string> {
+  value: T;
+  onChange: (newValue: T) => void;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
 /**
  * Address input with ENS name resolution
  */
-export const AddressInput = ({ value, name, placeholder, onChange }: CommonInputProps<Address | string>) => {
+export const AddressInput = ({ value, name, placeholder, disabled, onChange }: AddressInputProps<Address | string>) => {
   const { data: ensAddress, isLoading: isEnsAddressLoading } = useEnsAddress({
     name: value,
     enabled: isENS(value),
@@ -43,6 +50,10 @@ export const AddressInput = ({ value, name, placeholder, onChange }: CommonInput
     onChange(ensAddress);
   }, [ensAddress, onChange, value]);
 
+  useEffect(() => {
+    setEnteredEnsName(undefined);
+  }, [value]);
+
   const handleChange = useCallback(
     (newValue: Address) => {
       setEnteredEnsName(undefined);
@@ -58,23 +69,29 @@ export const AddressInput = ({ value, name, placeholder, onChange }: CommonInput
       error={ensAddress === null}
       value={value}
       onChange={handleChange}
-      disabled={isEnsAddressLoading || isEnsNameLoading}
+      disabled={isEnsAddressLoading || isEnsNameLoading || disabled}
+      className="disabled:rounded-full"
       prefix={
         ensName && (
           <div className="flex bg-base-300 rounded-l-full items-center">
             {ensAvatar ? (
-              <span className="w-[35px]">
+              <span className="w-12">
                 {
                   // eslint-disable-next-line
                   <img className="w-full rounded-full" src={ensAvatar} alt={`${ensAddress} avatar`} />
                 }
               </span>
             ) : null}
-            <span className="text-accent px-2">{enteredEnsName ?? ensName}</span>
+            <span className="text-primary px-2">{enteredEnsName ?? ensName}</span>
           </div>
         )
       }
-      suffix={value && <Blockies className="!rounded-full" seed={value?.toLowerCase() as string} size={7} scale={5} />}
+      suffix={
+        value &&
+        !ensAvatar && (
+          <Blockies className="!rounded-full mt-[2px]" seed={value?.toLowerCase() as string} size={10} scale={5} />
+        )
+      }
     />
   );
 };
diff --git a/packages/nextjs/components/scaffold-eth/Input/InputBase.tsx b/packages/nextjs/components/scaffold-eth/Input/InputBase.tsx
@@ -1,11 +1,13 @@
 import { ChangeEvent, ReactNode, useCallback } from "react";
+import clsx from "clsx";
 import { CommonInputProps } from "~~/components/scaffold-eth";
 
 type InputBaseProps<T> = CommonInputProps<T> & {
   error?: boolean;
   disabled?: boolean;
   prefix?: ReactNode;
   suffix?: ReactNode;
+  className?: string;
 };
 
 export const InputBase = <T extends { toString: () => string } | undefined = string>({
@@ -17,6 +19,7 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
   disabled,
   prefix,
   suffix,
+  className,
 }: InputBaseProps<T>) => {
   let modifier = "";
   if (error) {
@@ -33,10 +36,13 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
   );
 
   return (
-    <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
+    <div className={`flex border-2 border-gray-300 bg-base-300 rounded-full text-accent ${modifier}`}>
       {prefix}
       <input
-        className="input input-ghost focus:outline-none focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-gray-400"
+        className={clsx(
+          "input input-ghost focus:outline-none focus:bg-transparent focus:text-gray-600 h-12 min-h-12 px-4 border w-full font-medium placeholder:text-gray-400 text-gray-600 disabled:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400",
+          className,
+        )}
         placeholder={placeholder}
         name={name}
         value={value?.toString()}