feat(faucet): Add in the learn more dialog (#367)

* Add in the learn more dialog * Update FaucetHeaderInner.tsx * Update FaucetHeaderInner.tsx
ethereum-optimism · Jun 10, 2024 · b469e90 · b469e90
1 parent a532879
commit b469e90
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 15 deletions.
diff --git a/apps/dapp-console/app/faucet/components/FaucetHeaderInner.tsx b/apps/dapp-console/app/faucet/components/FaucetHeaderInner.tsx
@@ -3,6 +3,12 @@ import { Button } from '@eth-optimism/ui-components/src/components/ui/button/but
 import { RiArrowRightSLine } from '@remixicon/react'
 import { Authentications } from '@/app/faucet/types'
 import { faucetRoutes } from '@/app/constants'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+} from '@eth-optimism/ui-components/src/components/ui/dialog/dialog'
+import { LearnMoreDialogContent } from '@/app/faucet/components/LearnMoreDialogContent'
 
 type Props = {
   signedIn: boolean
@@ -23,11 +29,12 @@ const seeDetailsLink = (
 
 const FaucetHeaderInner = ({ signedIn, wallet, authentications }: Props) => {
   const hasAuthentication = Object.values(authentications).some(Boolean)
+  let content = null
 
   if (!signedIn) {
     // User is not signed in
-    return (
-      <div>
+    content = (
+      <>
         <Text as="h3" className="text-base font-semibold mb-2">
           Sign in to use the faucet
         </Text>
@@ -36,12 +43,12 @@ const FaucetHeaderInner = ({ signedIn, wallet, authentications }: Props) => {
           network every 24 hours. {seeDetailsLink}
         </Text>
         <Button>Sign in</Button>
-      </div>
+      </>
     )
   } else if (!wallet) {
     // User is signed in, but no wallet is connected
-    return (
-      <div>
+    content = (
+      <>
         <Text as="h3" className="text-base font-semibold mb-2">
           Get maximum testnet tokens
         </Text>
@@ -51,12 +58,12 @@ const FaucetHeaderInner = ({ signedIn, wallet, authentications }: Props) => {
           {seeDetailsLink}
         </Text>
         <Button>Connect Wallet</Button>
-      </div>
+      </>
     )
   } else if (wallet && !hasAuthentication) {
     // User is signed in and wallet is connected, but no authentications
-    return (
-      <div>
+    content = (
+      <>
         <Text as="h3" className="text-base font-semibold mb-2">
           Your connected wallet doesn’t have onchain identity
         </Text>
@@ -68,14 +75,27 @@ const FaucetHeaderInner = ({ signedIn, wallet, authentications }: Props) => {
           <Text as="p" className="text-sm text-secondary-foreground">
             For more tokens, verify your onchain identity.
           </Text>
-          <Button variant="link" size="sm" className="text-accent-foreground">
-            See details <RiArrowRightSLine size={18} />
-          </Button>
+          <DialogTrigger asChild>
+            <Button variant="link" size="sm" className="text-accent-foreground">
+              Learn more <RiArrowRightSLine size={18} />
+            </Button>
+          </DialogTrigger>
         </div>
         <Button variant="secondary">Disconnect</Button>
-      </div>
+      </>
     )
   }
+
+  return (
+    <div>
+      <Dialog>
+        {content}
+        <DialogContent>
+          <LearnMoreDialogContent />
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
 }
 
 export { FaucetHeaderInner }
diff --git a/apps/dapp-console/app/faucet/components/LearnMoreDialogContent.tsx b/apps/dapp-console/app/faucet/components/LearnMoreDialogContent.tsx
@@ -0,0 +1,77 @@
+import { Button } from '@eth-optimism/ui-components/src/components/ui/button/button'
+import { Text } from '@eth-optimism/ui-components/src/components/ui/text/text'
+
+const LearnMoreDialogContent = () => {
+  const authenticationMethods = [
+    {
+      label: 'Coinbase Verification',
+      description: null,
+      image: '/logos/coinbase-logo.png',
+      url: '',
+    },
+    {
+      label: 'EAS',
+      description: 'Valid within 7 days',
+      image: '/logos/eas-logo.png',
+      url: '',
+    },
+    {
+      label: 'Gitcoin',
+      description: 'Passport score > 25',
+      image: '/logos/gitcoin-logo.png',
+      url: '',
+    },
+    {
+      label: 'World ID',
+      description: null,
+      image: '/logos/worldid-logo.png',
+      url: '',
+    },
+  ]
+  return (
+    <div>
+      <Text as="h1" className="text-lg font-semibold">
+        Get maximum testnet tokens
+      </Text>
+      <Text as="p" className="text-muted-foreground">
+        Verify your onchain identity to get 1 test ETH on 1 test network every
+        24 hours. Superchain faucet supports 4 kinds of onchain identity:
+      </Text>
+      <div className="flex flex-col py-4 gap-4">
+        {authenticationMethods.map((method) => (
+          <div
+            key={method.label}
+            className="flex justify-between items-center gap-2"
+          >
+            <div className="flex items-center gap-3">
+              <img
+                src={method.image}
+                alt={method.label}
+                className="w-10 h-10 rounded-full"
+              />
+              <div>
+                <Text as="p" className="text-base font-semibold">
+                  {method.label}
+                </Text>
+                <Text as="p" className="text-sm text-muted-foreground">
+                  {method.description}
+                </Text>
+              </div>
+            </div>
+            <Button variant="outline" asChild>
+              <a href={method.url} target="_blank" rel="noreferrer noopener">
+                <Text as="span">Learn more</Text>
+              </a>
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Text as="p" className="text-sm text-muted-foreground">
+        Connect a wallet associated with any of the options above to verify your
+        onchain identity. For World ID Orb, click sign in with World ID.
+      </Text>
+    </div>
+  )
+}
+
+export { LearnMoreDialogContent }
diff --git a/apps/dapp-console/app/faucet/components/LogoChain.tsx b/apps/dapp-console/app/faucet/components/LogoChain.tsx
@@ -14,8 +14,8 @@ const LogoChain = () => {
           key={index}
           src={image}
           alt="Logo"
-          height={24}
-          width={24}
+          height={36}
+          width={36}
           style={{
             zIndex: index,
             marginLeft: index === images.length - 1 ? 0 : '-12px',

diff --git a/packages/ui-components/src/components/ui/input/input.tsx b/packages/ui-components/src/components/ui/input/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}