Skip to content

Commit

Permalink
feat: add radix, theme and emotion (#9)
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xbulma
0xbulma authored Oct 26, 2023
1 parent fd26c66 commit 8d0a294
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 98 deletions.
24 changes: 16 additions & 8 deletions front/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
import '@rainbow-me/rainbowkit/styles.css'
import { Providers } from './providers'
import "@rainbow-me/rainbowkit/styles.css";
import "@radix-ui/themes/styles.css";
import { Providers } from "./providers";
import { Theme, ThemePanel } from "@radix-ui/themes";
import ThemeProvider from "@/components/ThemeProvider.tsx";

export const metadata = {
title: 'wagmi',
}
title: "wagmi",
};

export default function RootLayout({
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
<ThemeProvider attribute="class">
<Theme>
<Providers>{children}</Providers>
<ThemePanel />
</Theme>
</ThemeProvider>
</body>
</html>
)
);
}
181 changes: 92 additions & 89 deletions front/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,99 @@
import { Account } from '../components/Account'
import { Balance } from '../components/Balance'
import { BlockNumber } from '../components/BlockNumber'
import { ConnectButton } from '../components/ConnectButton'
import { Connected } from '../components/Connected'
import { NetworkSwitcher } from '../components/NetworkSwitcher'
import { ReadContract } from '../components/ReadContract'
import { ReadContracts } from '../components/ReadContracts'
import { ReadContractsInfinite } from '../components/ReadContractsInfinite'
import { SendTransaction } from '../components/SendTransaction'
import { SendTransactionPrepared } from '../components/SendTransactionPrepared'
import { SignMessage } from '../components/SignMessage'
import { SignTypedData } from '../components/SignTypedData'
import { Token } from '../components/Token'
import { WatchContractEvents } from '../components/WatchContractEvents'
import { WatchPendingTransactions } from '../components/WatchPendingTransactions'
import { WriteContract } from '../components/WriteContract'
import { WriteContractPrepared } from '../components/WriteContractPrepared'
import { Box, Flex } from "@radix-ui/themes";
import { Account } from "../components/Account";
import { Balance } from "../components/Balance";
import { BlockNumber } from "../components/BlockNumber";
import { ConnectButton } from "../components/ConnectButton";
import { Connected } from "../components/Connected";
import { NetworkSwitcher } from "../components/NetworkSwitcher";
import { ReadContract } from "../components/ReadContract";
import { ReadContracts } from "../components/ReadContracts";
import { ReadContractsInfinite } from "../components/ReadContractsInfinite";
import { SendTransaction } from "../components/SendTransaction";
import { SendTransactionPrepared } from "../components/SendTransactionPrepared";
import { SignMessage } from "../components/SignMessage";
import { SignTypedData } from "../components/SignTypedData";
import { Token } from "../components/Token";
import { WatchContractEvents } from "../components/WatchContractEvents";
import { WatchPendingTransactions } from "../components/WatchPendingTransactions";
import { WriteContract } from "../components/WriteContract";
import { WriteContractPrepared } from "../components/WriteContractPrepared";

export function Page() {
return (
<>
<h1>wagmi + RainbowKit + Next.js</h1>
<Flex align="center" direction="column">
<Box>
<h1>wagmi + RainbowKit + Next.js</h1>

<ConnectButton />
<ConnectButton />

<Connected>
<hr />
<h2>Network</h2>
<NetworkSwitcher />
<br />
<hr />
<h2>Account</h2>
<Account />
<br />
<hr />
<h2>Balance</h2>
<Balance />
<br />
<hr />
<h2>Block Number</h2>
<BlockNumber />
<br />
<hr />
<h2>Read Contract</h2>
<ReadContract />
<br />
<hr />
<h2>Read Contracts</h2>
<ReadContracts />
<br />
<hr />
<h2>Read Contracts Infinite</h2>
<ReadContractsInfinite />
<br />
<hr />
<h2>Send Transaction</h2>
<SendTransaction />
<br />
<hr />
<h2>Send Transaction (Prepared)</h2>
<SendTransactionPrepared />
<br />
<hr />
<h2>Sign Message</h2>
<SignMessage />
<br />
<hr />
<h2>Sign Typed Data</h2>
<SignTypedData />
<br />
<hr />
<h2>Token</h2>
<Token />
<br />
<hr />
<h2>Watch Contract Events</h2>
<WatchContractEvents />
<br />
<hr />
<h2>Watch Pending Transactions</h2>
<WatchPendingTransactions />
<br />
<hr />
<h2>Write Contract</h2>
<WriteContract />
<br />
<hr />
<h2>Write Contract (Prepared)</h2>
<WriteContractPrepared />
</Connected>
</>
)
<Connected>
<hr />
<h2>Network</h2>
<NetworkSwitcher />
<br />
<hr />
<h2>Account</h2>
<Account />
<br />
<hr />
<h2>Balance</h2>
<Balance />
<br />
<hr />
<h2>Block Number</h2>
<BlockNumber />
<br />
<hr />
<h2>Read Contract</h2>
<ReadContract />
<br />
<hr />
<h2>Read Contracts</h2>
<ReadContracts />
<br />
<hr />
<h2>Read Contracts Infinite</h2>
<ReadContractsInfinite />
<br />
<hr />
<h2>Send Transaction</h2>
<SendTransaction />
<br />
<hr />
<h2>Send Transaction (Prepared)</h2>
<SendTransactionPrepared />
<br />
<hr />
<h2>Sign Message</h2>
<SignMessage />
<br />
<hr />
<h2>Sign Typed Data</h2>
<SignTypedData />
<br />
<hr />
<h2>Token</h2>
<Token />
<br />
<hr />
<h2>Watch Contract Events</h2>
<WatchContractEvents />
<br />
<hr />
<h2>Watch Pending Transactions</h2>
<WatchPendingTransactions />
<br />
<hr />
<h2>Write Contract</h2>
<WriteContract />
<br />
<hr />
<h2>Write Contract (Prepared)</h2>
<WriteContractPrepared />
</Connected>
</Box>
</Flex>
);
}

export default Page
export default Page;
13 changes: 13 additions & 0 deletions front/src/components/ThemeProvider.tsx/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
type ThemeProviderProps = Parameters<typeof NextThemesProvider>[0];

/**
* Your app's theme provider component.
* 'use client' is essential for next-themes to work with app-dir.
*/
export default function ThemeProvider({ children, ...props }: any) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}
5 changes: 4 additions & 1 deletion front/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@
{
"name": "next"
}
]
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
Expand Down

0 comments on commit 8d0a294

Please sign in to comment.