Implement /profile presentation and container (#1403)

* feat: add chart and start profile page

* chore: build up profile main section

* chore: adjust css to design

* chore: add mobile view

* feat: add contribution card

* chore: position xp radial chart correctly

* feat: improve contribution card view

* chore: add RecentActivity

* chore: replace xp by badge

* chore: move PageContainer into Layout

* chore: add customizability to Layout components

* test: update stories

* chore: remove lucide-react dep

* feat: add bg to circle xp bar

* feat: try filling user data

* chore: remove providers and account

* chore: fine tune CircularProgressBar

* feat: try adding compoundVariants to Toggle

* feat: add LevelPolygon

* chore: add back profile fetching

* chore: finish toggle color config

* fix: address toggle type errors

* Revert "fix: address toggle type errors"

This reverts commit e82fbc8.

* Revert "chore: finish toggle color config"

This reverts commit 913e436.

* feat: improve toggle variants

* chore: adjust spacing and remove placeholder desc

* feat: add LevelBadge

* feat: start editprofile

* refactor(css): redo profile summary

* refactor(css): improve contribution cards

* Revert "chore: remove providers and account"

This reverts commit 2c28453.

* feat: add OperatedGuildCard

* chore: add EditProfile

* feat: finish EditProfile presentation

* chore: adjust spacing in EditProfile

* fix: spread props

* feat: add delete profile view

* feat: add EditContributions

* refactor: remove cartesian grid from ActivityChart

* refactor: reduce spacing on CheckMark

* feat(LayoutFooter): accept children

* fix: remove shadow from LevelBadge

* fix(css): adjust styles

* fix(css): add padding to OperatedGuildCard

* fix(css): adjust styles to design

* chore: move profile to csr only temporarily

* UI(EditContributions): smaller button

* UI(EditProfile): adjust borders

* UI(Dialog): default footer styles

* cleanup: move const out of render function

* remove rechart & Experience section

* UI: make borders muted

* OperatedGuildCard components

* chore: remove xp metagame related components

* implement contribution container (#1430)

* feat: add useContribution

* feat: update contribution card

* chore: add EditContribution

* feat: add select contribution

* feat: add edit contribution

* chore: try adding EditContributionCard container

* feat: add image to select items

* chore: align select item padding with input

* chore: start adding swr smaller fetches

* feat: add delete update and create contribution

* feat: add create new contribution

* feat: cover contribution CRUD

* chore: remove revalidation from swr fetches

* feat: add delete loader and validation

* refactor: select placeholder fix, remove comments

* refactor: remove useAllUserRoles.tsx

* chore: use GuildLabel on ContributionCardView

* UI(OperatedGuildCard): light mode

* Implement `EditProfile` container (#1427)

* feat: add delete profile hook

* feat: add profile editing

* fix: update Header import

* chore: remove sfx from confetti

* fix: update jotai type

* chore: add comment to assertion

* chore: add ts path alias for @app dir

* refactor: apply write-check

* feat: remove profile atom and add swr hooks

* feat: add ssr to page

* feat: add profile owner guard

* feat: add ssr with swr fallback

* feat: add ssr with swr fallback for guild and role

* chore: add note why use constant api url

* chore: resolve schema errors in profile update

* refactor: revalidate on profile deletion

* UI(Avatar): smaller more count text

* add FeaturedIcon to OperatedGuildCard

* chore: break profile name and remove caretdown

* fix(CardWithGuildLabel): label in light mode

* chore: add card behind edit profile

* feat: add not found page

* feat: add color picker

* refactor: redirect to error and fetch per guild

* add optimistic update for edit contributions and profile (#1438)

* refactor: redirect to error and fetch per guild

* feat: add optimistic update to contributions

* feat: finish update contribution and polish

* feat: add optimistic update to profile

* chore: rename revalidateContribution and fix type error

* feat: memoize profile guard

* static banner style base

* UI: layout & responsivity impros

* SectionTitle component & md size on mobile

* UI(OperatedGuildCard): responsivity impros

* chore: add bg to CardWithGuildLabel

* UI(ContributionCard): responsivity impros

* update to new types package & change profileId to userId

* UI(EditProfile): subtle border for images too

* update to new types package

* feat: working color theming

* fix(ProfileColorPicker): dynamic icon color

* UI(EditProfile): inside scroll in modal

* refactor(EditProfile): batch components

* feat: background image

* fix: address client side error and remove type assertions

* feat: add referred users

* chore: switch to dev backend, cache activities

* cleanup chart colors

* refactor: use backend schemas

* fix: broken banner styles

---------

Co-authored-by: BrickheadJohnny <[email protected]>
Co-authored-by: valid <[email protected]>

.env

@@ -1,15 +1,15 @@
-NEXT_PUBLIC_API=https://api.guild.xyz/v1
-NEXT_PUBLIC_DISCORD_CLIENT_ID=868172385000509460
+NEXT_PUBLIC_API=https://api.dev.guild-api.xyz/v1
+NEXT_PUBLIC_DISCORD_CLIENT_ID=1118173473676722258
 NEXT_PUBLIC_IPFS_GATEWAY=https://guild-xyz.mypinata.cloud/ipfs/
 NEXT_PUBLIC_PINATA_API=https://api.pinata.cloud
 NEXT_PUBLIC_BALANCY_API=https://balancy.guild.xyz/api
-NEXT_PUBLIC_TG_BOT_USERNAME=guildxyz_bot
-NEXT_PUBLIC_GOOGLE_CLIENT_ID=639132320574-9v9b8d9mq7rjctmjmolsjeklkl2rlcsh.apps.googleusercontent.com
-NEXT_PUBLIC_GOOGLE_SERVICE_ACCOUNT_EMAIL=guild-xyz@guildxyz.iam.gserviceaccount.com
+NEXT_PUBLIC_TG_BOT_USERNAME=Guildxyz_dev_gcp_bot
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=829004986756-f5b265m0hscpaa0ah9cgqht02o8qea15.apps.googleusercontent.com
+NEXT_PUBLIC_GOOGLE_SERVICE_ACCOUNT_EMAIL=bvz-test-service-account@bvz-test-project.iam.gserviceaccount.com
 NEXT_PUBLIC_POSTHOG_KEY=phc_Pu6Xv72B95fHVTAKT5Xs2FPgNxrsNP4LecBqPiVAAxi
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=d851f25304d67fc8e2dd3b354223e4fa
 NEXT_PUBLIC_EDGE_CONFIG_ID=ecfg_buc5l6124c4koymyvseasbd1k3hs
 NEXT_PUBLIC_EDGE_CONFIG_READ_ACCESS_TOKEN=8b337e65-3aa6-4949-97b8-c7eab7151128
-NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcQm4onAAAAAOcoqkw9A5txg5SbuddONchMZKrF
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcMe3knAAAAAJjUyeMh1LbUcrh5k0aG0fJIZaJR
 NEXT_PUBLIC_POLYGONID_API=https://guild-privacy.s.guild.xyz
-NEXT_PUBLIC_BUGSNAG_KEY=4bd5799ac2cb4a34887513b80b845554
+NEXT_PUBLIC_BUGSNAG_KEY=4bd5799ac2cb4a34887513b80b845554

package.json

@@ -31,7 +31,7 @@
     "@emotion/styled": "^11.11.0",
     "@fuels/connectors": "^0.5.0",
     "@fuels/react": "^0.20.0",
-    "@guildxyz/types": "^1.9.38",
+    "@guildxyz/types": "^1.9.39",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@hookform/resolvers": "^3.3.4",
     "@lexical/code": "^0.12.0",
@@ -53,6 +53,8 @@
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",

src/app/(marketing)/create-profile/_hooks/useCreateProfile.tsx

@@ -16,14 +16,13 @@ export const useCreateProfile = () => {
       ...signedValidation,
     })
 
-  const submitWithSign = useSubmitWithSign<unknown>(createProfile, {
+  const submitWithSign = useSubmitWithSign<Schemas["Profile"]>(createProfile, {
     onSuccess: (response) => {
       toast({
         variant: "success",
         title: "Successfully created profile",
       })
       confettiPlayer.current("Confetti from left and right")
-      // @ts-ignore: TODO: either acquire types from backend, or type them here
       router.replace(`/profile/${response.username}`)
     },
     onError: (response) => {

src/app/(marketing)/create-profile/page.tsx

@@ -9,6 +9,7 @@ export const metadata: Metadata = {
 }
 
 const Page = () => {
+  // todo: get finetuned layout from new create-guild
   return (
     <Layout className="relative min-h-screen">
       <div
@@ -21,13 +22,13 @@ const Page = () => {
       />
       <LayoutHero>
         <Header />
-        <LayoutBanner className="-bottom-[206px] border-border border-b border-dashed">
+        <LayoutBanner className="-bottom-[206px] border-border border-b border-dashed dark:bg-banner-dark">
           <div className="absolute inset-0 bg-[auto_115%] bg-[top_5px_right_0] bg-[url('/banner.svg')] bg-repeat opacity-10" />
           <div
             className="absolute inset-0"
             style={{
               background:
-                "radial-gradient(circle at bottom, transparent 5%, hsl(var(--banner)))",
+                "radial-gradient(circle at bottom, transparent 5%, var(--banner-dark))",
             }}
           />
         </LayoutBanner>

src/app/(marketing)/profile/[username]/not-found.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@/components/ui/Button"
+import { House } from "@phosphor-icons/react/dist/ssr"
+import GuildGhost from "static/avatars/58.svg"
+
+const NotFound = () => {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8">
+      <GuildGhost className="size-24" />
+
+      <h2 className="font-black font-display text-6xl">Profile not found</h2>
+
+      <p className="font-medium"></p>
+
+      <div className="flex flex-col gap-4 sm:flex-row">
+        <a href="/explorer">
+          <Button colorScheme="primary" size="lg">
+            <House weight="bold" />
+            Go to home page
+          </Button>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default NotFound