diff --git a/src/lib/assets/default-avatar.png b/src/lib/assets/default-avatar.png new file mode 100644 index 0000000..0651619 Binary files /dev/null and b/src/lib/assets/default-avatar.png differ diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte new file mode 100644 index 0000000..94291ba --- /dev/null +++ b/src/lib/components/avatar.svelte @@ -0,0 +1,18 @@ + + +Avatar + + diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte index d64c88c..ce02aa8 100644 --- a/src/lib/components/button.svelte +++ b/src/lib/components/button.svelte @@ -1,7 +1,7 @@
- The Outlet -
+
+ Milestone 1 shaman pitchfork typewriter single-origin coffee beard flannel, actually chillwave. +
diff --git a/src/lib/components/post.svelte b/src/lib/components/post.svelte new file mode 100644 index 0000000..c449352 --- /dev/null +++ b/src/lib/components/post.svelte @@ -0,0 +1,67 @@ + + +
+ +
onUserClick && onUserClick(post.user)}> + +
+
+
+ +
onUserClick && onUserClick(post.user)}> + {post.user.name ?? 'Anonymous'} +
+ {#if post.user.address !== undefined} +
{formatAddress(post.user.address)}
+ {/if} +
•
+
{formatDateFromNow(post.timestamp)}
+
+ {post.text} +
+
+ + diff --git a/src/lib/components/wallet-connect.svelte b/src/lib/components/wallet-connect.svelte new file mode 100644 index 0000000..d3dd22b --- /dev/null +++ b/src/lib/components/wallet-connect.svelte @@ -0,0 +1,28 @@ + + +
+
+ + diff --git a/src/lib/stores/post.ts b/src/lib/stores/post.ts new file mode 100644 index 0000000..e620200 --- /dev/null +++ b/src/lib/stores/post.ts @@ -0,0 +1,29 @@ +import { writable, type Writable } from 'svelte/store' +import type { User } from './user' + +export interface Post { + timestamp: number + text: string + user: User +} + +export interface PostStore extends Writable { + add: (post: Post) => void + reset: () => void +} + +function createPostStore(): PostStore { + const store = writable([]) + + return { + ...store, + add: (post: Post) => { + store.update((posts) => [...posts, post]) + }, + reset: () => { + store.set([]) + }, + } +} + +export const posts = createPostStore() diff --git a/src/lib/stores/user.ts b/src/lib/stores/user.ts new file mode 100644 index 0000000..848163d --- /dev/null +++ b/src/lib/stores/user.ts @@ -0,0 +1,35 @@ +import { writable, type Writable } from 'svelte/store' + +export interface User { + name?: string + address: string + avatar?: string +} + +export interface UserStore extends Writable { + add: (user: User) => void + reset: () => void + find: (address: string) => Promise +} + +function createUserStore(): UserStore { + const store = writable([]) + + return { + ...store, + add: (user: User) => { + store.update((users) => [...users, user]) + }, + reset: () => { + store.set([]) + }, + find: (address: string) => + new Promise((resolve) => { + store.subscribe((v) => { + resolve(v.find((u) => u.address === address)) + }) + }), + } +} + +export const users = createUserStore() diff --git a/src/lib/temp/assets/1.png b/src/lib/temp/assets/1.png new file mode 100644 index 0000000..e14639d Binary files /dev/null and b/src/lib/temp/assets/1.png differ diff --git a/src/lib/temp/assets/2.png b/src/lib/temp/assets/2.png new file mode 100644 index 0000000..d3a29b6 Binary files /dev/null and b/src/lib/temp/assets/2.png differ diff --git a/src/lib/temp/assets/3.png b/src/lib/temp/assets/3.png new file mode 100644 index 0000000..c8a5428 Binary files /dev/null and b/src/lib/temp/assets/3.png differ diff --git a/src/lib/temp/index.svelte b/src/lib/temp/index.svelte new file mode 100644 index 0000000..d267d69 --- /dev/null +++ b/src/lib/temp/index.svelte @@ -0,0 +1,59 @@ + + +
+ There are no posts yet +
+ + diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..8a37481 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,22 @@ +export function formatAddress(address: string) { + return `${address.substring(0, 6)}…${address.substring(address.length - 5)}` +} + +export function formatDateFromNow(timestamp: number) { + const delta = Math.round((Date.now() - timestamp) / 1000) + + const minute = 60 + const hour = minute * 60 + const day = hour * 24 + const week = day * 7 + const month = day * 30 + const year = day * 365 + + if (delta < minute) return `${Math.round(delta)}s` + else if (delta < hour) return `${Math.round(delta / minute)}m` + else if (delta < day) return `${Math.round(delta / hour)}h` + else if (delta < week) return `${Math.round(delta / day)}d` + else if (delta < month) return `${Math.round(delta / week)}w` + else if (delta < year) return `${Math.round(delta / month)}m` + return `${Math.round(delta / year)}y` +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c1e47a6..d6aca8c 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,11 +1,38 @@
-
+ + diff --git a/src/routes/profile/[id]/+error.svelte b/src/routes/profile/[address]/+error.svelte similarity index 100% rename from src/routes/profile/[id]/+error.svelte rename to src/routes/profile/[address]/+error.svelte diff --git a/src/routes/profile/[address]/+page.svelte b/src/routes/profile/[address]/+page.svelte new file mode 100644 index 0000000..cfcee5d --- /dev/null +++ b/src/routes/profile/[address]/+page.svelte @@ -0,0 +1,19 @@ + + +
+
+
{data.name}
+
{data.address}
+
+ + diff --git a/src/routes/profile/[address]/+page.ts b/src/routes/profile/[address]/+page.ts new file mode 100644 index 0000000..b36a550 --- /dev/null +++ b/src/routes/profile/[address]/+page.ts @@ -0,0 +1,15 @@ +import { error } from '@sveltejs/kit' +import type { PageLoad } from './$types' + +import { users } from '$lib/stores/user' + +export const load: PageLoad = async ({ params }) => { + if (!/0x[a-z0-9]{40}/i.test(params.address)) { + throw error(404, `Incorrect user address format ${params.address}`) + } + const user = await users.find(params.address) + + if (!user) throw error(404, `Could not find user with address ${params.address}`) + + return user +} diff --git a/src/routes/profile/[id]/+page.svelte b/src/routes/profile/[id]/+page.svelte deleted file mode 100644 index eddc1c6..0000000 --- a/src/routes/profile/[id]/+page.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - -
The profile id is {data.id}
diff --git a/src/routes/profile/[id]/+page.ts b/src/routes/profile/[id]/+page.ts deleted file mode 100644 index 4dda17f..0000000 --- a/src/routes/profile/[id]/+page.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { error } from '@sveltejs/kit' -import type { PageLoad } from './$types' - -export const load: PageLoad = ({ params }) => { - if (/0x[a-z0-9]{40}/i.test(params.id)) - return { - id: params.id, - } - - throw error(404, `Incorrect user id format ${params.id}`) -} diff --git a/src/routes/styles.css b/src/routes/styles.css index 54cf0b2..db25cfd 100644 --- a/src/routes/styles.css +++ b/src/routes/styles.css @@ -4,7 +4,9 @@ --color-secondary: #fff; --color-primary: #000; - --color-spacer: #ddd; + --color-grey-border: #ddd; + --color-grey-background: #f0f0f0; + --color-light-grey-background: #ececec; --color-text: #000; @@ -18,7 +20,6 @@ body { width: 100vw; - min-height: 100vh; overflow-x: hidden; margin: 0; padding: 0;