Skip to content

Commit afe0bbb

Browse files
joelamouchejoelamouche
authored
Merge pull request #56 from TheSoftwareDevGuild/improve-front-end-22-09-25
Improve front end 22 09 25
2 parents 0bded49 + 1870944 commit afe0bbb

19 files changed

Lines changed: 378 additions & 13 deletions

‎CONTRIBUTION.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
Contributing to The Guild Genesis
2+
3+
Thank you for your interest in contributing! Please follow these steps before working on an issue or feature:
4+
5+
1. Join our Discord: https://discord.gg/pg4UgaTr
6+
2. Create your profile on https://theguild.dev
7+
3. Edit your Guild profile to include your Discord username (so we can verify your identity and attribute rewards).
8+
4. Discuss the terms for fulfilling the ticket with Antoine (scope, deliverables, timeline).
9+
10+
Rewards and recognition
11+
12+
- Rule of thumb: 10 points per hour, 80 points per full day.
13+
- Contribution tokens have no monetary value. They represent reputation and will grant voting rights in the Guild in the future.
14+
- Your contributions will also be recognized with badges on https://theguild.dev.
15+
16+
Process
17+
18+
- Pick an open issue and comment that you’d like to work on it, or propose a new one.
19+
- Align requirements with Antoine in Discord before starting.
20+
- Submit a PR referencing the issue. Include clear commit messages and a brief changelog in the PR description.
21+
- Be responsive to review feedback; we’ll merge once acceptance criteria are met.
22+
23+
Development quick links
24+
25+
- Frontend (Astro + React): `frontend/`
26+
- Backend (Rust + Axum + SQLx): `backend/`
27+
- Smart Contracts (Foundry): `the-guild-smart-contracts/`
28+
29+
If anything is unclear, ping us in Discord and we’ll help you get unblocked quickly.
30+

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,8 @@ event BadgeCreated(bytes32 indexed name, bytes32 description, address indexed cr
154154

155155
This is a community-driven project. Join our [Discord](https://discord.gg/pg4UgaTr) to discuss features, propose changes, and contribute to the codebase.
156156

157+
See detailed steps in [CONTRIBUTION.md](CONTRIBUTION.md).
158+
157159
## License
158160

159161
See [LICENSE](LICENSE) file for details.

‎frontend/src/components/ActivityTokenBalance.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { useAccount } from "wagmi";
2+
import AddressTokenBalance from "@/components/AddressTokenBalance";
3+
4+
export function ActivityTokenBalance() {
5+
const { address, isConnected } = useAccount();
6+
if (!isConnected || !address) return null;
7+
return <AddressTokenBalance address={address as `0x${string}`} />;
8+
}
9+
10+
export default ActivityTokenBalance;

‎frontend/src/components/AddressTokenBalance.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Coins, HelpCircle } from "lucide-react";
2+
import { formatUnits } from "viem";
3+
import useGetActivityTokenBalance from "@/hooks/attestations/use-get-activity-token-balance";
4+
import {
5+
Tooltip,
6+
TooltipContent,
7+
TooltipProvider,
8+
TooltipTrigger,
9+
} from "@/components/ui/tooltip";
10+
11+
export function AddressTokenBalance({ address }: { address: `0x${string}` }) {
12+
const balanceQuery = useGetActivityTokenBalance(address);
13+
14+
const raw = balanceQuery.data?.raw;
15+
const decimals = balanceQuery.data?.decimals ?? 18;
16+
const formatted = raw === undefined ? undefined : formatUnits(raw, decimals);
17+
18+
return (
19+
<div className="mt-1 flex items-center gap-2 text-xs text-gray-600">
20+
<Coins className="h-3 w-3" />
21+
<span>{balanceQuery.isLoading ? "…" : (formatted ?? "0")} TGA</span>
22+
<TooltipProvider>
23+
<Tooltip>
24+
<TooltipTrigger asChild>
25+
<button aria-label="What is TGA?" className="cursor-help">
26+
<HelpCircle className="h-3.5 w-3.5 text-gray-500" />
27+
</button>
28+
</TooltipTrigger>
29+
<TooltipContent>
30+
<p>The Guild Attestation token rewards activity on the DApp.</p>
31+
</TooltipContent>
32+
</Tooltip>
33+
</TooltipProvider>
34+
</div>
35+
);
36+
}
37+
38+
export default AddressTokenBalance;

‎frontend/src/components/AppSidebar.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Smile, BadgeCheck, Home } from "lucide-react";
1+
import { Smile, BadgeCheck, Home, BookOpen } from "lucide-react";
22

33
import {
44
Sidebar,
@@ -18,6 +18,11 @@ const items = [
1818
url: "/",
1919
icon: Home,
2020
},
21+
{
22+
title: "Getting Started",
23+
url: "/getting-started",
24+
icon: BookOpen,
25+
},
2126
{
2227
title: "Profiles",
2328
url: "/profiles",

‎frontend/src/components/AppWrapper.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
SidebarInset,
1212
} from "@/components/ui/sidebar";
1313
import { AppSidebar } from "@/components/AppSidebar";
14+
import { ActivityTokenBalance } from "@/components/ActivityTokenBalance";
1415

1516
const queryClient = new QueryClient();
1617

@@ -37,6 +38,7 @@ export function AppWrapper({ children }: Web3ProviderProps) {
3738
</div>
3839

3940
<div className="flex items-center space-x-4">
41+
<ActivityTokenBalance />
4042
<ConnectButton />
4143
</div>
4244
</div>

‎frontend/src/components/pages/GettingStartedPage.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { AppWrapper } from "@/components/AppWrapper";
2+
import React from "react";
3+
4+
export default function GettingStartedPage() {
5+
return (
6+
<section className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-10 space-y-8">
7+
<div className="flex items-center justify-between">
8+
<h1 className="text-3xl font-bold tracking-tight">Getting Started</h1>
9+
<a
10+
href="https://discord.gg/pg4UgaTr"
11+
target="_blank"
12+
rel="noreferrer"
13+
className="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
14+
>
15+
Join our Discord
16+
</a>
17+
</div>
18+
19+
<ol className="list-decimal pl-6 space-y-6 text-gray-700">
20+
<li>
21+
<div className="space-y-2">
22+
<h2 className="text-xl font-semibold">
23+
Install and set up MetaMask
24+
</h2>
25+
<p>
26+
Install the MetaMask browser extension or mobile app and create a
27+
wallet. Then add the Polygon Amoy test network in MetaMask (Chain
28+
ID 80002).
29+
</p>
30+
<div className="space-x-3">
31+
<a
32+
href="https://metamask.io/download/"
33+
target="_blank"
34+
rel="noreferrer"
35+
className="text-indigo-600 hover:underline"
36+
>
37+
Download MetaMask
38+
</a>
39+
<a
40+
href="https://chainlist.org/chain/80002"
41+
target="_blank"
42+
rel="noreferrer"
43+
className="text-indigo-600 hover:underline"
44+
>
45+
Add Polygon Amoy via Chainlist
46+
</a>
47+
</div>
48+
</div>
49+
</li>
50+
51+
<li>
52+
<div className="space-y-2">
53+
<h2 className="text-xl font-semibold">
54+
Get Amoy testnet MATIC (gas)
55+
</h2>
56+
<p>
57+
You need a small amount of Amoy MATIC to make on‑chain actions.
58+
Ask in our Discord and a member will send you some testnet funds.
59+
</p>
60+
<a
61+
href="https://discord.gg/pg4UgaTr"
62+
target="_blank"
63+
rel="noreferrer"
64+
className="text-indigo-600 hover:underline"
65+
>
66+
Request Amoy gas on Discord
67+
</a>
68+
</div>
69+
</li>
70+
71+
<li>
72+
<div className="space-y-2">
73+
<h2 className="text-xl font-semibold">Create your Guild profile</h2>
74+
<p>
75+
Head to the Profiles page, connect your wallet, and create your
76+
profile to start building your on‑chain reputation.
77+
</p>
78+
<a href="/profiles" className="text-indigo-600 hover:underline">
79+
Go to Profiles
80+
</a>
81+
</div>
82+
</li>
83+
84+
<li>
85+
<div className="space-y-2">
86+
<h2 className="text-xl font-semibold">Add a badge</h2>
87+
<p>
88+
Propose and create a new skill badge in the Badges page. Badges
89+
represent skills or contributions recognized by the community.
90+
</p>
91+
<a href="/badges" className="text-indigo-600 hover:underline">
92+
Go to Badges
93+
</a>
94+
</div>
95+
</li>
96+
97+
<li>
98+
<div className="space-y-2">
99+
<h2 className="text-xl font-semibold">Give a badge to someone</h2>
100+
<p>
101+
After collaborating, issue a badge attestation to a peer to
102+
acknowledge their work. This helps build credible, portable
103+
developer profiles.
104+
</p>
105+
<a href="/profiles" className="text-indigo-600 hover:underline">
106+
Find a profile to attest
107+
</a>
108+
</div>
109+
</li>
110+
</ol>
111+
</section>
112+
);
113+
}

‎frontend/src/components/pages/HomePage.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,32 @@ export default function HomePage() {
6262
can earn your first attestation.
6363
</p>
6464
</section>
65+
66+
<section className="space-y-3">
67+
<h2 className="text-xl font-semibold">Learn more</h2>
68+
<ul className="list-disc pl-6 space-y-2">
69+
<li>
70+
<a
71+
href="https://medium.com/@antoineestienne/theguild-presentation-2b2b147d1fa5"
72+
target="_blank"
73+
rel="noreferrer"
74+
className="text-indigo-600 hover:underline"
75+
>
76+
The Guild — Presentation
77+
</a>
78+
</li>
79+
<li>
80+
<a
81+
href="https://medium.com/@antoineestienne/theguild-the-plan-25cd1ffd1e5b"
82+
target="_blank"
83+
rel="noreferrer"
84+
className="text-indigo-600 hover:underline"
85+
>
86+
The Guild — The Plan
87+
</a>
88+
</li>
89+
</ul>
90+
</section>
6591
</div>
6692
);
6793
}

‎frontend/src/components/profiles/action-buttons/AddAttestationDialog.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
SelectValue,
3232
} from "@/components/ui/select";
3333
import { useGetAttestations } from "@/hooks/attestations/use-get-attestations";
34+
import { useGetActivityTokenBalance } from "@/hooks/attestations/use-get-activity-token-balance";
3435

3536
const formSchema = z.object({
3637
badgeName: z.string().min(1, { message: "Badge name is required." }),
@@ -56,7 +57,8 @@ export function AddAttestationDialog({
5657
reset,
5758
} = useCreateAttestation();
5859
const { data: badges, isLoading: badgesLoading } = useGetBadges();
59-
const { refetch } = useGetAttestations();
60+
const { refetch: refetchAttestations } = useGetAttestations();
61+
const { refetch: refetchActivityTokenBalance } = useGetActivityTokenBalance();
6062

6163
const form = useForm<FormValues>({
6264
resolver: zodResolver(formSchema),
@@ -73,12 +75,19 @@ export function AddAttestationDialog({
7375

7476
useEffect(() => {
7577
if (isConfirmed) {
76-
refetch();
78+
refetchAttestations();
79+
refetchActivityTokenBalance();
7780
setOpen(false);
7881
form.reset();
7982
reset();
8083
}
81-
}, [isConfirmed, refetch, form, reset]);
84+
}, [
85+
isConfirmed,
86+
refetchAttestations,
87+
refetchActivityTokenBalance,
88+
form,
89+
reset,
90+
]);
8291

8392
return (
8493
<Dialog open={open} onOpenChange={setOpen}>

‎frontend/src/components/profiles/list/ProfileCard.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { EditProfileDialog } from "../action-buttons/EditProfileDialog";
1111
import { useAccount } from "wagmi";
1212
import DeleteProfileDialog from "../action-buttons/DeleteProfileDialog";
1313
import { AddAttestationDialog } from "../action-buttons/AddAttestationDialog";
14+
import AddressTokenBalance from "@/components/AddressTokenBalance";
1415

1516
interface ProfileCardProps {
1617
address: string;
@@ -79,6 +80,7 @@ export function ProfileCard({
7980
{displayAddress}
8081
</a>
8182
</CardDescription>
83+
<AddressTokenBalance address={address as `0x${string}`} />
8284
</div>
8385
{isOwner && (
8486
<EditProfileDialog

0 commit comments

Comments
 (0)