From 034aaa663a259d8e4e23d0e27f7dc7124b35a01a Mon Sep 17 00:00:00 2001 From: 0x-stan <744428333@qq.com> Date: Thu, 20 Oct 2022 12:11:20 +0800 Subject: [PATCH] init uniswapV2-interface-wagmi --- basic/59-wagmi-and-nextjs/README.md | 191 ++++++++++++++++++ .../uniswap-v2-interface-wagmi/.env.example | 1 + .../uniswap-v2-interface-wagmi/.gitignore | 36 ++++ .../uniswap-v2-interface-wagmi/README.md | 86 ++++++++ .../components/cards.tsx | 55 +++++ .../components/globalstyles.tsx | 23 +++ .../components/sharedstyles.tsx | 54 +++++ .../uniswap-v2-interface-wagmi/next.config.js | 10 + .../uniswap-v2-interface-wagmi/package.json | 23 +++ .../uniswap-v2-interface-wagmi/pages/_app.tsx | 49 +++++ .../pages/_document.tsx | 25 +++ .../pages/index.tsx | 35 ++++ .../uniswap-v2-interface-wagmi/pages/swap.tsx | 19 ++ .../public/favicon.ico | Bin 0 -> 25931 bytes .../uniswap-v2-interface-wagmi/styled.d.ts | 10 + .../uniswap-v2-interface-wagmi/tsconfig.json | 20 ++ 16 files changed, 637 insertions(+) create mode 100644 basic/59-wagmi-and-nextjs/README.md create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.env.example create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.gitignore create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/README.md create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/cards.tsx create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/globalstyles.tsx create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/sharedstyles.tsx create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/next.config.js create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/package.json create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_app.tsx create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_document.tsx create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/index.tsx create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/swap.tsx create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/public/favicon.ico create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/styled.d.ts create mode 100644 basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/tsconfig.json diff --git a/basic/59-wagmi-and-nextjs/README.md b/basic/59-wagmi-and-nextjs/README.md new file mode 100644 index 000000000..c1e797be8 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/README.md @@ -0,0 +1,191 @@ +# Wagmi and Nextjs + +We will try to make a simple website of UniswapV2 by wagmi and nextjs. + +## tech stacks + +- React.js (hooks) +- TypeScript +- wagmi (React Hooks for Ethereum) +- etehrs +- Next.js (server-side rendering (SSR)) +- rainbowkit (based on wagmi) +- styled-components (react css package) + +### wagmi + +**wagmi**(We all gonna make it!) is a collection of React Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to "Connect Wallet," display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence. + +### Next.js + +Next.js aims to have best-in-class developer experience and many built-in features, such as: + +- An intuitive page-based routing system (with support for dynamic routes) +- Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis +- Automatic code splitting for faster page loads +- Client-side routing with optimized prefetching +- Built-in CSS and Sass support, and support for any CSS-in-JS library +- Development environment with Fast Refresh support +- API routes to build API endpoints with Serverless Functions +- Fully extendable + +### Rainbow kit + +RainbowKit is a React library that makes it easy to add wallet connection to your dapp. It's intuitive, responsive and customizable. + +## Step-by-Step + +### installation + +Create dapp from templete which is base on react, typescript and styled-components. + +```sh +yarn create next-app --example with-styled-components uniswap-v2-interface-wagmi +``` + +After install npm package, we get a starter in ./uniswap-v2-interface-wagmi. Then enter folder, if it works well, you will see website run at localhost:3000. + +```sn +cd uniswap-v2-interface-wagmi/ +yarn dev +``` + +Add wagmi, ethers, rainbowkit + +```sh +yarn add wagmi ethers @rainbow-me/rainbowkit +``` + +### Config Wagmi and Rainbowkit + +Let's config wagmi and rainbowkit, so that our web2 website would transfer to web3 dapp. + +import wagmi and rainbowkit. + +```tsx +// pages/_app.tsx + +import { + getDefaultWallets, + RainbowKitProvider, +} from '@rainbow-me/rainbowkit'; +import { + chain, + configureChains, + createClient, + WagmiConfig, +} from 'wagmi'; +import { alchemyProvider } from 'wagmi/providers/alchemy'; +import { publicProvider } from 'wagmi/providers/public'; +import '@rainbow-me/rainbowkit/styles.css'; + +``` + +configure + +```tsx +// pages/_app.tsx + +const { chains, provider } = configureChains( + [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum], + [ + alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), + publicProvider() + ] +); + +const { connectors } = getDefaultWallets({ + appName: 'My RainbowKit App', + chains +}); + +const wagmiClient = createClient({ + autoConnect: true, + connectors, + provider +}) +``` + +Add ``, `` to contain our page content in react node + +```tsx +// pages/_app.tsx + + + + + + + + + +``` + +Ofcourse, we also need to add ALCHEMY_ID in `.env` + +```sh +ALCHEMY_ID=XXX +``` + +Change some text content, rename page name and file name. + +- edit `components/cards.tsx`, make it to show multiple links +- change `pages/index.tsx` text content +- rename `abount.tsx` to `swap.tsx` + +```tsx +// components/cards.tsx +// replace export default part +interface PageProp { + href: string; + name: string; +} +export default function Cards(props: { pages: PageProp[] }) { + return ( + + + {props.pages.map((item, index) => ( + + ))} + + + ); +} + +// pages/index.tsx +// change text content whatever you want + +... + +// pass our swap page path into Cards component + + +// rename `abount.tsx` to `swap.tsx` + +``` + +Then we get ready to make a uniswapv2 interface. + +## Swap Page + +First, add a connect wallet button. Just simply add it from rainbowkit, then our dapp already have connected wallet function, you could test it by clicking the button. + +```tsx +// pages/swap.tsx + +import { ConnectButton } from '@rainbow-me/rainbowkit'; + +... + +... +``` + +## Reference + +- wagmi +- Next.js +- rainbowkit +- styled-components +- [Client-side vs. server-side rendering: why it’s not all black and white](https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/) diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.env.example b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.env.example new file mode 100644 index 000000000..a8d5b356d --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.env.example @@ -0,0 +1 @@ +ALCHEMY_ID=XXX diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.gitignore b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.gitignore new file mode 100644 index 000000000..c87c9b392 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/README.md b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/README.md new file mode 100644 index 000000000..5db0c33b4 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/README.md @@ -0,0 +1,86 @@ +# Example app with styled-components + +This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components). + +This example uses the Rust-based [SWC](https://nextjs.org/docs/advanced-features/compiler#styled-components) in Next.js for better performance than Babel. + +Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js. + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components) + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components&project-name=with-styled-components&repository-name=with-styled-components) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: + +```bash +npx create-next-app --example with-styled-components with-styled-components-app +``` + +```bash +yarn create next-app --example with-styled-components with-styled-components-app +``` + +```bash +pnpm create next-app --example with-styled-components with-styled-components-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +### Try it on CodeSandbox + +[Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-styled-components) + +### Notes + +When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `next/link` within a styled-component, the [as](https://styled-components.com/docs/api#as-polymorphic-prop) prop provided by `styled` will collide with the Link's `as` prop and cause styled-components to throw an `Invalid tag` error. To avoid this, you can either use the recommended [forwardedAs](https://styled-components.com/docs/api#forwardedas-prop) prop from styled-components or use a different named prop to pass to a `styled` Link. + +
+Click to expand workaround example +
+ +**components/StyledLink.js** + +```javascript +import Link from 'next/link' +import styled from 'styled-components' + +const StyledLink = ({ as, children, className, href }) => ( + + {children} + +) + +export default styled(StyledLink)` + color: #0075e0; + text-decoration: none; + transition: all 0.2s ease-in-out; + + &:hover { + color: #40a9ff; + } + + &:focus { + color: #40a9ff; + outline: none; + border: 0; + } +` +``` + +**pages/index.js** + +```javascript +import StyledLink from '../components/StyledLink' + +export default () => ( + + First post + +) +``` + +
diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/cards.tsx b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/cards.tsx new file mode 100644 index 000000000..2d56a08ae --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/cards.tsx @@ -0,0 +1,55 @@ +import styled from 'styled-components'; +import Link from 'next/link'; + +export const FlexContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + flex-flow: column wrap; + max-width: 800px; + margin-top: 3rem; +`; + +export const Card = styled.div` + padding: 1.5rem; + color: inherit; + text-decoration: none; + border: 1px solid black; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; + width: 100%; + + &:hover, + :focus, + :active { + color: #0070f3; + border-color: #0070f3; + } +`; + +const StyledA = styled.a` + margin: 0 0 1rem 0; + font-size: 1.5rem; +`; + +const StyledLink = ({ href, name }) => ( + + {name}→ + +); + +interface PageProp { + href: string; + name: string; +} +export default function Cards(props: { pages: PageProp[] }) { + return ( + + + {props.pages.map((item, index) => ( + + ))} + + + ); +} diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/globalstyles.tsx b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/globalstyles.tsx new file mode 100644 index 000000000..fe4043d68 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/globalstyles.tsx @@ -0,0 +1,23 @@ +import { createGlobalStyle } from 'styled-components' + +const GlobalStyle = createGlobalStyle` + html, + body { + color: ${({ theme }) => theme.colors.primary}; + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + } + + a { + color: inherit; + text-decoration: none; + } + + * { + box-sizing: border-box; + } +` + +export default GlobalStyle diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/sharedstyles.tsx b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/sharedstyles.tsx new file mode 100644 index 000000000..43e6d0765 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/components/sharedstyles.tsx @@ -0,0 +1,54 @@ +import styled from 'styled-components' + +const Container = styled.div` + padding: 0 0.5rem; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + height: 100vh; + min-height: 100vh; +` +const Main = styled.main` + padding: 5rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +` + +const Title = styled.h1` + margin: 0; + line-height: 1.15; + font-size: 4rem; + text-align: center; + text-decoration: none; + + a { + color: ${({ theme }) => theme.colors.secondary}; + text-decoration: none; + &:hover, + :focus, + :active { + text-decoration: underline; + } + } +` + +const Description = styled.p` + text-align: center; + line-height: 1.5; + font-size: 1.5rem; +` +const CodeTag = styled.code` + background: #fafafa; + border-radius: 5px; + margin: 0 0.75rem; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; +` + +export { Container, Main, Title, Description, CodeTag } diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/next.config.js b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/next.config.js new file mode 100644 index 000000000..52503c261 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/next.config.js @@ -0,0 +1,10 @@ +/** @type {import('next').NextConfig} */ + +const nextConfig = { + reactStrictMode: true, + compiler: { + styledComponents: true, + }, +} + +module.exports = nextConfig diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/package.json b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/package.json new file mode 100644 index 000000000..93736ba84 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/package.json @@ -0,0 +1,23 @@ +{ + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@rainbow-me/rainbowkit": "^0.7.1", + "ethers": "^5.7.1", + "next": "latest", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "styled-components": "^5.3.5", + "wagmi": "^0.7.5" + }, + "devDependencies": { + "@types/node": "^18.0.0", + "@types/react": "^18.0.14", + "@types/react-dom": "^18.0.5", + "@types/styled-components": "^5.1.25", + "typescript": "^4.7.4" + } +} diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_app.tsx b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_app.tsx new file mode 100644 index 000000000..d0110ebaf --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_app.tsx @@ -0,0 +1,49 @@ +import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'; +import { chain, configureChains, createClient, WagmiConfig } from 'wagmi'; +import { alchemyProvider } from 'wagmi/providers/alchemy'; +import { publicProvider } from 'wagmi/providers/public'; +import type { AppProps } from 'next/app'; +import { ThemeProvider, DefaultTheme } from 'styled-components'; +import GlobalStyle from '../components/globalstyles'; +import '@rainbow-me/rainbowkit/styles.css'; + +const theme: DefaultTheme = { + colors: { + primary: '#111', + secondary: '#0070f3', + }, +}; + +const { chains, provider } = configureChains( + [chain.goerli], + [ + alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), + publicProvider() + ] +); + +const { connectors } = getDefaultWallets({ + appName: 'UniswapV2 Interface wagmi', + chains +}); + +const wagmiClient = createClient({ + autoConnect: true, + connectors, + provider +}) + +export default function App({ Component, pageProps }: AppProps) { + return ( + <> + + + + + + + + + + ); +} diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_document.tsx b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_document.tsx new file mode 100644 index 000000000..cb2a97b43 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/_document.tsx @@ -0,0 +1,25 @@ +import Document, { DocumentContext } from 'next/document' +import { ServerStyleSheet } from 'styled-components' + +export default class MyDocument extends Document { + static async getInitialProps(ctx: DocumentContext) { + const sheet = new ServerStyleSheet() + const originalRenderPage = ctx.renderPage + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => + sheet.collectStyles(), + }) + + const initialProps = await Document.getInitialProps(ctx) + return { + ...initialProps, + styles: [initialProps.styles, sheet.getStyleElement()], + } + } finally { + sheet.seal() + } + } +} diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/index.tsx b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/index.tsx new file mode 100644 index 000000000..893ab75b0 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/index.tsx @@ -0,0 +1,35 @@ +import Head from 'next/head' +import Cards from '../components/cards' +import { + Container, + Main, + Title, + Description, + CodeTag, +} from '../components/sharedstyles' + +export default function Home() { + return ( + + + UniswapV2 Interface + + + +
+ + UniswapV2 + + + + A simple Interface with wagmi and nextjs of UniswapV2. + + + +
+ + ) +} + diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/swap.tsx b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/swap.tsx new file mode 100644 index 000000000..8d31037f6 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/pages/swap.tsx @@ -0,0 +1,19 @@ +import Link from 'next/link' +import { Container, Main, Title, Description } from '../components/sharedstyles' +import { ConnectButton } from '@rainbow-me/rainbowkit'; + +export default function About() { + return ( + +
+ Swap + + + ← Go Back + + + +
+ + ) +} diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/public/favicon.ico b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 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 LrJugUA?W`A8`#=m literal 0 HcmV?d00001 diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/styled.d.ts b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/styled.d.ts new file mode 100644 index 000000000..b9d36565b --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/styled.d.ts @@ -0,0 +1,10 @@ +import 'styled-components' + +declare module 'styled-components' { + export interface DefaultTheme { + colors: { + primary: string + secondary: string + } + } +} diff --git a/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/tsconfig.json b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/tsconfig.json new file mode 100644 index 000000000..94136effc --- /dev/null +++ b/basic/59-wagmi-and-nextjs/uniswap-v2-interface-wagmi/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "resolveJsonModule": true, + "moduleResolution": "node", + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}