diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/.gitignore b/basic/59-wagmi-and-nextjs/wagmi-basic/.gitignore new file mode 100644 index 000000000..4d29575de --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/README.md b/basic/59-wagmi-and-nextjs/wagmi-basic/README.md new file mode 100644 index 000000000..13a2bb4a1 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/README.md @@ -0,0 +1,11 @@ + +# Run the demo +``` +yarn +yarn start +``` + +# Reference +- https://wagmi.sh/react/getting-started +- https://wagmi.sh/examples/connect-wallet + diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/craco.config.js b/basic/59-wagmi-and-nextjs/wagmi-basic/craco.config.js new file mode 100644 index 000000000..9e126a180 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/craco.config.js @@ -0,0 +1,8 @@ +const path = require('path'); +module.exports = { + webpack: { + alias: { + '@': path.resolve(__dirname, 'src'), + }, + }, +}; diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/jsconfig.json b/basic/59-wagmi-and-nextjs/wagmi-basic/jsconfig.json new file mode 100644 index 000000000..c932e6350 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } + } \ No newline at end of file diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/package.json b/basic/59-wagmi-and-nextjs/wagmi-basic/package.json new file mode 100644 index 000000000..ae1513a42 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/package.json @@ -0,0 +1,42 @@ +{ + "name": "wagmi-basic", + "version": "0.1.0", + "private": true, + "dependencies": { + "@craco/craco": "^7.1.0", + "@material-ui/core": "^4.12.4", + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^13.0.0", + "@testing-library/user-event": "^13.2.1", + "@wagmi/chains": "^1.6.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "viem": "^1.5.3", + "wagmi": "^1.3.9", + "web-vitals": "^2.1.0" + }, + "scripts": { + "start": "craco start", + "build": "craco build", + "test": "craco test" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/public/index.html b/basic/59-wagmi-and-nextjs/wagmi-basic/public/index.html new file mode 100644 index 000000000..dd0a4cd9b --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/public/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + Wagmi Demo + + + +
+ + + diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/public/manifest.json b/basic/59-wagmi-and-nextjs/wagmi-basic/public/manifest.json new file mode 100644 index 000000000..addfc9944 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/public/manifest.json @@ -0,0 +1,10 @@ +{ + "short_name": "Wagmi Demo", + "name": "Wagmi Demo", + "icons": [ + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/public/robots.txt b/basic/59-wagmi-and-nextjs/wagmi-basic/public/robots.txt new file mode 100644 index 000000000..e9e57dc4d --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/src/App.css b/basic/59-wagmi-and-nextjs/wagmi-basic/src/App.css new file mode 100644 index 000000000..a75b96de1 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/src/App.css @@ -0,0 +1,14 @@ + +.profile { + position: relative; + width: 60%; + top: 20vh; + margin: auto; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: left; + font-size: 20px; + font-weight: 500; +} + diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/src/App.js b/basic/59-wagmi-and-nextjs/wagmi-basic/src/App.js new file mode 100644 index 000000000..016f00e49 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/src/App.js @@ -0,0 +1,82 @@ +import Button from '@material-ui/core/Button'; +import './App.css'; +//wagmi dependencies +import { WagmiConfig, createConfig, configureChains } from 'wagmi' +import { useAccount, useConnect, useDisconnect } from 'wagmi' +import { publicProvider } from 'wagmi/providers/public'; +import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; +import { MetaMaskConnector } from 'wagmi/connectors/metaMask'; +import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' +//view dependencies +import { localhost, polygon } from '@wagmi/chains' + +/*Firstly we create the client calling to public JSON rpcs. + You can refer to https://wagmi.sh/react/providers/configuring-chains + Also keep in mind that publicClient is the http client connecting to public JSON-RPC endpoints while webSocketPublicClient + is websocket client. +*/ +const { chains, publicClient, webSocketPublicClient ,} = configureChains( + //more chains see https://www.npmjs.com/package/@wagmi/chains + [polygon,localhost], + //providers are tried one by one to connect to above chains. more to see https://wagmi.sh/react/providers/configuring-chains + //publicProvider will get the url from the preconfigured chains + [publicProvider(), jsonRpcProvider({rpc: (chain) => ({http: 'https://localhost:8545',}),})] +) + +/*Create wagmi config +*/ +const config = createConfig({ + connectors:[ + new MetaMaskConnector({chains}), + // new WalletConnectConnector({ + // chains, + // options: { + // projectId: '...', + // }, + // }), + //See https://wagmi.sh/examples/connect-wallet for more + ], + publicClient, + webSocketPublicClient +}) + +function App() { + return ( + + + + ) +} + +const Wallet = ()=> { + const { address, connector, isConnected } = useAccount(); + const { connect, connectors } = useConnect(); + const { disconnect } = useDisconnect() + + if (isConnected) + return ( +
+
Connector:{connector.name}
+
Current address:{address}
+
+ +
+
+ ) + return (
+ {connectors.map((c) => ( + + ))} + +
) + +} + +export default App; \ No newline at end of file diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/src/index.css b/basic/59-wagmi-and-nextjs/wagmi-basic/src/index.css new file mode 100644 index 000000000..ec2585e8c --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/basic/59-wagmi-and-nextjs/wagmi-basic/src/index.js b/basic/59-wagmi-and-nextjs/wagmi-basic/src/index.js new file mode 100644 index 000000000..7716fe4c7 --- /dev/null +++ b/basic/59-wagmi-and-nextjs/wagmi-basic/src/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); +