fix: make avatar size properly image, disable

guildxyz · Jul 30, 2024 · eb7df35 · eb7df35
1 parent dde0aa3
commit eb7df35
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/next.config.js b/next.config.js
@@ -88,6 +88,9 @@ const nextConfig = {
       {
         hostname: "og.link3.to",
       },
+      {
+        hostname: "imagedelivery.net"
+      }
     ],
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },

diff --git a/src/app/(marketing)/create-profile/_components/StartProfile.tsx b/src/app/(marketing)/create-profile/_components/StartProfile.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { ConnectFarcasterButton } from "@/components/Account/components/AccountModal/components/FarcasterProfile"
-import { Avatar } from "@/components/ui/Avatar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
 import {
   FormControl,
@@ -16,7 +16,6 @@ import { cn } from "@/lib/utils"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Spinner, UploadSimple, User } from "@phosphor-icons/react"
 import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
-import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar"
 import useUser from "components/[guild]/hooks/useUser"
 import useDropzone from "hooks/useDropzone"
 import usePinata from "hooks/usePinata"
@@ -126,19 +125,25 @@ export const StartProfile: OnboardingChain = () => {
               <Button
                 variant="unstyled"
                 type="button"
+                disabled={method === undefined}
                 className={cn(
                   "mb-8 size-36 self-center rounded-full border-2 border-dotted",
                   { "border-solid": field.value }
                 )}
                 {...getRootProps()}
               >
                 <Avatar className="size-36 bg-card-secondary">
-                  <AvatarImage
-                    src={field.value}
-                    width={144}
-                    height={144}
-                  ></AvatarImage>
-                  <AvatarFallback>{avatarFallBackIcon}</AvatarFallback>
+                  {field.value && (
+                    <AvatarImage
+                      src={field.value}
+                      width={144}
+                      height={144}
+                      alt="profile avatar"
+                    />
+                  )}
+                  <AvatarFallback className="bg-card-secondary">
+                    {avatarFallBackIcon}
+                  </AvatarFallback>
                 </Avatar>
               </Button>
             )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,6 +88,9 @@ const nextConfig = { @@
           {
             hostname: "og.link3.to",
           },
+          {
+            hostname: "imagedelivery.net"
+          }
         ],
         contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
       },
@@ Expand Down @@