From d225fedde28597d15e33c167a0e0d8a4bd4065e2 Mon Sep 17 00:00:00 2001
From: jdnichollsc <jdnichollsc@hotmail.com>
Date: Tue, 17 Dec 2024 13:27:50 -0500
Subject: [PATCH 1/3] add supabase and tailwind utils

---
 web/.env.example                            |   3 +-
 web/app/components/Navigation.tsx           |   6 +-
 web/app/components/dialogs/StyledDialog.tsx |   4 +-
 web/app/components/dialogs/WalletDialog.tsx |   4 +-
 web/app/components/ui/Avatar.tsx            |   4 +-
 web/app/components/ui/Badge.tsx             |   4 +-
 web/app/components/ui/Button.tsx            |   4 +-
 web/app/components/ui/Figure.tsx            |   7 +-
 web/app/components/ui/Pagination.tsx        |   4 +-
 web/app/components/ui/ThemeButton.tsx       |   6 +-
 web/app/components/ui/header/Header.tsx     |   4 +-
 web/app/components/ui/search/Search.tsx     |   4 +-
 web/app/constants/api.server.ts             |   6 +
 web/app/constants/api.ts                    |   2 -
 web/app/constants/index.ts                  |   2 +-
 web/app/env.server.ts                       |   3 +-
 web/app/pages/Author.tsx                    | 393 ++++++++++++++------
 web/app/pages/Marketplace.tsx               |   4 +-
 web/app/root.tsx                            |   7 +-
 web/app/utils/misc.server.ts                |   1 +
 web/app/utils/styles.ts                     |   6 +
 web/app/utils/supabase.ts                   |   5 +
 web/package-lock.json                       | 212 +++++++++++
 web/package.json                            |   2 +
 24 files changed, 541 insertions(+), 156 deletions(-)
 create mode 100644 web/app/constants/api.server.ts
 delete mode 100644 web/app/constants/api.ts
 create mode 100644 web/app/utils/styles.ts
 create mode 100644 web/app/utils/supabase.ts

diff --git a/web/.env.example b/web/.env.example
index bf550a5..5230657 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -1,4 +1,5 @@
 SESSION_SECRET=fill_me
 SHYFT_API_KEY=fill_me
 WALLET_NETWORK=devnet
-WALLET_ADDRESS=fill_me
\ No newline at end of file
+WALLET_ADDRESS=fill_me
+SUPABASE_KEY=fill_me
\ No newline at end of file
diff --git a/web/app/components/Navigation.tsx b/web/app/components/Navigation.tsx
index ac47475..0d60a8c 100644
--- a/web/app/components/Navigation.tsx
+++ b/web/app/components/Navigation.tsx
@@ -1,7 +1,7 @@
 import { Link, useLocation } from '@remix-run/react'
-import clsx from 'clsx'
 
 import { NAVIGATION } from '~/constants'
+import { cn } from '~/utils/styles'
 
 export type NavigationProps = {
   className?: string
@@ -11,7 +11,7 @@ export const Navigation: React.FC<NavigationProps> = ({ className }) => {
   const location = useLocation()
 
   return (
-    <nav className={clsx('text-base lg:text-sm', className)}>
+    <nav className={cn('text-base lg:text-sm', className)}>
       <ul className="space-y-9">
         {NAVIGATION.map((section) => (
           <li key={section.title}>
@@ -25,7 +25,7 @@ export const Navigation: React.FC<NavigationProps> = ({ className }) => {
                 <li key={link.href} className="relative">
                   <Link
                     to={link.href}
-                    className={clsx(
+                    className={cn(
                       'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
                       link.href === location.pathname
                         ? 'font-semibold text-sky-500 before:bg-sky-500'
diff --git a/web/app/components/dialogs/StyledDialog.tsx b/web/app/components/dialogs/StyledDialog.tsx
index 4b7d857..bdbf0e9 100644
--- a/web/app/components/dialogs/StyledDialog.tsx
+++ b/web/app/components/dialogs/StyledDialog.tsx
@@ -1,9 +1,9 @@
 import { Dialog } from '@headlessui/react';
-import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import type { PropsWithChildren } from 'react';
 
 import { transitionVariants } from '../../utils/motion';
+import { cn } from '~/utils/styles';
 
 interface StyledDialogProps extends PropsWithChildren {
   isOpen: boolean;
@@ -46,7 +46,7 @@ export default function StyledDialog({
             initial="growOut"
             animate="growIn"
             exit="growOut"
-            className={clsx(
+            className={cn(
               `flex w-full max-w-[92rem] items-center justify-center`,
               className
             )}
diff --git a/web/app/components/dialogs/WalletDialog.tsx b/web/app/components/dialogs/WalletDialog.tsx
index 5137c86..624eb07 100755
--- a/web/app/components/dialogs/WalletDialog.tsx
+++ b/web/app/components/dialogs/WalletDialog.tsx
@@ -1,11 +1,11 @@
 import { Dialog } from '@headlessui/react'
 import { Link } from '@remix-run/react'
-import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 
 import { useSolanaWallet } from '~/hooks'
 import { transitionVariants } from '~/utils/motion'
+import { cn } from '~/utils/styles'
 
 interface WalletDialogProps {
   className?: string
@@ -53,7 +53,7 @@ export default function WalletDialog({
             initial="growOut"
             animate="growIn"
             exit="growOut"
-            className={clsx(
+            className={cn(
               `flex w-full max-w-2xl items-center justify-center bg-light p-5 rounded-3xl`,
               className
             )}
diff --git a/web/app/components/ui/Avatar.tsx b/web/app/components/ui/Avatar.tsx
index 4588036..82cf5c2 100644
--- a/web/app/components/ui/Avatar.tsx
+++ b/web/app/components/ui/Avatar.tsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import { cn } from '~/utils/styles'
 import type {
   HTMLAttributes,
   PropsWithChildren,
@@ -23,7 +23,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
     const link = href ?? '#'
     return (
       <div
-        className={clsx('flex items-start gap-3 pt-3', className)}
+        className={cn('flex items-start gap-3 pt-3', className)}
         ref={innerRef}
         {...rest}
       >
diff --git a/web/app/components/ui/Badge.tsx b/web/app/components/ui/Badge.tsx
index 8ad00d3..2f968f7 100644
--- a/web/app/components/ui/Badge.tsx
+++ b/web/app/components/ui/Badge.tsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import { cn } from '~/utils/styles'
 import React, { HTMLAttributes } from 'react'
 
 type BadgeProps = HTMLAttributes<HTMLSpanElement>
@@ -6,7 +6,7 @@ type BadgeProps = HTMLAttributes<HTMLSpanElement>
 const Badge: React.FC<BadgeProps> = ({ children, className, ...rest }) => {
   return (
     <span
-      className={clsx(
+      className={cn(
         'mr-2 rounded bg-gray-200 px-2.5 py-2 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300',
         className
       )}
diff --git a/web/app/components/ui/Button.tsx b/web/app/components/ui/Button.tsx
index 6edf284..35d26c1 100644
--- a/web/app/components/ui/Button.tsx
+++ b/web/app/components/ui/Button.tsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import { cn } from '~/utils/styles'
 import React, { ButtonHTMLAttributes } from 'react'
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
@@ -11,7 +11,7 @@ const Button: React.FC<ButtonProps> = ({
 }) => {
   return (
     <button
-      className={clsx(
+      className={cn(
         'text-sm text-white md:text-base flex-shrink-0 rounded-md border-4 border-dark-gray bg-dark-gray dark:border-primary dark:bg-primary py-2 px-5 hover:border-gray-800 hover:bg-gray-800 dark:hover:border-primary-tint dark:hover:bg-primary-tint focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2',
         className
       )}
diff --git a/web/app/components/ui/Figure.tsx b/web/app/components/ui/Figure.tsx
index d9742d3..c89b3e9 100644
--- a/web/app/components/ui/Figure.tsx
+++ b/web/app/components/ui/Figure.tsx
@@ -1,6 +1,5 @@
-import clsx from 'clsx'
 import React from 'react'
-
+import { cn } from '~/utils/styles'
 import { with3DHover } from '~/hocs'
 
 type FigureProps = React.DetailedHTMLProps<
@@ -24,7 +23,7 @@ const Figure: React.FC<FigureProps> = ({
 }) => {
   return (
     <figure
-      className={clsx(
+      className={cn(
         'relative max-w-2xl cursor-pointer grayscale filter transition-all duration-300 hover:grayscale-0',
         className
       )}
@@ -32,7 +31,7 @@ const Figure: React.FC<FigureProps> = ({
     >
       <a href={link}>
         <img
-          className={clsx('rounded-2xl bg-indigo-50 object-cover', imgClass)}
+          className={cn('rounded-2xl bg-indigo-50 object-cover', imgClass)}
           src={imgSrc}
           alt={imgAlt}
         />
diff --git a/web/app/components/ui/Pagination.tsx b/web/app/components/ui/Pagination.tsx
index 129c839..51acb52 100644
--- a/web/app/components/ui/Pagination.tsx
+++ b/web/app/components/ui/Pagination.tsx
@@ -1,6 +1,6 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid'
-import clsx from 'clsx'
 import React, { PropsWithChildren } from 'react'
+import { cn } from '~/utils/styles'
 
 type PaginationProps = PropsWithChildren & {
   className?: string
@@ -9,7 +9,7 @@ type PaginationProps = PropsWithChildren & {
 const Pagination: React.FC<PaginationProps> = ({ className }) => {
   return (
     <nav
-      className={clsx('isolate -space-x-px', className)}
+      className={cn('isolate -space-x-px', className)}
       aria-label="Pagination"
     >
       <a
diff --git a/web/app/components/ui/ThemeButton.tsx b/web/app/components/ui/ThemeButton.tsx
index b904f54..9f4217d 100644
--- a/web/app/components/ui/ThemeButton.tsx
+++ b/web/app/components/ui/ThemeButton.tsx
@@ -1,9 +1,7 @@
-
 import { MoonIcon } from '@heroicons/react/20/solid'
 import { SunIcon } from '@heroicons/react/24/outline'
-
-import clsx from 'clsx'
 import React, { ButtonHTMLAttributes } from 'react'
+import { cn } from '~/utils/styles'
 
 import { THEME } from '~/constants'
 import { useTheme } from '~/theme'
@@ -18,7 +16,7 @@ const ThemeButton: React.FC<ThemeButtonProps> = ({ className, ...rest }) => {
         setTheme((prev) => (prev === THEME.DARK ? THEME.LIGHT : THEME.DARK))
       }
       type="button"
-      className={clsx(
+      className={cn(
         'inline-flex flex-none flex-shrink-0 items-center p-2 text-black',
         className
       )}
diff --git a/web/app/components/ui/header/Header.tsx b/web/app/components/ui/header/Header.tsx
index 1db63d2..c73e3d1 100644
--- a/web/app/components/ui/header/Header.tsx
+++ b/web/app/components/ui/header/Header.tsx
@@ -1,7 +1,6 @@
 import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { Link } from '@remix-run/react'
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
-import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import React, { useState } from 'react'
 import useOnclickOutside from 'react-cool-onclickoutside'
@@ -12,6 +11,7 @@ import { useScroll } from '~/hooks'
 import { MobileNavigation } from '../mobile/Navigation'
 import Search from '../search/Search'
 import ThemeButton from '../ThemeButton'
+import { cn } from '~/utils/styles'
 
 
 type HeaderProps = {
@@ -43,7 +43,7 @@ const Header: React.FC<HeaderProps> = ({ title = 'ConcertX' }) => {
     <AnimatePresence initial={false}>
       <header
         ref={headerRef}
-        className={clsx(
+        className={cn(
           'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-primary-contrast px-4 py-1 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-2xl sm:px-6 lg:px-8',
           isScrolled
             ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
diff --git a/web/app/components/ui/search/Search.tsx b/web/app/components/ui/search/Search.tsx
index 75da9d5..017ec4c 100644
--- a/web/app/components/ui/search/Search.tsx
+++ b/web/app/components/ui/search/Search.tsx
@@ -1,6 +1,6 @@
 import { MagnifyingGlassIcon, MicrophoneIcon } from '@heroicons/react/20/solid';
 import React, { useId } from 'react';
-import clsx from 'clsx';
+import { cn } from '~/utils/styles';
 
 type SearchProps = {
   className?: string;
@@ -12,7 +12,7 @@ type SearchProps = {
 const Search: React.FC<SearchProps> = ({ className, autoFocus, onFocus, onBlur }) => {
   const searchId = useId();
   return (
-    <form className={clsx('flex items-center', className)}>
+    <form className={cn('flex items-center', className)}>
       <label htmlFor={searchId} className="sr-only">
         Search
       </label>
diff --git a/web/app/constants/api.server.ts b/web/app/constants/api.server.ts
new file mode 100644
index 0000000..a505afb
--- /dev/null
+++ b/web/app/constants/api.server.ts
@@ -0,0 +1,6 @@
+import { canUseDOM } from '~/utils/dom';
+import { supabaseKey } from '~/utils/misc.server';
+
+export const SHYFT_API_URL = 'https://api.shyft.to';
+export const SUPABASE_URL = 'https://puonyupeanorfbpjfvpu.supabase.co';
+export const SUPABASE_KEY = canUseDOM ? window.ENV.SUPABASE_KEY : supabaseKey;
diff --git a/web/app/constants/api.ts b/web/app/constants/api.ts
deleted file mode 100644
index 2c0c9c8..0000000
--- a/web/app/constants/api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const SHYFT_API_URL = 'https://api.shyft.to';
-
diff --git a/web/app/constants/index.ts b/web/app/constants/index.ts
index b5fb20b..9099904 100644
--- a/web/app/constants/index.ts
+++ b/web/app/constants/index.ts
@@ -1,5 +1,5 @@
 export * from './links';
 export * from './navigation';
 export * from './theme';
-export * from './api';
+export * from './api.server';
 export * from './wallet';
diff --git a/web/app/env.server.ts b/web/app/env.server.ts
index 5d11c0c..4c98ea1 100644
--- a/web/app/env.server.ts
+++ b/web/app/env.server.ts
@@ -1,9 +1,10 @@
-import { shyftApiKey, walletNetwork } from '~/utils/misc.server';
+import { shyftApiKey, supabaseKey, walletNetwork } from '~/utils/misc.server';
 
 export function getEnv() {
   return {
     WALLET_NETWORK: walletNetwork,
     SHYFT_API_KEY: shyftApiKey,
+    SUPABASE_KEY: supabaseKey,
   };
 }
 
diff --git a/web/app/pages/Author.tsx b/web/app/pages/Author.tsx
index 0195d01..1669c99 100644
--- a/web/app/pages/Author.tsx
+++ b/web/app/pages/Author.tsx
@@ -1,135 +1,292 @@
-import { motion } from "framer-motion";
-import Button from "~/components/ui/Button";
-import { useGetAllNFTs } from "~/hooks";
-import { useListNFT } from "~/hooks/nfts/useListNFT";
+import { useNavigate } from '@remix-run/react'
+import { motion } from 'framer-motion'
+import { format } from 'date-fns'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
 
-export type AuthorPageProps = {
-  address: string;
-  network: string;
-  marketplaceAddress: string;
-  username?: string;
-  imgSrc?: string;
-}
+import { MotionAvatar } from '~/components/motion'
+import Button from '~/components/ui/Button'
+import { transitionVariants } from '~/utils/motion'
+import { Tab } from '@headlessui/react'
+import { cn } from '~/utils/styles'
+
+const events = [
+  {
+    id: 1,
+    title: 'Acoustical Sessions',
+    totalRaised: 40,
+    totalRaisedUsd: '$369.99',
+    totalGoal: 250,
+    totalGoalUsd: '$2,312.41',
+    endingIn: '2h 9m 21s',
+    image: '/assets/acoustical-sessions.jpg'
+  },
+  {
+    id: 2,
+    title: 'Online Innings Festival Concert',
+    totalRaised: 169491,
+    totalRaisedUsd: '$1,599,950.4',
+    totalGoal: 350,
+    totalGoalUsd: '$3,304',
+    endingIn: '3h 7m 14s',
+    image: '/assets/innings-festival.jpg'
+  },
+  {
+    id: 3,
+    title: 'Cover concert',
+    totalRaised: 158.89,
+    totalRaisedUsd: '$1,499,921.6',
+    status: 'Ended',
+    endDate: '16/11/21',
+    image: '/assets/cover-concert.jpg'
+  }
+]
+
+const activities = [
+  {
+    id: 1,
+    type: 'contribution',
+    amount: '0.1 SOL',
+    date: new Date(),
+    event: 'Acoustical Sessions'
+  },
+  {
+    id: 2,
+    type: 'created',
+    date: new Date(),
+    event: 'Online Summer Festival'
+  }
+]
+
+const followers = [
+  {
+    id: 1,
+    name: 'Alice Cooper',
+    username: '@alicecooper',
+    avatar: 'https://avatars.githubusercontent.com/u/2154886?s=40&v=4'
+  },
+  {
+    id: 2,
+    name: 'David Gilmour',
+    username: '@dgilmour',
+    avatar: 'https://avatars.githubusercontent.com/u/2154886?s=40&v=4'
+  }
+]
 
-const AuthorPage: React.FC<AuthorPageProps> = ({
-  address,
-  network,
-  marketplaceAddress,
-  username = '@jdnichollsc',
-  imgSrc = "/assets/concerx.jpg"
-}) => {
-  const { status: nftsStatus, data } = useGetAllNFTs({ address });
-  const nfts = data?.result ?? [];
+const AuthorPage = () => {
+  const navigate = useNavigate()
 
-  const { status: listStatus, listNFT } = useListNFT({ sellerWallet: address, network, marketplaceAddress })
+  const handleViewEvent = () => {
+    navigate('/event')
+  }
 
   return (
-    <section className="container mx-auto px-5 py-8 md:py-12 lg:px-14 flex gap-10 flex-col md:flex-row">
-      <aside className="lg:w-1/4 w-full">
-        <div>
-          <img
-            className="inline-block h-24 w-24 rounded-full"
-            src={imgSrc}
-            alt=""
-          />
-          <motion.h1
-            layout="position"
-            layoutId="author-name"
-            className="pt-8 text-3xl font-bold tracking-tight text-dark-gray dark:text-dark md:text-2xl lg:text-3xl xl:text-5xl"
-          >
-            Author
-          </motion.h1>
-          <div>
-            <p className="pt-2 text-base font-semibold text-dark-gray dark:text-dark">
-              {username}
-            </p>
-          </div>
-          <motion.p
-            layout="position"
-            layoutId="event-description"
-            className="mt-6 text-sm font-normal text-dark-gray dark:text-dark"
-          >
-            Lorem Ipsum is simply dummy text of the printing and typesetting
-            industry. Lorem Ipsum has been the industry's standard dummy text
-            ever since the 1500s, when an unknown printer took a galley of
-            type and scrambled it to make a type specimen book. It has
-            survived not only five centuries, but also the leap into
-            electronic typesetting, remaining essentially unchanged.
-          </motion.p>
-        <div className="mt-3 flex flex-row">
-          
-        </div>
-          <div className="mt-3 flex flex-row gap-2 justify-around">
-            <div className="py-5 lg:py-0">
-              <h2 className="text-sm font-semibold uppercase text-dark-gray dark:text-dark">
-                Following
+    <div className="container mx-auto px-4 py-8 lg:px-8">
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col md:flex-row md:gap-8">
+          {/* Left Column - Author Profile */}
+          <aside className="md:w-80">
+            {/* Author Image */}
+            <div className="mb-6">
+              <img
+                src="https://avatars.githubusercontent.com/u/2154886?s=400&v=4"
+                alt="Josephine Lee"
+                className="h-20 w-20 rounded-full object-cover"
+              />
+            </div>
+
+            {/* Author Info */}
+            <div className="mb-6">
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                Josephine Lee
+              </h1>
+              <div className="mt-1 flex items-center gap-x-2 text-sm text-gray-500">
+                <span>@Josephine_Lee</span>
+                <span>·</span>
+                <span>Joined Aug 31st 2021</span>
+              </div>
+            </div>
+
+            {/* Stats Row */}
+            <div className="mb-6 flex items-center gap-6">
+              <div className="flex items-center gap-1">
+                <span className="text-base font-semibold text-gray-900 dark:text-white">9</span>
+                <span className="text-sm text-gray-500">Following</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <span className="text-base font-semibold text-gray-900 dark:text-white">294</span>
+                <span className="text-sm text-gray-500">Followers</span>
+              </div>
+              <Button
+                className="ml-auto rounded-full bg-gray-900 px-4 py-1 text-sm font-semibold text-white hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+                onClick={() => {}}
+              >
+                Follow
+              </Button>
+            </div>
+
+            {/* Bio */}
+            <div className="mb-6">
+              <h2 className="mb-2 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+                BIO
               </h2>
-              <p className="mt-4 text-2xl font-bold tracking-tight text-dark-gray dark:text-dark">
-                40
+              <p className="text-sm text-gray-500">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
               </p>
             </div>
-            <div className="py-5 lg:py-0">
-              <h2 className="text-sm font-semibold uppercase text-dark-gray dark:text-dark">
-                Followers
+
+            {/* Wallet Address */}
+            <div>
+              <h2 className="mb-2 text-sm font-semibold uppercase text-gray-900 dark:text-white">
+                ADDRESS
               </h2>
-              <p className="mt-4 text-2xl font-bold tracking-tight text-dark-gray dark:text-dark">
-                40
-              </p>
+              <div className="flex items-center gap-2 rounded-lg bg-gray-100 px-3 py-2 dark:bg-gray-800">
+                <span className="text-sm text-gray-600 dark:text-gray-300">
+                  nickname.near
+                </span>
+                <button
+                  type="button"
+                  className="ml-auto text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
+                  onClick={() => {}}
+                >
+                  <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+                </button>
+              </div>
             </div>
-            <button
-              type="button"
-              className="inline-flex items-center gap-x-1.5 rounded-md bg-transparent px-3 py-2 text-sm font-semibold text-dark-gray dark:text-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:ring-gray-900"
-            >
-              Follow
-            </button>
-          </div>
-        </div>
-      </aside>
+          </aside>
 
-      <section className="lg:w-3/4 w-full mt-6 lg:col-span-2 lg:mt-0 xl:col-span-3">
-        <h2>
-          NFTs
-        </h2>
+          {/* Right Column - Content */}
+          <div className="flex-1">
+            <Tab.Group as="div">
+              <Tab.List className="flex space-x-1 border-b border-gray-200">
+                {['Events', 'Activity', 'Followers'].map((tab) => (
+                  <Tab
+                    key={tab}
+                    className={({ selected }) =>
+                      cn(
+                        'relative min-w-0 flex-1 overflow-hidden py-4 text-sm font-medium text-center focus:z-10 focus:outline-none',
+                        selected
+                          ? 'text-blue-600 border-b-2 border-blue-600'
+                          : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
+                      )
+                    }
+                  >
+                    {tab}
+                  </Tab>
+                ))}
+              </Tab.List>
 
-        <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8 xl:grid-cols-3">
-          {nfts.map(({ mint, name, image_uri, attributes }) => (
-            <article key={mint} className="flex flex-col rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-slate-900">
-              <a href={`/product/${mint}`}>
-                <img className="rounded-t-lg" src={image_uri} alt={name} />
-              </a>
-              <div className="flex w-full items-center justify-between space-x-6 p-3 pb-0">
-                <div className="flex-1">
-                  <div className="flex items-center space-x-3">
-                    <h3 className="text-base font-semibold text-dark-gray dark:text-dark">
-                      {name}
-                    </h3>
+              <Tab.Panels className="mt-6">
+                <Tab.Panel>
+                  <div className="grid gap-6 sm:grid-cols-2">
+                    {events.map((event) => (
+                      <motion.div
+                        key={event.id}
+                        className="group cursor-pointer overflow-hidden rounded-lg bg-white shadow-sm transition-all hover:shadow-md dark:bg-slate-900"
+                        onClick={handleViewEvent}
+                      >
+                        <div className="aspect-w-16 aspect-h-9">
+                          <img
+                            src={event.image}
+                            alt={event.title}
+                            className="h-full w-full object-cover"
+                          />
+                        </div>
+                        <div className="p-4">
+                          <h3 className="text-lg font-semibold text-dark-gray dark:text-dark">
+                            {event.title}
+                          </h3>
+                          {event.status ? (
+                            <div className="mt-2 flex justify-between">
+                              <span className="text-sm text-red-500">{event.status}</span>
+                              <span className="text-sm text-gray-500">{event.endDate}</span>
+                            </div>
+                          ) : (
+                            <div className="mt-4">
+                              <div className="grid grid-cols-3 gap-4">
+                                <div>
+                                  <p className="text-xs font-medium uppercase text-gray-500">Total Raised</p>
+                                  <p className="mt-1 text-base font-semibold text-dark-gray dark:text-dark">
+                                    {event.totalRaised}
+                                  </p>
+                                  <p className="text-xs text-gray-500">{event.totalRaisedUsd}</p>
+                                </div>
+                                <div>
+                                  <p className="text-xs font-medium uppercase text-gray-500">Total Goal</p>
+                                  <p className="mt-1 text-base font-semibold text-dark-gray dark:text-dark">
+                                    {event.totalGoal}
+                                  </p>
+                                  <p className="text-xs text-gray-500">{event.totalGoalUsd}</p>
+                                </div>
+                                <div>
+                                  <p className="text-xs font-medium uppercase text-gray-500">Ending in</p>
+                                  <p className="mt-1 text-base font-semibold text-dark-gray dark:text-dark">
+                                    {event.endingIn}
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </motion.div>
+                    ))}
                   </div>
-                </div>
-                {/* <div className="flex flex-row">
-                  <HeartIcon className="m-2 h-5 w-5 text-dark-gray dark:text-dark" aria-hidden="true" />
-                  <ShareIcon className="m-2 h-5 w-5 text-dark-gray dark:text-dark" aria-hidden="true" />
-                </div> */}
-              </div>
-              <div className="flex w-full space-x-6 p-3">
-                <div className="pt-3">
-                  <h2 className="text-sm font-medium text-gray-700 dark:text-medium group-hover:text-gray-900">
-                    {attributes.artist}
-                  </h2>
-                  <p className="text-xs font-medium text-gray-500 group-hover:text-gray-700">
-                  </p>
-                </div>
-                <Button onClick={() => listNFT({
-                  nftAddress: mint,
-                  price: 1,
-                })}>
-                  List NFT
-                </Button>
-              </div>
-            </article>
-          ))}
+                </Tab.Panel>
+                <Tab.Panel>
+                  <div className="space-y-4">
+                    {activities.map((activity) => (
+                      <div
+                        key={activity.id}
+                        className="rounded-lg bg-white p-4 shadow-sm dark:bg-slate-900"
+                      >
+                        <div className="flex flex-col">
+                          <p className="text-sm text-dark-gray dark:text-dark">
+                            {activity.type === 'contribution'
+                              ? `Contributed ${activity.amount} to`
+                              : 'Created'}{' '}
+                            <span className="font-semibold">{activity.event}</span>
+                          </p>
+                          <p className="mt-1 text-xs text-gray-500">
+                            {format(activity.date, 'MMM d, yyyy')}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </Tab.Panel>
+                <Tab.Panel>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    {followers.map((follower) => (
+                      <div
+                        key={follower.id}
+                        className="flex items-center gap-4 rounded-lg bg-white p-4 shadow-sm dark:bg-slate-900"
+                      >
+                        <img
+                          src={follower.avatar}
+                          alt={follower.name}
+                          className="h-12 w-12 rounded-full"
+                        />
+                        <div className="flex-1">
+                          <h3 className="font-semibold text-dark-gray dark:text-dark">
+                            {follower.name}
+                          </h3>
+                          <p className="text-sm text-gray-500">{follower.username}</p>
+                        </div>
+                        <Button
+                          className="px-4 py-2 text-sm"
+                          onClick={() => {}}
+                        >
+                          Follow
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
         </div>
-      </section>
-    </section>
+      </div>
+    </div>
   )
 }
 
diff --git a/web/app/pages/Marketplace.tsx b/web/app/pages/Marketplace.tsx
index 59f3194..0d1577e 100644
--- a/web/app/pages/Marketplace.tsx
+++ b/web/app/pages/Marketplace.tsx
@@ -2,10 +2,10 @@ import { Fragment, useState } from 'react'
 import { Dialog, Disclosure, Transition } from '@headlessui/react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { ChevronDownIcon, PlusIcon } from '@heroicons/react/20/solid'
-import clsx from 'clsx';
 
 import type { Product } from "~/models/product";
 import ProductCard from '~/components/products/ProductCard';
+import { cn } from '~/utils/styles';
 
 const filters = [
   {
@@ -128,7 +128,7 @@ const MarketplacePage: React.FC<MarketplacePageProps> = ({ products }) => {
                               <span className="text-sm font-medium text-gray-900">{section.name}</span>
                               <span className="ml-6 flex h-7 items-center">
                                 <ChevronDownIcon
-                                  className={clsx(open ? '-rotate-180' : 'rotate-0', 'h-5 w-5 transform')}
+                                  className={cn(open ? '-rotate-180' : 'rotate-0', 'h-5 w-5 transform')}
                                   aria-hidden="true"
                                 />
                               </span>
diff --git a/web/app/root.tsx b/web/app/root.tsx
index b7caad2..d17464f 100644
--- a/web/app/root.tsx
+++ b/web/app/root.tsx
@@ -13,7 +13,6 @@ import {
   useRouteError,
 } from '@remix-run/react'
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
-import clsx from 'clsx'
 import { useEffect } from 'react'
 import { AuthenticityTokenProvider } from 'remix-utils/csrf/react'
 
@@ -31,8 +30,8 @@ import { getThemeSession } from '~/theme/theme.server'
 import { withSolanaWalletConnection } from '~/hocs'
 import { withQueryClientProvider } from '~/utils/query'
 import WalletDialog from '~/components/dialogs/WalletDialog';
-import { useFindMarketplace } from '~/hooks/nfts/useFindMarketplace';
-import { useMarketplace } from './hooks/nfts/useMarketplace';
+import { useMarketplace } from '~/hooks/nfts/useMarketplace';
+import { cn } from '~/utils/styles';
 
 export const links: LinksFunction = () => {
   return [
@@ -113,7 +112,7 @@ function App({ csrf, ENV }: AppProps) {
 
   return (
     <AuthenticityTokenProvider token={csrf}>
-      <html lang="en" className={clsx('h-full', theme)}>
+      <html lang="en" className={cn('h-full', theme)}>
         <head>
           <Meta />
           <meta
diff --git a/web/app/utils/misc.server.ts b/web/app/utils/misc.server.ts
index 1b199d1..74df56b 100644
--- a/web/app/utils/misc.server.ts
+++ b/web/app/utils/misc.server.ts
@@ -19,3 +19,4 @@ function getRequiredServerEnvVar<T = string>(key: string, devValue?: unknown) {
 
 export const walletNetwork = getRequiredServerEnvVar('WALLET_NETWORK');
 export const shyftApiKey = getRequiredServerEnvVar('SHYFT_API_KEY');
+export const supabaseKey = getRequiredServerEnvVar('SUPABASE_KEY');
diff --git a/web/app/utils/styles.ts b/web/app/utils/styles.ts
new file mode 100644
index 0000000..312ce6a
--- /dev/null
+++ b/web/app/utils/styles.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
\ No newline at end of file
diff --git a/web/app/utils/supabase.ts b/web/app/utils/supabase.ts
new file mode 100644
index 0000000..453ee93
--- /dev/null
+++ b/web/app/utils/supabase.ts
@@ -0,0 +1,5 @@
+import { createClient } from '@supabase/supabase-js'
+
+import { SUPABASE_URL, SUPABASE_KEY } from '~/constants'
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
diff --git a/web/package-lock.json b/web/package-lock.json
index 0f4038f..849374c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -18,6 +18,7 @@
         "@solana/wallet-adapter-react": "0.15.35",
         "@solana/wallet-adapter-react-ui": "0.9.35",
         "@solana/web3.js": "1.78.2",
+        "@supabase/supabase-js": "^2.47.8",
         "@tanstack/react-query": "5.22.2",
         "axios": "1.6.7",
         "clsx": "2.1.0",
@@ -32,6 +33,7 @@
         "react-dom": "18.2.0",
         "react-responsive": "9.0.2",
         "remix-utils": "7.5.0",
+        "tailwind-merge": "^2.5.5",
         "tweetnacl": "1.0.3"
       },
       "devDependencies": {
@@ -5998,6 +6000,110 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.67.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.67.1.tgz",
+      "integrity": "sha512-1SRZG9VkLFz4rtiyEc1l49tMq9jTYu4wJt3pMQEWi7yshZFIBdVH1o5sshk1plQd5LY6GcrPIpCydM2gGDxchA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.3.tgz",
+      "integrity": "sha512-sOLXy+mWRyu4LLv1onYydq+10mNRQ4rzqQxNhbrKLTLTcdcmS9hbWif0bGz/NavmiQfPs4ZcmQJp4WqOXlR4AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "1.17.7",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.17.7.tgz",
+      "integrity": "sha512-aOzOYaTADm/dVTNksyqv9KsbhVa1gHz1Hoxb2ZEF2Ed9H7qlWOfptECQWmkEmrrFjtNaiPrgiSaPECvzI/seDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.11.2.tgz",
+      "integrity": "sha512-u/XeuL2Y0QEhXSoIPZZwR6wMXgB+RQbJzG9VErA3VghVt7uRfSVsjeqd7m5GhX3JR6dM/WRmLbVR8URpDWG4+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14",
+        "@types/phoenix": "^1.5.4",
+        "@types/ws": "^8.5.10",
+        "ws": "^8.18.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js/node_modules/@types/ws": {
+      "version": "8.5.13",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
+      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@supabase/realtime-js/node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.7.1.tgz",
+      "integrity": "sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.47.8",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.47.8.tgz",
+      "integrity": "sha512-2GjK8/PrGJYDVBcjqGyM2irBLMQXvvkJLbS8VFPlym2uuNz+pPMnwLbNf5njkknUTy3PamjgIRoADpuPPPA6oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.67.1",
+        "@supabase/functions-js": "2.4.3",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "1.17.7",
+        "@supabase/realtime-js": "2.11.2",
+        "@supabase/storage-js": "2.7.1"
+      }
+    },
     "node_modules/@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -6249,6 +6355,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
       "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g=="
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -20528,6 +20640,16 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -26758,6 +26880,86 @@
         }
       }
     },
+    "@supabase/auth-js": {
+      "version": "2.67.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.67.1.tgz",
+      "integrity": "sha512-1SRZG9VkLFz4rtiyEc1l49tMq9jTYu4wJt3pMQEWi7yshZFIBdVH1o5sshk1plQd5LY6GcrPIpCydM2gGDxchA==",
+      "requires": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "@supabase/functions-js": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.3.tgz",
+      "integrity": "sha512-sOLXy+mWRyu4LLv1onYydq+10mNRQ4rzqQxNhbrKLTLTcdcmS9hbWif0bGz/NavmiQfPs4ZcmQJp4WqOXlR4AQ==",
+      "requires": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      }
+    },
+    "@supabase/postgrest-js": {
+      "version": "1.17.7",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.17.7.tgz",
+      "integrity": "sha512-aOzOYaTADm/dVTNksyqv9KsbhVa1gHz1Hoxb2ZEF2Ed9H7qlWOfptECQWmkEmrrFjtNaiPrgiSaPECvzI/seDA==",
+      "requires": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "@supabase/realtime-js": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.11.2.tgz",
+      "integrity": "sha512-u/XeuL2Y0QEhXSoIPZZwR6wMXgB+RQbJzG9VErA3VghVt7uRfSVsjeqd7m5GhX3JR6dM/WRmLbVR8URpDWG4+w==",
+      "requires": {
+        "@supabase/node-fetch": "^2.6.14",
+        "@types/phoenix": "^1.5.4",
+        "@types/ws": "^8.5.10",
+        "ws": "^8.18.0"
+      },
+      "dependencies": {
+        "@types/ws": {
+          "version": "8.5.13",
+          "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
+          "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+          "requires": {
+            "@types/node": "*"
+          }
+        },
+        "ws": {
+          "version": "8.18.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+          "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+          "requires": {}
+        }
+      }
+    },
+    "@supabase/storage-js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.7.1.tgz",
+      "integrity": "sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==",
+      "requires": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "@supabase/supabase-js": {
+      "version": "2.47.8",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.47.8.tgz",
+      "integrity": "sha512-2GjK8/PrGJYDVBcjqGyM2irBLMQXvvkJLbS8VFPlym2uuNz+pPMnwLbNf5njkknUTy3PamjgIRoADpuPPPA6oA==",
+      "requires": {
+        "@supabase/auth-js": "2.67.1",
+        "@supabase/functions-js": "2.4.3",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "1.17.7",
+        "@supabase/realtime-js": "2.11.2",
+        "@supabase/storage-js": "2.7.1"
+      }
+    },
     "@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -26970,6 +27172,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
       "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g=="
     },
+    "@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -37418,6 +37625,11 @@
         "tslib": "^2.5.0"
       }
     },
+    "tailwind-merge": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA=="
+    },
     "tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/web/package.json b/web/package.json
index 2128749..2767399 100644
--- a/web/package.json
+++ b/web/package.json
@@ -26,6 +26,7 @@
     "@solana/wallet-adapter-react": "0.15.35",
     "@solana/wallet-adapter-react-ui": "0.9.35",
     "@solana/web3.js": "1.78.2",
+    "@supabase/supabase-js": "^2.47.8",
     "@tanstack/react-query": "5.22.2",
     "axios": "1.6.7",
     "clsx": "2.1.0",
@@ -40,6 +41,7 @@
     "react-dom": "18.2.0",
     "react-responsive": "9.0.2",
     "remix-utils": "7.5.0",
+    "tailwind-merge": "^2.5.5",
     "tweetnacl": "1.0.3"
   },
   "devDependencies": {

From c771996ad22d0e96ea72fd1083df702dcea6b6a3 Mon Sep 17 00:00:00 2001
From: jdnichollsc <jdnichollsc@hotmail.com>
Date: Thu, 19 Dec 2024 10:00:33 -0500
Subject: [PATCH 2/3] code review

---
 web/app/components/ui/Figure.tsx         |   1 +
 web/app/components/ui/Pagination.tsx     |   5 +-
 web/app/components/ui/ThemeButton.tsx    |   6 +-
 web/app/components/ui/header/Header.tsx  |  28 +++---
 web/app/components/wallet/WalletMenu.tsx | 115 +++++++++++++++++++++++
 web/app/config/env.server.ts             |   5 +-
 web/app/config/security.ts               |   1 +
 web/app/constants/api.server.ts          |   6 --
 web/app/constants/api.ts                 |   3 +
 web/app/constants/index.ts               |   2 +-
 web/app/env.server.ts                    |   2 +-
 web/app/hooks/index.ts                   |   1 +
 web/app/hooks/useAvatarUrl.ts            |  10 ++
 web/app/hooks/useSupabaseWallet.ts       |  50 ++++++++++
 web/app/pages/Marketplace.tsx            |   2 +-
 web/app/utils/misc.server.ts             |  22 -----
 web/app/utils/supabase.ts                |   1 +
 web/package-lock.json                    |  63 +++++++++++++
 web/package.json                         |   1 +
 19 files changed, 276 insertions(+), 48 deletions(-)
 create mode 100644 web/app/components/wallet/WalletMenu.tsx
 delete mode 100644 web/app/constants/api.server.ts
 create mode 100644 web/app/constants/api.ts
 create mode 100644 web/app/hooks/useAvatarUrl.ts
 create mode 100644 web/app/hooks/useSupabaseWallet.ts
 delete mode 100644 web/app/utils/misc.server.ts

diff --git a/web/app/components/ui/Figure.tsx b/web/app/components/ui/Figure.tsx
index c89b3e9..f04172b 100644
--- a/web/app/components/ui/Figure.tsx
+++ b/web/app/components/ui/Figure.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { cn } from '~/utils/styles'
 import { with3DHover } from '~/hocs'
 
diff --git a/web/app/components/ui/Pagination.tsx b/web/app/components/ui/Pagination.tsx
index 51acb52..5937eb7 100644
--- a/web/app/components/ui/Pagination.tsx
+++ b/web/app/components/ui/Pagination.tsx
@@ -1,12 +1,13 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid'
-import React, { PropsWithChildren } from 'react'
+import type { FC, PropsWithChildren } from 'react'
+
 import { cn } from '~/utils/styles'
 
 type PaginationProps = PropsWithChildren & {
   className?: string
 }
 
-const Pagination: React.FC<PaginationProps> = ({ className }) => {
+const Pagination: FC<PaginationProps> = ({ className }) => {
   return (
     <nav
       className={cn('isolate -space-x-px', className)}
diff --git a/web/app/components/ui/ThemeButton.tsx b/web/app/components/ui/ThemeButton.tsx
index 9f4217d..3e68f81 100644
--- a/web/app/components/ui/ThemeButton.tsx
+++ b/web/app/components/ui/ThemeButton.tsx
@@ -1,14 +1,14 @@
 import { MoonIcon } from '@heroicons/react/20/solid'
 import { SunIcon } from '@heroicons/react/24/outline'
-import React, { ButtonHTMLAttributes } from 'react'
-import { cn } from '~/utils/styles'
+import type { FC, ButtonHTMLAttributes } from 'react'
 
+import { cn } from '~/utils/styles'
 import { THEME } from '~/constants'
 import { useTheme } from '~/theme'
 
 type ThemeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
 
-const ThemeButton: React.FC<ThemeButtonProps> = ({ className, ...rest }) => {
+const ThemeButton: FC<ThemeButtonProps> = ({ className, ...rest }) => {
   const [theme, setTheme] = useTheme()
   return (
     <button
diff --git a/web/app/components/ui/header/Header.tsx b/web/app/components/ui/header/Header.tsx
index c73e3d1..d566a42 100644
--- a/web/app/components/ui/header/Header.tsx
+++ b/web/app/components/ui/header/Header.tsx
@@ -1,6 +1,7 @@
 import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { Link } from '@remix-run/react'
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
+import { useWallet } from '@solana/wallet-adapter-react'
 import { AnimatePresence, motion } from 'framer-motion'
 import React, { useState } from 'react'
 import useOnclickOutside from 'react-cool-onclickoutside'
@@ -11,14 +12,15 @@ import { useScroll } from '~/hooks'
 import { MobileNavigation } from '../mobile/Navigation'
 import Search from '../search/Search'
 import ThemeButton from '../ThemeButton'
+import WalletMenu from '~/components/wallet/WalletMenu'
 import { cn } from '~/utils/styles'
 
-
 type HeaderProps = {
   title?: string
 }
 
 const Header: React.FC<HeaderProps> = ({ title = 'ConcertX' }) => {
+  const { connected } = useWallet()
   const { isScrolled } = useScroll()
   const [isSearchFocused, setSearchFocused] = useState(false)
   const [isMobileSearchFocused, setMobileSearchFocused] = useState(false)
@@ -111,16 +113,20 @@ const Header: React.FC<HeaderProps> = ({ title = 'ConcertX' }) => {
             )}
             <ClientOnly>
               {() => (
-              <WalletMultiButton className="hover:bg-transparent">
-                 {isMobile && (
-                  <img
-                    alt="Wallet"
-                    aria-hidden="true"
-                    src="/assets/wallet_icon.svg"
-                    className="h-7 w-7 dark:invert z-0"
-                  />
-                 )}
-              </WalletMultiButton>
+                connected ? (
+                  <WalletMenu />
+                ) : (
+                  <WalletMultiButton className="hover:bg-transparent">
+                    {isMobile && (
+                      <img
+                        alt="Wallet"
+                        aria-hidden="true"
+                        src="/assets/wallet_icon.svg"
+                        className="h-7 w-7 dark:invert z-0"
+                      />
+                    )}
+                  </WalletMultiButton>
+                )
               )}
             </ClientOnly>
             <ThemeButton />
diff --git a/web/app/components/wallet/WalletMenu.tsx b/web/app/components/wallet/WalletMenu.tsx
new file mode 100644
index 0000000..6cff990
--- /dev/null
+++ b/web/app/components/wallet/WalletMenu.tsx
@@ -0,0 +1,115 @@
+import { Menu } from '@headlessui/react'
+import { Link } from '@remix-run/react'
+import { useWallet } from '@solana/wallet-adapter-react'
+import {
+  ArrowTopRightOnSquareIcon,
+  UserCircleIcon,
+  BellIcon,
+  Cog6ToothIcon,
+  QuestionMarkCircleIcon,
+  PowerIcon
+} from '@heroicons/react/24/outline'
+
+import { cn } from '~/utils/styles'
+import { useSupabaseWallet } from '~/hooks/useSupabaseWallet'
+
+const menuItems = [
+  {
+    title: 'Profile',
+    href: '/profile',
+    icon: UserCircleIcon
+  },
+  {
+    title: 'Notifications',
+    href: '/notifications',
+    icon: BellIcon
+  },
+  {
+    title: 'Settings',
+    href: '/settings',
+    icon: Cog6ToothIcon
+  },
+  {
+    title: 'Help',
+    href: '/help',
+    icon: QuestionMarkCircleIcon
+  }
+]
+
+const DEFAULT_AVATAR = '/assets/default-avatar.png'
+
+const WalletMenu = () => {
+  const { publicKey, disconnect } = useWallet()
+  const { user } = useSupabaseWallet()
+  const walletAddress = publicKey?.toBase58() || ''
+  const shortAddress = `${walletAddress.slice(0, 4)}...${walletAddress.slice(-4)}`
+
+  return (
+    <Menu as="div" className="relative">
+      <Menu.Button className="flex items-center rounded-full bg-gray-100 p-1 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
+        <img
+          className="h-8 w-8 rounded-full object-cover"
+          src={user?.avatar_url || DEFAULT_AVATAR}
+          alt={user?.username || 'Profile'}
+        />
+      </Menu.Button>
+
+      <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-gray-700 dark:bg-gray-800">
+        <div className="px-4 py-3">
+          <p className="text-sm text-gray-900 dark:text-white">
+            {user?.username || 'Connected Wallet'}
+          </p>
+          <div className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+            <span>{shortAddress}</span>
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(walletAddress)
+              }}
+              className="rounded-md p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="py-1">
+          {menuItems.map(({ title, href, icon: Icon }) => (
+            <Menu.Item key={title}>
+              {({ active }) => (
+                <Link
+                  to={href}
+                  className={cn(
+                    'flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300',
+                    active && 'bg-gray-100 dark:bg-gray-700'
+                  )}
+                >
+                  <Icon className="h-5 w-5" />
+                  {title}
+                </Link>
+              )}
+            </Menu.Item>
+          ))}
+        </div>
+
+        <div className="py-1">
+          <Menu.Item>
+            {({ active }) => (
+              <button
+                onClick={() => disconnect()}
+                className={cn(
+                  'flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300',
+                  active && 'bg-gray-100 dark:bg-gray-700'
+                )}
+              >
+                <PowerIcon className="h-5 w-5" />
+                Disconnect
+              </button>
+            )}
+          </Menu.Item>
+        </div>
+      </Menu.Items>
+    </Menu>
+  )
+}
+
+export default WalletMenu 
\ No newline at end of file
diff --git a/web/app/config/env.server.ts b/web/app/config/env.server.ts
index 5c1fbf8..19c1e5f 100644
--- a/web/app/config/env.server.ts
+++ b/web/app/config/env.server.ts
@@ -18,4 +18,7 @@ function getRequiredServerEnvVar<T = string>(key: string, devValue?: unknown) {
 }
 
 export const cacheKey = 'webapp';
-export const sessionSecret = getRequiredServerEnvVar('SESSION_SECRET', 'SECRET_KEY');
\ No newline at end of file
+export const sessionSecret = getRequiredServerEnvVar('SESSION_SECRET', 'SECRET_KEY');
+export const walletNetwork = getRequiredServerEnvVar('WALLET_NETWORK');
+export const shyftApiKey = getRequiredServerEnvVar('SHYFT_API_KEY');
+export const supabaseKey = getRequiredServerEnvVar('SUPABASE_KEY');
\ No newline at end of file
diff --git a/web/app/config/security.ts b/web/app/config/security.ts
index 975ecbb..fbb02b1 100755
--- a/web/app/config/security.ts
+++ b/web/app/config/security.ts
@@ -8,6 +8,7 @@ export function replaceNewLinesWithSpaces(str: string) {
 
 export const defaultSrc = replaceNewLinesWithSpaces(`
   https://*.shyft.to
+  https://*.supabase.co
 `);
 
 export const scriptSrc = replaceNewLinesWithSpaces(`
diff --git a/web/app/constants/api.server.ts b/web/app/constants/api.server.ts
deleted file mode 100644
index a505afb..0000000
--- a/web/app/constants/api.server.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { canUseDOM } from '~/utils/dom';
-import { supabaseKey } from '~/utils/misc.server';
-
-export const SHYFT_API_URL = 'https://api.shyft.to';
-export const SUPABASE_URL = 'https://puonyupeanorfbpjfvpu.supabase.co';
-export const SUPABASE_KEY = canUseDOM ? window.ENV.SUPABASE_KEY : supabaseKey;
diff --git a/web/app/constants/api.ts b/web/app/constants/api.ts
new file mode 100644
index 0000000..375c107
--- /dev/null
+++ b/web/app/constants/api.ts
@@ -0,0 +1,3 @@
+export const SHYFT_API_URL = 'https://api.shyft.to';
+export const SUPABASE_URL = 'https://puonyupeanorfbpjfvpu.supabase.co';
+export const SUPABASE_KEY = typeof document !== 'undefined' ? window.ENV?.SUPABASE_KEY : process.env?.SUPABASE_KEY as string;
\ No newline at end of file
diff --git a/web/app/constants/index.ts b/web/app/constants/index.ts
index 9099904..b5fb20b 100644
--- a/web/app/constants/index.ts
+++ b/web/app/constants/index.ts
@@ -1,5 +1,5 @@
 export * from './links';
 export * from './navigation';
 export * from './theme';
-export * from './api.server';
+export * from './api';
 export * from './wallet';
diff --git a/web/app/env.server.ts b/web/app/env.server.ts
index 4c98ea1..d6f58f0 100644
--- a/web/app/env.server.ts
+++ b/web/app/env.server.ts
@@ -1,4 +1,4 @@
-import { shyftApiKey, supabaseKey, walletNetwork } from '~/utils/misc.server';
+import { shyftApiKey, supabaseKey, walletNetwork } from '~/config/env.server';
 
 export function getEnv() {
   return {
diff --git a/web/app/hooks/index.ts b/web/app/hooks/index.ts
index 3d10e34..5145802 100644
--- a/web/app/hooks/index.ts
+++ b/web/app/hooks/index.ts
@@ -3,3 +3,4 @@ export * from './useForwardedRef'
 export * from './useTruncate'
 export * from './useSolanaWallet'
 export * from './nfts';
+export * from './useAvatarUrl';
diff --git a/web/app/hooks/useAvatarUrl.ts b/web/app/hooks/useAvatarUrl.ts
new file mode 100644
index 0000000..da3e66f
--- /dev/null
+++ b/web/app/hooks/useAvatarUrl.ts
@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import md5 from 'md5';
+
+export const useAvatarUrl = (email: string) => {
+  return useMemo(() => {
+    return email
+      ? `https://gravatar.com/avatar/${md5(user.email)}?s=400&d=robohash&r=x`
+      : '';
+  }, [email]);
+};
diff --git a/web/app/hooks/useSupabaseWallet.ts b/web/app/hooks/useSupabaseWallet.ts
new file mode 100644
index 0000000..d8f2b09
--- /dev/null
+++ b/web/app/hooks/useSupabaseWallet.ts
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { useWallet } from '@solana/wallet-adapter-react'
+
+import { supabase } from '~/utils/supabase'
+
+console.log('supabase**********', supabase)
+
+export type WalletUser = {
+  id: string
+  username: string
+  email?: string
+  avatar_url?: string
+  solana_wallet_address: string
+}
+
+export const useSupabaseWallet = () => {
+  const { publicKey } = useWallet()
+  const [user, setUser] = useState<WalletUser | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      if (!publicKey) {
+        setUser(null)
+        setLoading(false)
+        return
+      }
+
+      try {
+        const { data, error } = await supabase
+          .from('users')
+          .select('*')
+          .eq('solana_wallet_address', publicKey.toBase58())
+          .single()
+
+        if (error) throw error
+        setUser(data)
+      } catch (error) {
+        console.error('Error fetching user:', error)
+        setUser(null)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchUser()
+  }, [publicKey])
+
+  return { user, loading }
+} 
\ No newline at end of file
diff --git a/web/app/pages/Marketplace.tsx b/web/app/pages/Marketplace.tsx
index 0d1577e..08fe89c 100644
--- a/web/app/pages/Marketplace.tsx
+++ b/web/app/pages/Marketplace.tsx
@@ -1,7 +1,7 @@
-import { Fragment, useState } from 'react'
 import { Dialog, Disclosure, Transition } from '@headlessui/react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { ChevronDownIcon, PlusIcon } from '@heroicons/react/20/solid'
+import { Fragment, useState } from 'react'
 
 import type { Product } from "~/models/product";
 import ProductCard from '~/components/products/ProductCard';
diff --git a/web/app/utils/misc.server.ts b/web/app/utils/misc.server.ts
deleted file mode 100644
index 74df56b..0000000
--- a/web/app/utils/misc.server.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-function getRequiredEnvVarFromObj<T>(
-  obj: Record<string, string | undefined>,
-  key: string,
-  devValue: unknown = `${key}-dev-value`
-) {
-  let value = devValue;
-  const envVal = obj[key];
-  if (envVal) {
-    value = envVal;
-  } else if (obj.ENVIRONMENT !== 'local') {
-    throw new Error(`${key} is a required env variable`);
-  }
-  return value as T;
-}
-
-function getRequiredServerEnvVar<T = string>(key: string, devValue?: unknown) {
-  return getRequiredEnvVarFromObj<T>(process.env, key, devValue);
-}
-
-export const walletNetwork = getRequiredServerEnvVar('WALLET_NETWORK');
-export const shyftApiKey = getRequiredServerEnvVar('SHYFT_API_KEY');
-export const supabaseKey = getRequiredServerEnvVar('SUPABASE_KEY');
diff --git a/web/app/utils/supabase.ts b/web/app/utils/supabase.ts
index 453ee93..555e274 100644
--- a/web/app/utils/supabase.ts
+++ b/web/app/utils/supabase.ts
@@ -3,3 +3,4 @@ import { createClient } from '@supabase/supabase-js'
 import { SUPABASE_URL, SUPABASE_KEY } from '~/constants'
 
 export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
+
diff --git a/web/package-lock.json b/web/package-lock.json
index 849374c..2d30ea2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -28,6 +28,7 @@
         "framer-motion": "11.0.5",
         "isbot": "4.1.0",
         "lodash": "4.17.21",
+        "md5": "^2.3.0",
         "react": "18.2.0",
         "react-cool-onclickoutside": "1.7.0",
         "react-dom": "18.2.0",
@@ -8543,6 +8544,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -9196,6 +9206,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -14502,6 +14521,17 @@
         "css-mediaquery": "^0.1.2"
       }
     },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -14512,6 +14542,12 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "node_modules/md5/node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "license": "MIT"
+    },
     "node_modules/mdast-util-definitions": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz",
@@ -28677,6 +28713,11 @@
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
       "dev": true
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -29192,6 +29233,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -33132,6 +33178,23 @@
         "css-mediaquery": "^0.1.2"
       }
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
diff --git a/web/package.json b/web/package.json
index 2767399..4121cc7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -36,6 +36,7 @@
     "framer-motion": "11.0.5",
     "isbot": "4.1.0",
     "lodash": "4.17.21",
+    "md5": "^2.3.0",
     "react": "18.2.0",
     "react-cool-onclickoutside": "1.7.0",
     "react-dom": "18.2.0",

From 5cfb9c620695ac1322f1a2597273ee8d7b5a5679 Mon Sep 17 00:00:00 2001
From: jdnichollsc <jdnichollsc@hotmail.com>
Date: Thu, 19 Dec 2024 12:03:41 -0500
Subject: [PATCH 3/3] fix profile page

---
 docs/supabase/SQL.md             | 112 ++++++++++
 web/app/components/ui/Button.tsx |   4 +-
 web/app/constants/solana.ts      |   5 +
 web/app/hooks/index.ts           |  12 +-
 web/app/hooks/useConcerts.ts     | 101 +++++++++
 web/app/hooks/useProfileData.ts  | 118 +++++++++++
 web/app/models/follower.ts       |   6 +
 web/app/models/index.ts          |   3 +
 web/app/models/user.ts           |  43 ++++
 web/app/pages/Profile.tsx        | 354 +++++++++++++++++++++++++++++++
 web/app/routes/concerts/new.tsx  | 201 ++++++++++++++++++
 web/app/routes/profile/index.tsx | 115 ++++++++++
 web/app/types/anchor.ts          | 223 +++++++++++++++++++
 web/app/types/database.ts        |  50 +++++
 web/app/utils/anchor.ts          |  54 +++++
 web/app/utils/supabase.ts        |  73 ++++++-
 web/package-lock.json            |  15 ++
 web/package.json                 |   1 +
 18 files changed, 1481 insertions(+), 9 deletions(-)
 create mode 100644 docs/supabase/SQL.md
 create mode 100644 web/app/constants/solana.ts
 create mode 100644 web/app/hooks/useConcerts.ts
 create mode 100644 web/app/hooks/useProfileData.ts
 create mode 100644 web/app/models/follower.ts
 create mode 100644 web/app/models/index.ts
 create mode 100644 web/app/models/user.ts
 create mode 100644 web/app/pages/Profile.tsx
 create mode 100644 web/app/routes/concerts/new.tsx
 create mode 100644 web/app/routes/profile/index.tsx
 create mode 100644 web/app/types/anchor.ts
 create mode 100644 web/app/types/database.ts
 create mode 100644 web/app/utils/anchor.ts

diff --git a/docs/supabase/SQL.md b/docs/supabase/SQL.md
new file mode 100644
index 0000000..e901928
--- /dev/null
+++ b/docs/supabase/SQL.md
@@ -0,0 +1,112 @@
+# Supabase SQL Editor
+
+```sql
+-- Enable UUID generation
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- Enum for user roles (user/admin)
+DROP TYPE IF EXISTS user_role;
+CREATE TYPE user_role AS ENUM ('user', 'admin');
+
+-- Users table with integrated Solana wallet
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    username TEXT UNIQUE NOT NULL CHECK (char_length(username) >= 3),
+    email TEXT UNIQUE NOT NULL,
+    display_name TEXT NOT NULL,
+    bio TEXT,
+    avatar_url TEXT,
+    solana_wallet_address TEXT UNIQUE NOT NULL,  -- Required Solana wallet per user
+    role user_role NOT NULL DEFAULT 'user',
+    is_verified BOOLEAN DEFAULT false,  -- For verified profiles (like Twitter blue check)
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT username_format CHECK (username ~ '^[a-zA-Z0-9_]+$'),
+    CONSTRAINT valid_wallet_address CHECK (char_length(solana_wallet_address) > 0)
+);
+
+-- Followers table
+CREATE TABLE followers (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    follower_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    following_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(follower_id, following_id),
+    CONSTRAINT no_self_follow CHECK (follower_id != following_id)
+);
+
+-- User settings table
+CREATE TABLE user_settings (
+    user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+    email_notifications BOOLEAN DEFAULT true,
+    marketing_emails BOOLEAN DEFAULT true,
+    theme TEXT DEFAULT 'system',  -- system, light, dark
+    language TEXT DEFAULT 'en',
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes
+CREATE INDEX idx_users_username ON users(username);
+CREATE INDEX idx_users_email ON users(email);
+CREATE INDEX idx_users_wallet ON users(solana_wallet_address);
+CREATE INDEX idx_followers_follower_id ON followers(follower_id);
+CREATE INDEX idx_followers_following_id ON followers(following_id);
+
+-- Add trigger for updated_at
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    IF TG_OP = 'UPDATE' THEN
+        NEW.updated_at = CURRENT_TIMESTAMP;
+    END IF;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+CREATE TRIGGER update_users_updated_at
+    BEFORE UPDATE ON users
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+CREATE TRIGGER update_user_settings_updated_at
+    BEFORE UPDATE ON user_settings
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- Create view for user stats
+CREATE OR REPLACE VIEW user_stats AS
+SELECT 
+    u.id,
+    u.username,
+    u.display_name,
+    u.avatar_url,
+    u.is_verified,
+    COUNT(DISTINCT f1.follower_id) as followers_count,
+    COUNT(DISTINCT f2.following_id) as following_count
+FROM users u
+LEFT JOIN followers f1 ON u.id = f1.following_id
+LEFT JOIN followers f2 ON u.id = f2.follower_id
+GROUP BY u.id, u.username, u.display_name, u.avatar_url, u.is_verified;
+
+-- Disable RLS temporarily for development
+ALTER TABLE users DISABLE ROW LEVEL SECURITY;
+ALTER TABLE followers DISABLE ROW LEVEL SECURITY;
+ALTER TABLE user_settings DISABLE ROW LEVEL SECURITY;
+
+-- Create function to handle new user registration
+CREATE OR REPLACE FUNCTION handle_new_user()
+RETURNS TRIGGER AS $$
+BEGIN
+    -- Create user settings with defaults
+    INSERT INTO user_settings (user_id)
+    VALUES (NEW.id);
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Trigger to setup new user
+CREATE TRIGGER on_user_created
+    AFTER INSERT ON users
+    FOR EACH ROW
+    EXECUTE FUNCTION handle_new_user();
+```
\ No newline at end of file
diff --git a/web/app/components/ui/Button.tsx b/web/app/components/ui/Button.tsx
index 35d26c1..ac6e61d 100644
--- a/web/app/components/ui/Button.tsx
+++ b/web/app/components/ui/Button.tsx
@@ -1,9 +1,9 @@
 import { cn } from '~/utils/styles'
-import React, { ButtonHTMLAttributes } from 'react'
+import type { FC, ButtonHTMLAttributes } from 'react'
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
 
-const Button: React.FC<ButtonProps> = ({
+const Button: FC<ButtonProps> = ({
   children,
   className,
   type,
diff --git a/web/app/constants/solana.ts b/web/app/constants/solana.ts
new file mode 100644
index 0000000..edd297b
--- /dev/null
+++ b/web/app/constants/solana.ts
@@ -0,0 +1,5 @@
+import { Cluster, clusterApiUrl, PublicKey } from '@solana/web3.js'
+
+export const SOLANA_NETWORK = 'devnet' as Cluster
+export const SOLANA_ENDPOINT = clusterApiUrl(SOLANA_NETWORK)
+export const PROGRAM_ID = new PublicKey('EDgnnYxcnjZ1RfkNnMYvqqNs42iFJ7vVCEMzwRw9td8s')
\ No newline at end of file
diff --git a/web/app/hooks/index.ts b/web/app/hooks/index.ts
index 5145802..d0d2efb 100644
--- a/web/app/hooks/index.ts
+++ b/web/app/hooks/index.ts
@@ -1,6 +1,8 @@
-export * from './useScroll'
-export * from './useForwardedRef'
-export * from './useTruncate'
+export * from './useProfileData'
+export * from './useSupabaseWallet'
 export * from './useSolanaWallet'
-export * from './nfts';
-export * from './useAvatarUrl';
+export * from './useTruncate'
+export * from './useUserWallet'
+export * from './useForwardedRef'
+export * from './useScroll'
+export * from './useAvatarUrl'
diff --git a/web/app/hooks/useConcerts.ts b/web/app/hooks/useConcerts.ts
new file mode 100644
index 0000000..c374fb7
--- /dev/null
+++ b/web/app/hooks/useConcerts.ts
@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react'
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import * as anchor from '@coral-xyz/anchor'
+import { Program } from '@coral-xyz/anchor'
+import { PublicKey } from '@solana/web3.js'
+import { PROGRAM_ID } from '~/constants'
+import type { ConcertX } from '~/types/anchor'
+
+export interface Concert {
+  publicKey: PublicKey
+  title: string
+  shortDescription: string
+  goalAmount: number
+  ticketPrice: number
+  startDate: Date
+  endDate: Date
+  maxTokenSupply: number
+  status: 'active' | 'completed' | 'cancelled'
+  currentAmount: number
+  contributors: PublicKey[]
+}
+
+export const useConcerts = () => {
+  const { connection } = useConnection()
+  const { publicKey } = useWallet()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [concerts, setConcerts] = useState<Concert[]>([])
+
+  const fetchConcerts = async () => {
+    if (!publicKey) return
+
+    try {
+      setLoading(true)
+      setError(null)
+
+      // Create provider
+      const provider = new anchor.AnchorProvider(
+        connection,
+        { publicKey } as any,
+        { commitment: 'confirmed' }
+      )
+
+      // Create program
+      const program = new Program(
+        require('~/idl/concert_x.json'),
+        PROGRAM_ID,
+        provider
+      ) as Program<ConcertX>
+
+      // Get all concert accounts
+      const concertAccounts = await program.account.concert.all()
+
+      // Transform accounts to our Concert type
+      const transformedConcerts = concertAccounts.map(account => ({
+        publicKey: account.publicKey,
+        title: account.account.title,
+        shortDescription: account.account.shortDescription,
+        goalAmount: account.account.goalAmount,
+        ticketPrice: account.account.ticketPrice,
+        startDate: new Date(account.account.startDate.toNumber() * 1000),
+        endDate: new Date(account.account.endDate.toNumber() * 1000),
+        maxTokenSupply: account.account.maxTokenSupply,
+        status: ['active', 'completed', 'cancelled'][account.account.status] as Concert['status'],
+        currentAmount: account.account.currentAmount,
+        contributors: account.account.contributors
+      }))
+
+      setConcerts(transformedConcerts)
+    } catch (err) {
+      console.error('Error fetching concerts:', err)
+      setError(err instanceof Error ? err.message : 'Error fetching concerts')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const getConcertPDA = async (title: string, creator: PublicKey) => {
+    const [pda] = await PublicKey.findProgramAddressSync(
+      [
+        Buffer.from('concertX'),
+        Buffer.from(title),
+        creator.toBuffer()
+      ],
+      PROGRAM_ID
+    )
+    return pda
+  }
+
+  useEffect(() => {
+    fetchConcerts()
+  }, [publicKey, connection])
+
+  return {
+    concerts,
+    loading,
+    error,
+    fetchConcerts,
+    getConcertPDA
+  }
+} 
\ No newline at end of file
diff --git a/web/app/hooks/useProfileData.ts b/web/app/hooks/useProfileData.ts
new file mode 100644
index 0000000..e1e92c4
--- /dev/null
+++ b/web/app/hooks/useProfileData.ts
@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import { useWallet } from '@solana/wallet-adapter-react'
+
+import { supabase, validateFile, getAvatarPath, handleStorageError, STORAGE_CONFIG } from '~/utils/supabase'
+import type { User, UserStats } from '~/models'
+
+export const useProfileData = () => {
+  const { connected, publicKey } = useWallet()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [user, setUser] = useState<User | null>(null)
+  const [userStats, setUserStats] = useState<UserStats | null>(null)
+
+  const fetchProfile = async () => {
+    if (!connected || !publicKey) return null
+
+    try {
+      setLoading(true)
+      setError(null)
+
+      // Fetch user profile
+      const { data: userData, error: userError } = await supabase
+        .from('users')
+        .select('*')
+        .eq('solana_wallet_address', publicKey.toBase58())
+        .single()
+
+      // If no user found, return null without setting an error
+      if (userError?.code === 'PGRST116') {
+        setUser(null)
+        setUserStats(null)
+        return null
+      }
+
+      // For other errors, throw them
+      if (userError) throw userError
+
+      // Only fetch stats if we have a user
+      if (userData) {
+        const { data: statsData, error: statsError } = await supabase
+          .from('user_stats')
+          .select('*')
+          .eq('id', userData.id)
+          .single()
+
+        if (statsError && statsError.code !== 'PGRST116') throw statsError
+
+        setUser(userData)
+        setUserStats(statsData)
+        return userData
+      }
+
+      return null
+    } catch (err) {
+      console.error('Error fetching profile:', err)
+      setError(err instanceof Error ? err.message : 'Error fetching profile')
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const uploadAvatar = async (file: File): Promise<string | null> => {
+    if (!connected || !publicKey) {
+      setError('No wallet connected')
+      return null
+    }
+
+    try {
+      setLoading(true)
+      setError(null)
+
+      // Validate file
+      const validation = validateFile(file)
+      if (!validation.valid) {
+        setError(validation.error!)
+        return null
+      }
+
+      const fileExt = file.name.split('.').pop()
+      const filePath = getAvatarPath(publicKey.toBase58(), fileExt!)
+
+      const { error: uploadError } = await supabase.storage
+        .from(STORAGE_CONFIG.AVATARS_BUCKET)
+        .upload(filePath, file, { 
+          upsert: true,
+          cacheControl: '3600',
+          contentType: file.type
+        })
+
+      if (uploadError) {
+        setError(handleStorageError(uploadError))
+        return null
+      }
+
+      const { data: { publicUrl } } = supabase.storage
+        .from(STORAGE_CONFIG.AVATARS_BUCKET)
+        .getPublicUrl(filePath)
+
+      return publicUrl
+    } catch (err) {
+      console.error('Error uploading avatar:', err)
+      setError(err instanceof Error ? err.message : 'Error uploading avatar')
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return {
+    user,
+    userStats,
+    loading,
+    error,
+    fetchProfile,
+    uploadAvatar
+  }
+} 
\ No newline at end of file
diff --git a/web/app/models/follower.ts b/web/app/models/follower.ts
new file mode 100644
index 0000000..e9dde3b
--- /dev/null
+++ b/web/app/models/follower.ts
@@ -0,0 +1,6 @@
+export interface Follower {
+  id: string
+  follower_id: string
+  following_id: string
+  created_at: string
+} 
\ No newline at end of file
diff --git a/web/app/models/index.ts b/web/app/models/index.ts
new file mode 100644
index 0000000..2f28b90
--- /dev/null
+++ b/web/app/models/index.ts
@@ -0,0 +1,3 @@
+export * from './product'
+export * from './user'
+export * from './follower' 
\ No newline at end of file
diff --git a/web/app/models/user.ts b/web/app/models/user.ts
new file mode 100644
index 0000000..9b0e620
--- /dev/null
+++ b/web/app/models/user.ts
@@ -0,0 +1,43 @@
+export type UserRole = 'user' | 'admin'
+
+export interface User {
+  id: string
+  username: string
+  email: string
+  display_name: string
+  bio?: string
+  avatar_url?: string
+  solana_wallet_address: string
+  role: UserRole
+  is_verified: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface UserStats {
+  id: string
+  username: string
+  display_name: string
+  avatar_url?: string
+  is_verified: boolean
+  followers_count: number
+  following_count: number
+}
+
+export interface UserSettings {
+  user_id: string
+  email_notifications: boolean
+  marketing_emails: boolean
+  theme: 'system' | 'light' | 'dark'
+  language: string
+  updated_at: string
+}
+
+// Form data type for profile updates
+export interface ProfileFormData {
+  username: string
+  email: string
+  display_name: string
+  bio?: string
+  avatar_url?: string
+} 
\ No newline at end of file
diff --git a/web/app/pages/Profile.tsx b/web/app/pages/Profile.tsx
new file mode 100644
index 0000000..7f773fa
--- /dev/null
+++ b/web/app/pages/Profile.tsx
@@ -0,0 +1,354 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from '@remix-run/react'
+import { ArrowTopRightOnSquareIcon, PhotoIcon } from '@heroicons/react/24/outline'
+import { useFetcher } from '@remix-run/react'
+import { useAuthenticityToken } from 'remix-utils/csrf/react'
+import Button from '~/components/ui/Button'
+import { useProfileData } from '~/hooks/useProfileData'
+import { useWallet } from '@solana/wallet-adapter-react'
+import type { ProfileFormData } from '~/models'
+
+interface ProfilePageProps {
+  address?: string
+}
+
+type SubmitResponse = {
+  ok: boolean
+  error?: string
+}
+
+const ProfileSkeleton = () => (
+  <div className="container mx-auto px-4 py-8 lg:px-8">
+    <div className="mx-auto max-w-3xl">
+      {/* Header Skeleton */}
+      <div className="mb-8 flex items-center justify-between">
+        <div className="h-9 w-48 animate-pulse rounded-md bg-gray-200 dark:bg-gray-700" />
+        <div className="flex gap-4">
+          <div className="h-5 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-5 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+        </div>
+      </div>
+
+      {/* Form Sections */}
+      <div className="space-y-8">
+        {/* Basic Details Section */}
+        <div className="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-900">
+          <div className="mb-6 h-7 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="space-y-6">
+            {/* Display Name */}
+            <div>
+              <div className="mb-2 h-5 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-gray-200 dark:bg-gray-700" />
+            </div>
+            {/* Username */}
+            <div>
+              <div className="mb-2 h-5 w-20 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-gray-200 dark:bg-gray-700" />
+            </div>
+            {/* Email */}
+            <div>
+              <div className="mb-2 h-5 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-gray-200 dark:bg-gray-700" />
+            </div>
+            {/* Bio */}
+            <div>
+              <div className="mb-2 h-5 w-12 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-24 w-full animate-pulse rounded-md bg-gray-200 dark:bg-gray-700" />
+            </div>
+          </div>
+        </div>
+
+        {/* Profile Image Section */}
+        <div className="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-900">
+          <div className="mb-6 h-7 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="flex items-center space-x-6">
+            <div className="h-20 w-20 animate-pulse rounded-full bg-gray-200 dark:bg-gray-700" />
+            <div className="flex-1">
+              <div className="h-8 w-full animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="mt-2 h-4 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+            </div>
+          </div>
+        </div>
+
+        {/* Wallet Address Section */}
+        <div className="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-900">
+          <div className="mb-6 h-7 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-10 w-full animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700" />
+        </div>
+
+        {/* Buttons */}
+        <div className="flex justify-end space-x-4">
+          <div className="h-10 w-24 animate-pulse rounded-md bg-gray-200 dark:bg-gray-700" />
+          <div className="h-10 w-24 animate-pulse rounded-md bg-gray-200 dark:bg-gray-700" />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+const ProfilePage = ({ address }: ProfilePageProps) => {
+  const navigate = useNavigate()
+  const { connected, connecting } = useWallet()
+  const csrf = useAuthenticityToken()
+  const fetcher = useFetcher<SubmitResponse>()
+  const { user, userStats, loading, error: profileError, fetchProfile, uploadAvatar } = useProfileData()
+  const [formData, setFormData] = useState<ProfileFormData>({
+    username: '',
+    email: '',
+    display_name: '',
+    bio: '',
+    avatar_url: '',
+  })
+
+  useEffect(() => {
+    if (connected) {
+      fetchProfile()
+    }
+  }, [connected])
+
+  useEffect(() => {
+    if (user) {
+      setFormData({
+        username: user.username,
+        email: user.email,
+        display_name: user.display_name,
+        bio: user.bio || '',
+        avatar_url: user.avatar_url,
+      })
+    }
+  }, [user])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { id, value } = e.target
+    setFormData(prev => ({ ...prev, [id]: value }))
+  }
+
+  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      // Upload to Supabase
+      const publicUrl = await uploadAvatar(file)
+      if (publicUrl) {
+        setFormData(prev => ({ ...prev, avatar_url: publicUrl }))
+      }
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!connected || !address) {
+      alert('Please connect your wallet first')
+      return
+    }
+
+    fetcher.submit(
+      {
+        ...formData,
+        solana_wallet_address: address,
+        csrf
+      },
+      { method: 'post' }
+    )
+  }
+
+  // Show success message and navigate back
+  useEffect(() => {
+    if (fetcher.data?.ok) {
+      navigate(-1)
+    }
+  }, [fetcher.data, navigate])
+
+  if (!connected && !connecting) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        Please connect your wallet to edit your profile.
+      </div>
+    )
+  }
+
+  if (loading) {
+    return <ProfileSkeleton />
+  }
+
+  const error = profileError || fetcher.data?.error
+
+  return (
+    <div className="container mx-auto px-4 py-8 lg:px-8">
+      <div className="mx-auto max-w-3xl">
+        <div className="mb-8 flex items-center justify-between">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Edit your profile</h1>
+          {userStats && (
+            <div className="flex gap-4 text-sm text-gray-500">
+              <span>{userStats.followers_count} followers</span>
+              <span>{userStats.following_count} following</span>
+            </div>
+          )}
+        </div>
+
+        {error && (
+          <div className="mb-4 rounded-md bg-red-50 p-4 text-red-700 dark:bg-red-900/50 dark:text-red-200">
+            {error}
+          </div>
+        )}
+
+        <fetcher.Form onSubmit={handleSubmit} className="space-y-8">
+          <input type="hidden" name="csrf" value={csrf} />
+          <input type="hidden" name="solana_wallet_address" value={address} />
+
+          {/* Basic Details Section */}
+          <div className="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-900">
+            <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-white">Enter your details</h2>
+            
+            <div className="space-y-6">
+              {/* Display Name */}
+              <div>
+                <label htmlFor="display_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Display Name
+                </label>
+                <input
+                  type="text"
+                  id="display_name"
+                  name="display_name"
+                  value={formData.display_name}
+                  onChange={handleInputChange}
+                  required
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:text-sm"
+                  placeholder="Enter your display name"
+                />
+              </div>
+
+              {/* Username */}
+              <div>
+                <label htmlFor="username" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Username
+                </label>
+                <div className="mt-1 flex rounded-md shadow-sm">
+                  <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 dark:border-gray-600 dark:bg-gray-700 sm:text-sm">
+                    @
+                  </span>
+                  <input
+                    type="text"
+                    id="username"
+                    name="username"
+                    value={formData.username}
+                    onChange={handleInputChange}
+                    required
+                    className="block w-full rounded-none rounded-r-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:text-sm"
+                    placeholder="username"
+                  />
+                </div>
+              </div>
+
+              {/* Email */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  required
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:text-sm"
+                  placeholder="you@example.com"
+                />
+              </div>
+
+              {/* Bio */}
+              <div>
+                <label htmlFor="bio" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Bio
+                  <span className="ml-1 text-xs text-gray-500">(Optional)</span>
+                </label>
+                <textarea
+                  id="bio"
+                  name="bio"
+                  value={formData.bio}
+                  onChange={handleInputChange}
+                  rows={3}
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:text-sm"
+                  placeholder="Tell us about yourself..."
+                />
+                <p className="mt-2 text-sm text-gray-500">Brief description for your profile. URLs are hyperlinked.</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Profile Image Section */}
+          <div className="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-900">
+            <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-white">Profile Image</h2>
+            
+            <div className="flex items-center space-x-6">
+              <div className="h-20 w-20 flex-shrink-0">
+                {formData.avatar_url ? (
+                  <img
+                    src={formData.avatar_url}
+                    alt="Profile"
+                    className="h-20 w-20 rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+                    <PhotoIcon className="h-8 w-8 text-gray-400" />
+                  </div>
+                )}
+              </div>
+              <div className="flex-1">
+                <label className="block">
+                  <span className="sr-only">Choose profile photo</span>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleImageUpload}
+                    className="block w-full text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100 dark:file:bg-gray-700 dark:file:text-gray-300"
+                  />
+                </label>
+                <p className="mt-2 text-xs text-gray-500">JPG, PNG or GIF. 10MB max.</p>
+              </div>
+            </div>
+            <input type="hidden" name="avatar_url" value={formData.avatar_url || ''} />
+          </div>
+
+          {/* Wallet Address Display */}
+          <div className="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-900">
+            <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-white">Wallet Address</h2>
+            
+            <div className="flex items-center gap-2 rounded-lg bg-gray-100 px-3 py-2 dark:bg-gray-800">
+              <span className="text-sm text-gray-600 dark:text-gray-300">
+                {address || 'No wallet connected'}
+              </span>
+              {address && (
+                <button
+                  type="button"
+                  className="ml-auto text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
+                  onClick={() => window.open(`https://explorer.solana.com/address/${address}`, '_blank')}
+                >
+                  <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <div className="flex justify-end space-x-4">
+            <Button
+              onClick={() => navigate(-1)}
+              type="button"
+            >
+              Cancel
+            </Button>
+            <Button 
+              type="submit"
+              disabled={fetcher.state !== 'idle'}
+            >
+              {fetcher.state !== 'idle' ? 'Saving...' : 'Save changes'}
+            </Button>
+          </div>
+        </fetcher.Form>
+      </div>
+    </div>
+  )
+}
+
+export default ProfilePage 
\ No newline at end of file
diff --git a/web/app/routes/concerts/new.tsx b/web/app/routes/concerts/new.tsx
new file mode 100644
index 0000000..751a7a3
--- /dev/null
+++ b/web/app/routes/concerts/new.tsx
@@ -0,0 +1,201 @@
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { Form, useActionData } from '@remix-run/react'
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import { SystemProgram } from '@solana/web3.js'
+import { useEffect, useState } from 'react'
+import { getProgram, getConcertPDA } from '~/utils/anchor'
+import { BN } from '@coral-xyz/anchor'
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData()
+  const title = formData.get('title') as string
+  const shortDescription = formData.get('shortDescription') as string
+  const goalAmount = Number(formData.get('goalAmount'))
+  const ticketPrice = Number(formData.get('ticketPrice'))
+  const startDate = new Date(formData.get('startDate') as string).getTime() / 1000
+  const endDate = new Date(formData.get('endDate') as string).getTime() / 1000
+  const maxTokenSupply = Number(formData.get('maxTokenSupply'))
+
+  // Validation
+  const errors: Record<string, string> = {}
+  if (!title) errors.title = 'Title is required'
+  if (!shortDescription) errors.shortDescription = 'Description is required'
+  if (!goalAmount || goalAmount <= 0) errors.goalAmount = 'Goal amount must be greater than 0'
+  if (!ticketPrice || ticketPrice <= 0) errors.ticketPrice = 'Ticket price must be greater than 0'
+  if (!startDate) errors.startDate = 'Start date is required'
+  if (!endDate) errors.endDate = 'End date is required'
+  if (!maxTokenSupply || maxTokenSupply <= 0) errors.maxTokenSupply = 'Max token supply must be greater than 0'
+
+  if (Object.keys(errors).length > 0) {
+    return json({ errors })
+  }
+
+  return json({ 
+    data: {
+      title,
+      shortDescription,
+      goalAmount,
+      ticketPrice,
+      startDate,
+      endDate,
+      maxTokenSupply
+    }
+  })
+}
+
+export default function NewConcert() {
+  const { connection } = useConnection()
+  const wallet = useWallet()
+  const actionData = useActionData<typeof action>()
+  const [transactionError, setTransactionError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const createConcert = async () => {
+      if (!actionData?.data || !wallet.publicKey || transactionError) return
+
+      try {
+        const program = getProgram(connection, wallet)
+        const { 
+          title, shortDescription, goalAmount, ticketPrice, 
+          startDate, endDate, maxTokenSupply 
+        } = actionData.data
+
+        const concertPDA = getConcertPDA(title, wallet.publicKey)
+
+        await program.methods
+          .createConcert(
+            title,
+            shortDescription,
+            goalAmount,
+            ticketPrice,
+            new BN(startDate),
+            new BN(endDate),
+            maxTokenSupply
+          )
+          .accounts({
+            concert: concertPDA,
+            initializer: wallet.publicKey,
+            systemProgram: SystemProgram.programId,
+          })
+          .rpc()
+
+      } catch (error) {
+        console.error('Error creating concert:', error)
+        setTransactionError(error instanceof Error ? error.message : 'Failed to create concert')
+      }
+    }
+
+    createConcert()
+  }, [actionData?.data, wallet.publicKey, connection])
+
+  if (!wallet.connected) {
+    return <div className="p-4">Please connect your wallet to create a concert</div>
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">Create New Concert</h1>
+      
+      {transactionError && (
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+          {transactionError}
+        </div>
+      )}
+
+      <Form method="post" className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Title</label>
+          <input
+            type="text"
+            name="title"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+          {actionData?.errors?.title && (
+            <p className="text-red-500 text-sm mt-1">{actionData.errors.title}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Short Description</label>
+          <textarea
+            name="shortDescription"
+            rows={3}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+          {actionData?.errors?.shortDescription && (
+            <p className="text-red-500 text-sm mt-1">{actionData.errors.shortDescription}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Goal Amount (SOL)</label>
+          <input
+            type="number"
+            name="goalAmount"
+            step="0.1"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+          {actionData?.errors?.goalAmount && (
+            <p className="text-red-500 text-sm mt-1">{actionData.errors.goalAmount}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Ticket Price (SOL)</label>
+          <input
+            type="number"
+            name="ticketPrice"
+            step="0.1"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+          {actionData?.errors?.ticketPrice && (
+            <p className="text-red-500 text-sm mt-1">{actionData.errors.ticketPrice}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Start Date</label>
+          <input
+            type="datetime-local"
+            name="startDate"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+          {actionData?.errors?.startDate && (
+            <p className="text-red-500 text-sm mt-1">{actionData.errors.startDate}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">End Date</label>
+          <input
+            type="datetime-local"
+            name="endDate"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+          {actionData?.errors?.endDate && (
+            <p className="text-red-500 text-sm mt-1">{actionData.errors.endDate}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Max Token Supply</label>
+          <input
+            type="number"
+            name="maxTokenSupply"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+          {actionData?.errors?.maxTokenSupply && (
+            <p className="text-red-500 text-sm mt-1">{actionData.errors.maxTokenSupply}</p>
+          )}
+        </div>
+
+        <button
+          type="submit"
+          className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          Create Concert
+        </button>
+      </Form>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/web/app/routes/profile/index.tsx b/web/app/routes/profile/index.tsx
new file mode 100644
index 0000000..2bed2f5
--- /dev/null
+++ b/web/app/routes/profile/index.tsx
@@ -0,0 +1,115 @@
+import { useWallet } from '@solana/wallet-adapter-react';
+import { json, type ActionFunctionArgs } from '@remix-run/node';
+import { Profanity } from '@2toad/profanity';
+
+import Layout from '~/components/Layout';
+import ProfilePage from '~/pages/Profile';
+import { supabase } from '~/utils/supabase';
+import type { ProfileFormData } from '~/models';
+import { csrf } from '~/cookies/session.server';
+import { getAuthSession } from '~/cookies/auth.server';
+
+const profanity = new Profanity();
+
+// Validation helper
+const validateContent = (field: string, value: string | null) => {
+  if (!value) return `${field} is required`;
+  if (profanity.exists(value)) return `${field} contains inappropriate content`;
+  return null;
+};
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const formData = await request.clone().formData();
+  await csrf.validate(formData, request.headers);
+
+  const { getPublicKey } = await getAuthSession(request);
+  const walletAddress = getPublicKey();
+  if (!walletAddress) {
+    return json({ ok: false, error: 'Wallet address is required' });
+  }
+
+  try {
+    // Get form data
+    const username = formData.get('username') as string;
+    const email = formData.get('email') as string;
+    const displayName = formData.get('display_name') as string;
+    const bio = formData.get('bio') as string;
+    const avatarUrl = formData.get('avatar_url') as string;
+
+    // Validate required fields
+    const usernameError = validateContent('Username', username);
+    if (usernameError) return json({ ok: false, error: usernameError });
+
+    const displayNameError = validateContent('Display name', displayName);
+    if (displayNameError) return json({ ok: false, error: displayNameError });
+
+    const emailError = validateContent('Email', email);
+    if (emailError) return json({ ok: false, error: emailError });
+
+    // Validate bio only if provided
+    if (bio && bio.trim()) {
+      const bioError = validateContent('Bio', bio);
+      if (bioError) return json({ ok: false, error: bioError });
+    }
+
+    // Validate username format (alphanumeric and underscore only)
+    if (!/^[a-zA-Z0-9_]+$/.test(username)) {
+      return json({ 
+        ok: false, 
+        error: 'Username can only contain letters, numbers, and underscores' 
+      });
+    }
+
+    // Validate email format
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return json({ ok: false, error: 'Invalid email format' });
+    }
+
+    const profileData: ProfileFormData = {
+      username,
+      email,
+      display_name: displayName,
+      bio: bio || undefined,
+      avatar_url: avatarUrl || undefined,
+    };
+
+    const { error: updateError } = await supabase
+      .from('users')
+      .upsert({
+        solana_wallet_address: walletAddress,
+        ...profileData,
+        role: 'user',
+        updated_at: new Date().toISOString(),
+      });
+
+    if (updateError) {
+      // Handle specific database errors
+      if (updateError.code === '23505') { // Unique violation
+        if (updateError.message.includes('username')) {
+          return json({ ok: false, error: 'Username is already taken' });
+        }
+        if (updateError.message.includes('email')) {
+          return json({ ok: false, error: 'Email is already registered' });
+        }
+      }
+      throw updateError;
+    }
+
+    return json({ ok: true });
+  } catch (error) {
+    console.error('Error updating profile:', error);
+    return json({ 
+      ok: false, 
+      error: error instanceof Error ? error.message : 'Failed to update profile' 
+    });
+  }
+};
+
+export default function Index() {
+  const { publicKey } = useWallet();
+  return (
+    <Layout>
+      <ProfilePage address={publicKey?.toBase58()} />
+    </Layout>
+  );
+} 
\ No newline at end of file
diff --git a/web/app/types/anchor.ts b/web/app/types/anchor.ts
new file mode 100644
index 0000000..1c3c2ce
--- /dev/null
+++ b/web/app/types/anchor.ts
@@ -0,0 +1,223 @@
+import { BN } from '@coral-xyz/anchor'
+import { PublicKey } from '@solana/web3.js'
+
+export type ConcertX = {
+  "version": "0.1.0",
+  "name": "concert_x",
+  "instructions": [
+    {
+      "name": "createConcert",
+      "accounts": [
+        {
+          "name": "concert",
+          "isMut": true,
+          "isSigner": false
+        },
+        {
+          "name": "initializer",
+          "isMut": true,
+          "isSigner": true
+        },
+        {
+          "name": "systemProgram",
+          "isMut": false,
+          "isSigner": false
+        }
+      ],
+      "args": [
+        {
+          "name": "title",
+          "type": "string"
+        },
+        {
+          "name": "shortDescription",
+          "type": "string"
+        },
+        {
+          "name": "goalAmount",
+          "type": "u16"
+        },
+        {
+          "name": "ticketPrice",
+          "type": "f32"
+        },
+        {
+          "name": "startDate",
+          "type": "i64"
+        },
+        {
+          "name": "endDate",
+          "type": "i64"
+        },
+        {
+          "name": "maxTokenSupply",
+          "type": "u16"
+        }
+      ]
+    },
+    {
+      "name": "makeContribution",
+      "accounts": [
+        {
+          "name": "concert",
+          "isMut": true,
+          "isSigner": false
+        },
+        {
+          "name": "contribution",
+          "isMut": true,
+          "isSigner": false
+        },
+        {
+          "name": "backer",
+          "isMut": true,
+          "isSigner": true
+        },
+        {
+          "name": "systemProgram",
+          "isMut": false,
+          "isSigner": false
+        },
+        {
+          "name": "clock",
+          "isMut": false,
+          "isSigner": false
+        }
+      ],
+      "args": [
+        {
+          "name": "amount",
+          "type": "f32"
+        }
+      ]
+    },
+    {
+      "name": "updateConcertStatus",
+      "accounts": [
+        {
+          "name": "concert",
+          "isMut": true,
+          "isSigner": false
+        },
+        {
+          "name": "authority",
+          "isMut": false,
+          "isSigner": true
+        }
+      ],
+      "args": [
+        {
+          "name": "newStatus",
+          "type": "u8"
+        }
+      ]
+    }
+  ],
+  "accounts": [
+    {
+      "name": "concert",
+      "type": {
+        "kind": "struct",
+        "fields": [
+          {
+            "name": "pda",
+            "type": "publicKey"
+          },
+          {
+            "name": "title",
+            "type": "string"
+          },
+          {
+            "name": "shortDescription",
+            "type": "string"
+          },
+          {
+            "name": "goalAmount",
+            "type": "u16"
+          },
+          {
+            "name": "ticketPrice",
+            "type": "f32"
+          },
+          {
+            "name": "currentAmount",
+            "type": "f32"
+          },
+          {
+            "name": "startDate",
+            "type": "i64"
+          },
+          {
+            "name": "endDate",
+            "type": "i64"
+          },
+          {
+            "name": "status",
+            "type": "u8"
+          },
+          {
+            "name": "maxTokenSupply",
+            "type": "u16"
+          },
+          {
+            "name": "contributors",
+            "type": {
+              "vec": "publicKey"
+            }
+          }
+        ]
+      }
+    },
+    {
+      "name": "contribution",
+      "type": {
+        "kind": "struct",
+        "fields": [
+          {
+            "name": "contributor",
+            "type": "publicKey"
+          },
+          {
+            "name": "concert",
+            "type": "publicKey"
+          },
+          {
+            "name": "amount",
+            "type": "f32"
+          },
+          {
+            "name": "timestamp",
+            "type": "i64"
+          }
+        ]
+      }
+    }
+  ],
+  "errors": [
+    {
+      "code": 6000,
+      "name": "ConcertNotActive",
+      "msg": "The concert is not active."
+    },
+    {
+      "code": 6001,
+      "name": "ContributionAmountTooSmall",
+      "msg": "Contribution amount is too small"
+    },
+    {
+      "code": 6002,
+      "name": "CampaignEnded",
+      "msg": "Campaign has ended"
+    },
+    {
+      "code": 6003,
+      "name": "CampaignNotStarted",
+      "msg": "Campaign has not started yet"
+    },
+    {
+      "code": 6004,
+      "name": "Unauthorized",
+      "msg": "Unauthorized to perform this action"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/web/app/types/database.ts b/web/app/types/database.ts
new file mode 100644
index 0000000..c5dcfd8
--- /dev/null
+++ b/web/app/types/database.ts
@@ -0,0 +1,50 @@
+export type UserRole = 'user' | 'admin'
+
+export interface User {
+  id: string
+  username: string
+  email: string
+  display_name: string
+  bio?: string
+  avatar_url?: string
+  solana_wallet_address: string
+  role: UserRole
+  is_verified: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface UserStats {
+  id: string
+  username: string
+  display_name: string
+  avatar_url?: string
+  is_verified: boolean
+  followers_count: number
+  following_count: number
+}
+
+export interface UserSettings {
+  user_id: string
+  email_notifications: boolean
+  marketing_emails: boolean
+  theme: 'system' | 'light' | 'dark'
+  language: string
+  updated_at: string
+}
+
+export interface Follower {
+  id: string
+  follower_id: string
+  following_id: string
+  created_at: string
+}
+
+// Form data type for profile updates
+export interface ProfileFormData {
+  username: string
+  email: string
+  display_name: string
+  bio?: string
+  avatar_url?: string
+} 
\ No newline at end of file
diff --git a/web/app/utils/anchor.ts b/web/app/utils/anchor.ts
new file mode 100644
index 0000000..9583868
--- /dev/null
+++ b/web/app/utils/anchor.ts
@@ -0,0 +1,54 @@
+import { Program, AnchorProvider } from '@coral-xyz/anchor'
+import { Connection, PublicKey } from '@solana/web3.js'
+import type { ConcertX } from '~/types/anchor'
+import { PROGRAM_ID } from '~/constants'
+
+export const getProgram = (connection: Connection, wallet: { publicKey: PublicKey }) => {
+  const provider = new AnchorProvider(
+    connection,
+    wallet as any,
+    { commitment: 'confirmed' }
+  )
+
+  return new Program(
+    require('~/idl/concert_x.json'),
+    PROGRAM_ID,
+    provider
+  ) as Program<ConcertX>
+}
+
+export const getConcertPDA = (title: string, creator: PublicKey) => {
+  const [pda] = PublicKey.findProgramAddressSync(
+    [
+      Buffer.from('concertX'),
+      Buffer.from(title),
+      creator.toBuffer()
+    ],
+    PROGRAM_ID
+  )
+  return pda
+}
+
+export const getContributionPDA = (concert: PublicKey, contributor: PublicKey) => {
+  const [pda] = PublicKey.findProgramAddressSync(
+    [
+      Buffer.from('contribution'),
+      concert.toBuffer(),
+      contributor.toBuffer()
+    ],
+    PROGRAM_ID
+  )
+  return pda
+}
+
+export const formatSol = (amount: number) => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'decimal',
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 9,
+  }).format(amount)
+}
+
+export const getConcertStatus = (status: number): 'active' | 'completed' | 'cancelled' => {
+  return ['active', 'completed', 'cancelled'][status] as 'active' | 'completed' | 'cancelled'
+} 
\ No newline at end of file
diff --git a/web/app/utils/supabase.ts b/web/app/utils/supabase.ts
index 555e274..e00b137 100644
--- a/web/app/utils/supabase.ts
+++ b/web/app/utils/supabase.ts
@@ -1,6 +1,75 @@
 import { createClient } from '@supabase/supabase-js'
-
+import type { SupabaseClient } from '@supabase/supabase-js'
 import { SUPABASE_URL, SUPABASE_KEY } from '~/constants'
 
-export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
+// Initialize Supabase client with error handling
+let supabaseInstance: SupabaseClient | null = null
+
+try {
+  supabaseInstance = createClient(SUPABASE_URL, SUPABASE_KEY, {
+    auth: {
+      persistSession: true // Enable session persistence
+    },
+    db: {
+      schema: 'public'
+    },
+    global: {
+      headers: {
+        'x-application-name': 'concertx'
+      }
+    }
+  })
+} catch (error) {
+  console.error('Error initializing Supabase client:', error)
+  throw new Error('Failed to initialize Supabase client')
+}
+
+export const supabase = supabaseInstance!
+
+// Storage configuration
+export const STORAGE_CONFIG = {
+  AVATARS_BUCKET: 'avatars',
+  MAX_FILE_SIZE: 10 * 1024 * 1024, // 10MB in bytes
+  ALLOWED_FILE_TYPES: ['image/jpeg', 'image/png', 'image/gif'] as const,
+  AVATAR_DIMENSION_LIMIT: 2048, // Max width/height in pixels
+} as const
+
+// Helper function to validate file size and type
+export const validateFile = (file: File): { valid: boolean; error?: string } => {
+  if (file.size > STORAGE_CONFIG.MAX_FILE_SIZE) {
+    return {
+      valid: false,
+      error: 'File size must be less than 10MB'
+    }
+  }
+
+  if (!STORAGE_CONFIG.ALLOWED_FILE_TYPES.includes(file.type)) {
+    return {
+      valid: false,
+      error: 'File must be JPEG, PNG, or GIF'
+    }
+  }
+
+  return { valid: true }
+}
+
+// Helper function to generate avatar path
+export const getAvatarPath = (walletAddress: string, fileExtension: string): string => {
+  return `${walletAddress}/avatar.${fileExtension}`
+}
+
+// Helper function to handle storage errors
+export const handleStorageError = (error: any): string => {
+  console.error('Storage error:', error)
+  
+  if (error?.statusCode === '413') {
+    return 'File size too large. Please upload a smaller file.'
+  }
+  
+  if (error?.statusCode === '415') {
+    return 'Unsupported file type. Please upload a JPEG, PNG, or GIF.'
+  }
+  
+  return 'Failed to upload file. Please try again.'
+}
 
diff --git a/web/package-lock.json b/web/package-lock.json
index 2d30ea2..4137f43 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "name": "concertx-frontend",
       "dependencies": {
+        "@2toad/profanity": "^3.0.1",
         "@coral-xyz/anchor": "^0.30.1",
         "@headlessui/react": "1.7.18",
         "@heroicons/react": "2.1.1",
@@ -66,6 +67,15 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@2toad/profanity": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@2toad/profanity/-/profanity-3.0.1.tgz",
+      "integrity": "sha512-WqAljnXnxsdUmwJT2VDTHZ6IAMgktnobLtBSdGFQYFLB1kh7q+QqzpxY4rRAWU4lSYvGUykJ+xv5wJ3IZYBuzQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -22587,6 +22597,11 @@
     }
   },
   "dependencies": {
+    "@2toad/profanity": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@2toad/profanity/-/profanity-3.0.1.tgz",
+      "integrity": "sha512-WqAljnXnxsdUmwJT2VDTHZ6IAMgktnobLtBSdGFQYFLB1kh7q+QqzpxY4rRAWU4lSYvGUykJ+xv5wJ3IZYBuzQ=="
+    },
     "@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
diff --git a/web/package.json b/web/package.json
index 4121cc7..9a1ee75 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@2toad/profanity": "^3.0.1",
     "@coral-xyz/anchor": "^0.30.1",
     "@headlessui/react": "1.7.18",
     "@heroicons/react": "2.1.1",