add wallet connection and mock data
This commit is contained in:
parent
5f507eb39a
commit
32c147f7f0
|
|
@ -9,8 +9,11 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rainbow-me/rainbowkit": "^1.3.1",
|
||||
"next": "13.5.6",
|
||||
"react": "^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 {
|
||||
--max-width: 1100px;
|
||||
--border-radius: 12px;
|
||||
--color-bg0: #000;
|
||||
--color-bg1: #222;
|
||||
--color-accent: rgb(185, 0, 41);
|
||||
--color-bg0: hsl(210deg 40% 4%);
|
||||
--color-bg1: hsl(210deg 40% 12%);
|
||||
--color-accent: hsl(345deg 80% 35%);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -25,6 +25,6 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--max-width);
|
||||
.fg-accent {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import Header from "@/components/Header";
|
||||
import WrapperComponent from "@/components/WrapperComponent";
|
||||
import "@rainbow-me/rainbowkit/styles.css";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
|
|
@ -13,8 +15,10 @@ export default function RootLayout({ children }) {
|
|||
return (
|
||||
<html lang="tr">
|
||||
<body className={inter.className}>
|
||||
<Header />
|
||||
{children}
|
||||
<WrapperComponent>
|
||||
<Header />
|
||||
{children}
|
||||
</WrapperComponent>
|
||||
</body>
|
||||
</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";
|
||||
|
||||
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 {
|
||||
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";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,4 +3,12 @@
|
|||
padding: 1rem;
|
||||
background-color: var(--color-bg1);
|
||||
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