Skip to content

Commit

Permalink
refactor: add SNS support, fix broken zustand persistance store in SS…
Browse files Browse the repository at this point in the history
…R, stub gallery routes
  • Loading branch information
thejustinwalsh committed Sep 11, 2024
1 parent ab60209 commit 6e5f41a
Show file tree
Hide file tree
Showing 14 changed files with 315 additions and 129 deletions.
3 changes: 2 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
}
},
"cSpell.words": ["Dexie"]
}
29 changes: 29 additions & 0 deletions app/app/collection/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
"use client";

import { useAppState } from "@/hooks/useAppState";
import { redirect } from "next/navigation";
import { CollectionImageCard } from "@/components/collection/collection-image-card";

type ViewProps = {
params: {
id: string;
};
};

export default function View({ params }: ViewProps) {
const collection = useAppState(
(state) => state.collections.published[params.id]
);
if (!collection) redirect("/");

return (
<div className="flex justify-stretch">
<main className="flex-1 p-8">
<h1 className="text-2xl font-bold">{collection?.name}</h1>
{collection?.items.map((item, idx) => (
<CollectionImageCard key={idx} item={item} />
))}
</main>
</div>
);
}
6 changes: 3 additions & 3 deletions app/app/create/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function Create() {
}, [create, destroy, activeDraft]);

const collection = useMemo(() => {
if (activeDraft) return drafts[activeDraft];
if (activeDraft && drafts[activeDraft]) return drafts[activeDraft];
create("New Collection");
return { id: "", items: [] };
}, [activeDraft, create, drafts]);
Expand Down Expand Up @@ -62,7 +62,7 @@ export default function Create() {

return (
<div className="flex justify-stretch">
<div className="flex-1 p-8">
<main className="flex-1 p-8">
<h1 className="text-2xl font-bold">New Collection</h1>
<div className="flex flex-col gap-4 mt-4">
{collection.items.map((data, index) => (
Expand Down Expand Up @@ -93,7 +93,7 @@ export default function Create() {
/>
</AlertDialog>
</div>
</div>
</main>
</div>
);
}
Binary file removed app/app/fonts/GeistMonoVF.woff
Binary file not shown.
Binary file removed app/app/fonts/GeistVF.woff
Binary file not shown.
56 changes: 23 additions & 33 deletions app/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { Header } from "@/components/header";
import { AnchorWalletProvider } from "@/components/anchor-wallet-provider";
import { QueryProvider } from "@/components/query-provider";

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
import "./globals.css";
import AppStateConsumer from "@/hooks/useAppState";

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Content Ledger",
description: "A decentralized content ledger",
};

export default function RootLayout({
Expand All @@ -29,26 +19,26 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<body className={`antialiased`}>
<QueryProvider>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<AnchorWalletProvider>
<div className="min-h-screen">
<Header className="sticky top-0 z-50" />
<main>{children}</main>
<footer className="flex gap-6 flex-wrap items-center justify-center py-4 sticky top-[100vh]">
2024 © Content Ledger
</footer>
</div>
</AnchorWalletProvider>
</ThemeProvider>
<AppStateConsumer>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<AnchorWalletProvider>
<div className="min-h-screen">
<Header className="sticky top-0 z-50" />
<main>{children}</main>
<footer className="flex gap-6 flex-wrap items-center justify-center py-4 sticky top-[100vh]">
2024 © Content Ledger
</footer>
</div>
</AnchorWalletProvider>
</ThemeProvider>
</AppStateConsumer>
</QueryProvider>
</body>
</html>
Expand Down
71 changes: 25 additions & 46 deletions app/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,52 +1,31 @@
import Image from "next/image";
"use client";

import { useAppState } from "@/hooks/useAppState";

export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="https://nextjs.org/icons/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
const collections = useAppState((state) => state.collections.published);

<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="https://nextjs.org/icons/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
return (
<div className="flex justify-stretch">
<main className="flex-1 p-8">
<h1 className="text-2xl font-bold">Collections</h1>
<div className="grid grid-cols-3 gap-4">
{Object.values(collections)
.filter((c) => c !== undefined)
.map((collection) => (
<div
key={collection.id}
className="flex flex-col items-center justify-center w-40 h-40 bg-white rounded-lg shadow-md"
>
<div className="w-full h-24 bg-gray-100 rounded-t-lg" />
<div className="flex flex-col items-center justify-center p-4">
<h3 className="text-lg font-semibold">{collection.name}</h3>
<p className="text-sm text-gray-500">
{collection.items.length} items
</p>
</div>
</div>
))}
</div>
</main>
</div>
Expand Down
24 changes: 24 additions & 0 deletions app/components/avatar-sns.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { PersonIcon } from "@radix-ui/react-icons";
import { useConnection } from "@solana/wallet-adapter-react";
import { usePrimaryDomain, useProfilePic } from "@bonfida/sns-react";
import { PublicKey } from "@solana/web3.js";

export type AvatarSNSProps = {
publicKey: PublicKey;
};

export function AvatarSNS({ publicKey }: AvatarSNSProps) {
const { connection } = useConnection();
const { domain } = usePrimaryDomain(connection, publicKey);
const { profileUrl } = useProfilePic(connection, domain);

return (
<Avatar className="w-6 h-6">
<AvatarImage src={profileUrl || undefined} />
<AvatarFallback>
<PersonIcon />
</AvatarFallback>
</Avatar>
);
}
26 changes: 26 additions & 0 deletions app/components/collection/collection-image-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { AspectRatio } from "@radix-ui/react-aspect-ratio";
import { ImageWithFallback } from "../image-with-fallback";
import { Collection } from "@/hooks/useCreateCollectionQuery";
import { ImageIcon } from "@radix-ui/react-icons";

export type CollectionImageCardProps = {
item: Collection;
};

export function CollectionImageCard({ item }: CollectionImageCardProps) {
return (
<div className="flex flex-col items-center justify-center w-40 h-40 bg-white rounded-lg shadow-md">
<AspectRatio ratio={1 / 1}>
<ImageWithFallback src={item.image} alt={item.name}>
<div className="flex items-center justify-center w-full h-full p-4 text-muted-foreground">
<ImageIcon />
</div>
</ImageWithFallback>
</AspectRatio>
<div className="flex flex-col items-center justify-center p-4">
<h3 className="text-lg font-semibold">Collection Name</h3>
<p className="text-sm text-gray-500">3 items</p>
</div>
</div>
);
}
2 changes: 2 additions & 0 deletions app/components/header.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";

import {
NavigationMenu,
NavigationMenuItem,
Expand Down
10 changes: 7 additions & 3 deletions app/components/wallet-connection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { WalletName } from "@solana/wallet-adapter-base";
import { AvatarSNS } from "./avatar-sns";
import { usePrimaryDomain } from "@bonfida/sns-react";

//handle wallet balance fixed to 2 decimal numbers without rounding
export function toFixed(num: number, fixed: number): string {
Expand All @@ -27,6 +29,7 @@ export function toFixed(num: number, fixed: number): string {
export function WalletConnection() {
const { connection } = useConnection();
const { select, wallets, publicKey, disconnect, connecting } = useWallet();
const { domain } = usePrimaryDomain(connection, publicKey);

const [open, setOpen] = useState<boolean>(false);
const [balance, setBalance] = useState<number | null>(null);
Expand Down Expand Up @@ -88,11 +91,12 @@ export function WalletConnection() {
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="flex gap-2 bg-background text-foreground border-2 border-foreground font-slackey md:w-[220px] w-[170px]"
className="flex gap-2 bg-background text-foreground border-2 border-foreground font-slackey md:w-[260px] w-[210px]"
>
<AvatarSNS publicKey={publicKey} />
<div className="md:w-[150px] w-[100px]">
<div className="truncate md:max-w-[150px] max-w-[100px]">
{publicKey.toBase58()}
{domain || publicKey.toBase58()}
</div>
</div>
{balance ? (
Expand All @@ -102,7 +106,7 @@ export function WalletConnection() {
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="md:w-[220px] w-[170px]">
<DropdownMenuContent className="md:w-[260px] w-[210px]">
<DropdownMenuItem onClick={handleDisconnect}>
Disconnect
</DropdownMenuItem>
Expand Down
Loading

0 comments on commit 6e5f41a

Please sign in to comment.