chore: setup dev container (#31)

* chore: bring dev-container from zapp-staking * chore: prettier * chore: install `date-fns`, upgrade `formik` * chore: re-order pre-commit hook * chore: prettier-tslint * fix(proposal-table): use date-fns for duration * fix: temporarily remove formik form
zer0-os · Sep 7, 2023 · a840ece · a840ece
1 parent 2168176
commit a840ece
Show file tree

Hide file tree

Showing 91 changed files with 13,212 additions and 4,929 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,33 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+	},
+	settings: {
+		react: {
+			version: '17',
+		},
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:react/recommended',
+		'plugin:react-hooks/recommended',
+		'plugin:@typescript-eslint/recommended',
+		'prettier',
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+		ecmaVersion: 'latest',
+		sourceType: 'module',
+	},
+	plugins: ['react', '@typescript-eslint'],
+	rules: {
+		quotes: ['error', 'single'],
+		semi: ['error', 'always'],
+		'react/react-in-jsx-scope': 'off',
+	},
+	ignorePatterns: ['*.config.js'],
+};
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run prettier
+npm run lint
+
+npm run test
diff --git a/dev-environment/.env.development.local.example b/dev-environment/.env.development.local.example
@@ -0,0 +1 @@
+VITE_RPC_URL_1="https://mainnet.infura.io/..."
diff --git a/dev-environment/index.html b/dev-environment/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>zApp Staking Dev Environment</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>
diff --git a/dev-environment/src/components/DevApp.tsx b/dev-environment/src/components/DevApp.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { DaosApp } from '@/index';
+
+import { ethers } from 'ethers';
+import { useAccount, useConnect } from 'wagmi';
+import { useEthersProvider } from '../lib/useEthersProvider';
+import { injectedConnector } from '../lib/connectors';
+
+import { DevControls } from './DevControls';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const RPC_URL = import.meta.env.VITE_RPC_URL_1 ?? process.env.VITE_RPC_URL_1;
+
+export const DevApp = () => {
+	const { address } = useAccount();
+	const { connect } = useConnect({
+		connector: injectedConnector,
+	});
+
+	const provider = useEthersProvider({ chainId: 1 });
+
+	return (
+		<>
+			<DevControls />
+			<DaosApp
+				provider={provider ?? new ethers.providers.JsonRpcProvider(RPC_URL)}
+				route={'wilder'}
+				web3={{
+					chainId: provider?.network.chainId ?? 1,
+					address: address,
+					connectWallet: connect,
+				}}
+			/>
+		</>
+	);
+};
diff --git a/dev-environment/src/components/DevControls.tsx b/dev-environment/src/components/DevControls.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { useAccount, useConnect } from 'wagmi';
+import { truncateAddress } from '@zero-tech/zui/utils';
+import { injectedConnector } from '../lib/connectors';
+import { version } from '../../../package.json';
+
+export const DevControls = () => {
+	const { address } = useAccount();
+	const { connect } = useConnect({
+		connector: injectedConnector,
+	});
+
+	const content = address ? (
+		<span>
+			Connected as <b>{truncateAddress(address)}</b>
+		</span>
+	) : (
+		<button onClick={() => connect()}>Connect</button>
+	);
+
+	return (
+		<footer
+			style={{
+				position: 'fixed',
+				bottom: 0,
+				width: '100%',
+				boxSizing: 'border-box',
+				background: 'white',
+				padding: '0.5rem',
+				borderRadius: '0.5rem',
+				display: 'flex',
+				justifyContent: 'space-between',
+				height: '2rem',
+				alignItems: 'center',
+				color: 'black',
+			}}
+			data-testid="zapp-dev-controls"
+		>
+			<b>zApp Staking {version}</b>
+			<span>{content}</span>
+		</footer>
+	);
+};
diff --git a/dev-environment/src/lib/connectors.ts b/dev-environment/src/lib/connectors.ts
@@ -0,0 +1,3 @@
+import { InjectedConnector } from 'wagmi/connectors/injected';
+
+export const injectedConnector = new InjectedConnector();
diff --git a/dev-environment/src/lib/useEthersProvider.ts b/dev-environment/src/lib/useEthersProvider.ts
@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+
+import { useWalletClient, WalletClient } from 'wagmi';
+import { providers } from 'ethers';
+
+export function walletClientToProvider(walletClient: WalletClient) {
+	const { chain, transport } = walletClient;
+	const network = {
+		chainId: chain.id,
+		name: chain.name,
+		ensAddress: chain.contracts?.ensRegistry?.address,
+	};
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	return new providers.Web3Provider(transport, network);
+}
+
+/** Hook to convert a viem Wallet Client to an ethers.js Signer. */
+export function useEthersProvider({ chainId }: { chainId?: number } = {}) {
+	const { data: walletClient } = useWalletClient({ chainId });
+	return useMemo(
+		() => (walletClient ? walletClientToProvider(walletClient) : undefined),
+		[walletClient],
+	);
+}
diff --git a/dev-environment/src/main.css b/dev-environment/src/main.css
@@ -0,0 +1,4 @@
+body {
+	padding: 0;
+	margin: 0;
+}
diff --git a/dev-environment/src/main.tsx b/dev-environment/src/main.tsx
@@ -0,0 +1,38 @@
+import './vite-setup';
+
+import React from 'react';
+import { render } from 'react-dom';
+
+import { Route, Router } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
+
+import { createConfig, mainnet, WagmiConfig } from 'wagmi';
+import { createPublicClient, http } from 'viem';
+
+import { ThemeEngine } from '@zero-tech/zui/components';
+import { Themes } from '@zero-tech/zui/components/ThemeEngine';
+import { DevApp } from './components/DevApp';
+
+import './main.css';
+
+const history = createBrowserHistory();
+
+const config = createConfig({
+	autoConnect: true,
+	publicClient: createPublicClient({
+		chain: mainnet,
+		transport: http(),
+	}),
+});
+
+render(
+	<React.StrictMode>
+		<Router history={history}>
+			<WagmiConfig config={config}>
+				<ThemeEngine theme={Themes.Dark} />
+				<Route path="/:znsRoute/:app" component={DevApp} />
+			</WagmiConfig>
+		</Router>
+	</React.StrictMode>,
+	document.getElementById('root'),
+);
diff --git a/dev-environment/src/vite-setup.ts b/dev-environment/src/vite-setup.ts
@@ -0,0 +1,3 @@
+window.global ||= window;
+
+export {};
diff --git a/dev-environment/vite-env.d.ts b/dev-environment/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/dev-environment/vite.config.ts b/dev-environment/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [react(), tsconfigPaths(), nodePolyfills()],
+	root: 'dev-environment',
+	resolve: {
+		alias: {
+			// This is a temporary fix as zUI uses react-router-dom v6 and this app uses v5
+			'react-router-dom': require.resolve('react-router-dom'),
+		},
+	},
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { InjectedConnector } from 'wagmi/connectors/injected';

		export const injectedConnector = new InjectedConnector();