add wallet connection and mock data
This commit is contained in:
parent
5f507eb39a
commit
32c147f7f0
|
|
@ -9,8 +9,11 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@rainbow-me/rainbowkit": "^1.3.1",
|
||||||
|
"next": "13.5.6",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"next": "13.5.6"
|
"viem": "^1.20.0",
|
||||||
|
"wagmi": "^1.4.12"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3177
pnpm-lock.yaml
3177
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,9 +1,9 @@
|
||||||
:root {
|
:root {
|
||||||
--max-width: 1100px;
|
--max-width: 1100px;
|
||||||
--border-radius: 12px;
|
--border-radius: 12px;
|
||||||
--color-bg0: #000;
|
--color-bg0: hsl(210deg 40% 4%);
|
||||||
--color-bg1: #222;
|
--color-bg1: hsl(210deg 40% 12%);
|
||||||
--color-accent: rgb(185, 0, 41);
|
--color-accent: hsl(345deg 80% 35%);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|
@ -25,6 +25,6 @@ a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.fg-accent {
|
||||||
max-width: var(--max-width);
|
color: var(--color-accent);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import Header from "@/components/Header";
|
import Header from "@/components/Header";
|
||||||
|
import WrapperComponent from "@/components/WrapperComponent";
|
||||||
|
import "@rainbow-me/rainbowkit/styles.css";
|
||||||
import { Inter } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
|
|
@ -13,8 +15,10 @@ export default function RootLayout({ children }) {
|
||||||
return (
|
return (
|
||||||
<html lang="tr">
|
<html lang="tr">
|
||||||
<body className={inter.className}>
|
<body className={inter.className}>
|
||||||
<Header />
|
<WrapperComponent>
|
||||||
{children}
|
<Header />
|
||||||
|
{children}
|
||||||
|
</WrapperComponent>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,17 @@
|
||||||
|
import Container from "@/components/Container";
|
||||||
|
import CourseGrid from "@/components/CourseGrid";
|
||||||
|
import { COURSES } from "@/mockData";
|
||||||
import styles from "./page.module.css";
|
import styles from "./page.module.css";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return <main className={styles.root}></main>;
|
return (
|
||||||
|
<main className={styles.root}>
|
||||||
|
<Container>
|
||||||
|
<section>
|
||||||
|
<h1 className={styles.sectionTitle}>Çok Satanlar</h1>
|
||||||
|
<CourseGrid courses={COURSES} />
|
||||||
|
</section>
|
||||||
|
</Container>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,9 @@
|
||||||
.root {
|
.root {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import styles from "./Container.module.css";
|
||||||
|
|
||||||
|
export default function Container({ children }) {
|
||||||
|
return <div className={styles.root}>{children}</div>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.root {
|
||||||
|
max-width: var(--max-width);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import styles from "./CourseGrid.module.css";
|
||||||
|
import CourseGridItem from "./CourseGridItem";
|
||||||
|
|
||||||
|
export default function CourseGrid({ courses }) {
|
||||||
|
return (
|
||||||
|
<div className={styles.root}>
|
||||||
|
{courses &&
|
||||||
|
courses.map((course) => (
|
||||||
|
<CourseGridItem key={course.id} course={course} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
.root {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, 300px);
|
||||||
|
justify-content: stretch;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import styles from "./CourseGridItem.module.css";
|
||||||
|
|
||||||
|
export default function CourseGridItem({ course }) {
|
||||||
|
return (
|
||||||
|
<div className={styles.root}>
|
||||||
|
<span>{course.name}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
.root {
|
||||||
|
background-color: var(--color-bg1);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,14 @@
|
||||||
|
import { ConnectButton } from "@rainbow-me/rainbowkit";
|
||||||
import styles from "./Header.module.css";
|
import styles from "./Header.module.css";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
return (
|
return (
|
||||||
<header className={styles.root}>
|
<header className={styles.root}>
|
||||||
<span>selam ben bir Header'ım</span>
|
<div className={styles.brand}>
|
||||||
|
<span>Cub</span>
|
||||||
|
<span className="fg-accent">Learn</span>
|
||||||
|
</div>
|
||||||
|
<ConnectButton />
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,12 @@
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
background-color: var(--color-bg1);
|
background-color: var(--color-bg1);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { useAccount } from "wagmi";
|
||||||
|
|
||||||
|
export default function WalletManager() {
|
||||||
|
const { address } = useAccount();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (address) {
|
||||||
|
console.log("** Wallet connected. Address: ", address);
|
||||||
|
// fetchMe();
|
||||||
|
} else {
|
||||||
|
console.log("** Wallet disconnected.");
|
||||||
|
}
|
||||||
|
}, [address]);
|
||||||
|
|
||||||
|
// const fetchMe = async () => {
|
||||||
|
// const resp = await fetch(`${CONFIG.BACKEND_ADDRESS}/me`, {
|
||||||
|
// headers: {
|
||||||
|
// authorization: `Basic ${address}`,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// const respData = await resp.json();
|
||||||
|
// console.log("hey user:", respData.data);
|
||||||
|
// };
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import WalletManager from "@/components/WalletManager";
|
||||||
|
import {
|
||||||
|
darkTheme,
|
||||||
|
getDefaultWallets,
|
||||||
|
RainbowKitProvider,
|
||||||
|
} from "@rainbow-me/rainbowkit";
|
||||||
|
import { configureChains, createConfig, WagmiConfig } from "wagmi";
|
||||||
|
import { hardhat, sepolia } from "wagmi/chains";
|
||||||
|
import { publicProvider } from "wagmi/providers/public";
|
||||||
|
|
||||||
|
const { chains, publicClient } = configureChains(
|
||||||
|
[sepolia, hardhat],
|
||||||
|
[publicProvider()]
|
||||||
|
);
|
||||||
|
|
||||||
|
const { connectors } = getDefaultWallets({
|
||||||
|
appName: "GSB Genç Blokzincir Hackathon Project",
|
||||||
|
projectId: "YOUR_PROJECT_ID",
|
||||||
|
chains,
|
||||||
|
});
|
||||||
|
|
||||||
|
const wagmiConfig = createConfig({
|
||||||
|
autoConnect: true,
|
||||||
|
connectors,
|
||||||
|
publicClient,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function WrapperComponent({ children }) {
|
||||||
|
return (
|
||||||
|
<WagmiConfig config={wagmiConfig}>
|
||||||
|
<RainbowKitProvider
|
||||||
|
chains={chains}
|
||||||
|
theme={darkTheme({
|
||||||
|
accentColor: "var(--color-accent)",
|
||||||
|
})}
|
||||||
|
locale="tr-TR"
|
||||||
|
>
|
||||||
|
<WalletManager />
|
||||||
|
{children}
|
||||||
|
</RainbowKitProvider>
|
||||||
|
</WagmiConfig>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
export const COURSES = [
|
||||||
|
{
|
||||||
|
id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
|
||||||
|
name: "Ethereum ve Solidity",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "c7253736-5756-4a64-a072-917c66afa877",
|
||||||
|
name: "Next.js ile Önyüz Uygulamaları Geliştirme",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
|
||||||
|
name: "Pardus'a Giriş",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export const cn = (...args) => {
|
||||||
|
return args.filter((arg) => typeof arg === "string").join(" ");
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue