Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

migrate CRA to vite for fortune exchange #363

Merged
merged 7 commits into from
Apr 5, 2023
Merged

migrate CRA to vite for fortune exchange #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d901d5c
migrate CRA to vite for fortune exchange
leric7 Mar 31, 2023
65b7bf0
clean up fortune package name and scripts
leric7 Mar 31, 2023
eadc0c7
fix global tsconfig
leric7 Mar 31, 2023
9f2b1cd
fix dependency
leric7 Mar 31, 2023
eb36a68
fix fortune test script
leric7 Mar 31, 2023
871e8e4
fix exchange oracle test
leric7 Mar 31, 2023
3879eb5
fix exchange oracle test
leric7 Mar 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...s/examples/fortune/exchange/.dockerignore → ...les/fortune/exchange-oracle/.dockerignore
View file
Open in desktop
File renamed without changes.
2 changes: 2 additions & 0 deletions packages/examples/fortune/exchange-oracle/.env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
PUBLIC_URL=/
VITE_APP_WALLETCONNECT_PROJECT_ID=68415bedd1597a33e8e83cc53e52071b
67 changes: 67 additions & 0 deletions packages/examples/fortune/exchange-oracle/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
{
"extends": [
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:prettier/recommended",
"react-app"
],
"settings": {
"import/resolver": {
"typescript": {},
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx", ".d.ts"]
}
},
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
}
},
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
"no-console": "warn",
"no-unused-vars": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"import/order": [
"error",
{
"pathGroups": [
{
"pattern": "~/**",
"group": "external"
}
],
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"@typescript-eslint/no-unused-vars": ["error"],
"prettier/prettier": ["error"]
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"rules": {
"no-undef": "off"
}
}
],
"env": {
"browser": true,
"jest": true,
"node": true
}
}
0 ...ages/examples/fortune/exchange/Dockerfile → ...amples/fortune/exchange-oracle/Dockerfile
View file
Open in desktop
File renamed without changes.
0 packages/examples/fortune/exchange/README.md → ...xamples/fortune/exchange-oracle/README.md
View file
Open in desktop
File renamed without changes.
34 changes: 34 additions & 0 deletions packages/examples/fortune/exchange-oracle/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Human Protocol Fortune Exchange Oracle" />
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `yarn run build`.
-->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700,800&display=swap"
/>
<title>Human Protocol Fortune Exchange Oracle</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
60 changes: 60 additions & 0 deletions packages/examples/fortune/exchange-oracle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
{
"name": "@human-protocol/fortune-exchange-oracle",
"description": "Fortune Exchange Oracle",
"version": "1.0.0",
"license": "MIT",
"private": false,
"dependencies": {
"@human-protocol/core": "workspace:*",
"@web3modal/ethereum": "^2.2.1",
"@web3modal/react": "^2.2.1",
"@web3modal/ui": "^2.2.1",
"axios": "^1.1.3",
"ethers": "^5.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"wagmi": "^0.12.2",
"web-vitals": "^3.1.0",
"web3": "^1.8.1"
},
"scripts": {
"lint": "eslint '**/*.{ts,tsx}'",
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"start-prod": "serve -s dist",
"test": "vitest run -u",
"format:prettier": "prettier --write '**/*.{ts,tsx}'",
"format:lint": "eslint --fix '**/*.{ts,tsx}'",
"format": "npm run format:prettier && npm run format:lint"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"@types/react-test-renderer": "^18.0.0",
"@vitejs/plugin-react": "^3.1.0",
"eslint-config-react-app": "^7.0.1",
"eslint-import-resolver-typescript": "^3.5.4",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"react-test-renderer": "^18.2.0",
"vite": "^4.1.4",
"vitest": "^0.29.2"
}
}
Binary file added packages/examples/fortune/exchange-oracle/public/favicon.ico
View file
Open in desktop
Binary file not shown.
15 changes: 15 additions & 0 deletions packages/examples/fortune/exchange-oracle/public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"short_name": "Fortune Exchange",
"name": "Fortune Exchange Oracle",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
0 ...amples/fortune/exchange/public/robots.txt → ...fortune/exchange-oracle/public/robots.txt
View file
Open in desktop
File renamed without changes.
0 ...ges/examples/fortune/exchange/src/App.css → ...mples/fortune/exchange-oracle/src/App.css
View file
Open in desktop
File renamed without changes.
30 changes: 30 additions & 0 deletions packages/examples/fortune/exchange-oracle/src/App.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { render, screen } from '@testing-library/react';
import { act } from 'react-test-renderer';
import { MockConnector } from 'wagmi/connectors/mock';

import App from './App';
import { Providers, setupClient, getSigners } from 'tests/utils';

test('renders correctly', async () => {
const client = setupClient({
connectors: [
new MockConnector({
options: {
signer: getSigners()[0]!,
// Turn on `failConnect` flag to simulate connect failure
},
}),
],
});

await act(async () => {
render(<App />, {
wrapper: ({ children }: { children: React.ReactNode }) => (
<Providers client={client}>{children}</Providers>
),
});
});

const linkElement = screen.getByText(/Select Network/i);
expect(linkElement).toBeInTheDocument();
});
5 changes: 3 additions & 2 deletions ...ges/examples/fortune/exchange/src/App.tsx → ...mples/fortune/exchange-oracle/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ function App() {
const { isConnected } = useAccount();

setTheme({
themeColor: 'purple',
themeMode: 'light',
themeBackground: 'themeColor',
themeVariables: {
'--w3m-accent-color': 'purple',
},
});

return (
Expand Down
0 ...exchange/src/components/Escrow/Escrow.css → ...e-oracle/src/components/Escrow/Escrow.css
View file
Open in desktop
File renamed without changes.
41 changes: 41 additions & 0 deletions packages/examples/fortune/exchange-oracle/src/components/Escrow/Escrow.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { screen, render } from '@testing-library/react';
import { act, create } from 'react-test-renderer';
import { MockConnector } from 'wagmi/connectors/mock';

import { Escrow } from './Escrow';
import { Providers, setupClient, getSigners } from 'tests/utils';

describe('When rendered Escrow component', () => {
it('renders landing page', async () => {
const client = setupClient({
connectors: [
new MockConnector({
options: {
signer: getSigners()[0]!,
// Turn on `failConnect` flag to simulate connect failure
},
}),
],
});
await act(async () => {
render(<Escrow />, {
wrapper: ({ children }: { children: React.ReactNode }) => (
<Providers client={client}>{children}</Providers>
),
});
});

expect(screen.getByTestId('escrowAddress')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
expect(
screen.getByRole('button', { name: 'Send Fortune' })
).toBeInTheDocument();
});

it('should match snapshot', () => {
const component = create(<Escrow />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
return;
});
});
0 ...exchange/src/components/Escrow/Escrow.tsx → ...e-oracle/src/components/Escrow/Escrow.tsx
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions packages/examples/fortune/exchange-oracle/src/components/Escrow/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Escrow } from './Escrow';
0 ...fortune/exchange/src/connectors/chains.ts → .../exchange-oracle/src/connectors/chains.ts
View file
Open in desktop
File renamed without changes.
32 changes: 15 additions & 17 deletions ...une/exchange/src/connectors/connectors.ts → ...hange-oracle/src/connectors/connectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import {
EthereumClient,
w3mConnectors,
w3mProvider,
} from '@web3modal/ethereum';
import { configureChains, createClient } from 'wagmi';
import {
goerli,
mainnet,
polygon,
polygonMumbai,
bsc,
bscTestnet,
skaleHumanProtocol
skaleHumanProtocol,
} from 'wagmi/chains';
import {
EthereumClient,
modalConnectors,
walletConnectProvider,
} from '@web3modal/ethereum';
import { configureChains, createClient } from 'wagmi';
import { fortune } from './chains';

// 1. Get projectID at https://cloud.walletconnect.com
if (!process.env.REACT_APP_WALLETCONNECT_PROJECT_ID) {
if (!import.meta.env.VITE_APP_WALLETCONNECT_PROJECT_ID) {
const message =
'You need to provide REACT_APP_WALLETCONNECT_PROJECT_ID env variable';
'You need to provide VITE_APP_WALLETCONNECT_PROJECT_ID env variable';
alert(message);
throw new Error(message);
}
export const projectId = process.env.REACT_APP_WALLETCONNECT_PROJECT_ID;
export const projectId = import.meta.env.VITE_APP_WALLETCONNECT_PROJECT_ID;

// 2. Configure wagmi client
const chains = [
Expand All @@ -35,17 +35,15 @@ const chains = [
bscTestnet,
fortune,
];
const { provider } = configureChains(chains, [
walletConnectProvider({ projectId }),
]);

const { provider } = configureChains(chains, [w3mProvider({ projectId })]);

export const wagmiClient = createClient({
autoConnect: true,
connectors: modalConnectors({
version: '2',
appName: 'web3Modal',
chains,
connectors: w3mConnectors({
projectId,
version: 1,
chains,
}),
provider,
});
Expand Down
0 ...s/examples/fortune/exchange/src/index.css → ...les/fortune/exchange-oracle/src/index.css
View file
Open in desktop
File renamed without changes.
6 changes: 2 additions & 4 deletions ...s/examples/fortune/exchange/src/index.tsx → ...ples/fortune/exchange-oracle/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createRoot } from 'react-dom/client';
import { WagmiConfig } from 'wagmi';
import App from './App';
import { wagmiClient } from './connectors/connectors';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
const root = createRoot(document.getElementById('root') as HTMLElement);

root.render(
<React.StrictMode>
Expand Down
0 ...s/fortune/exchange/src/reportWebVitals.ts → ...ne/exchange-oracle/src/reportWebVitals.ts
View file
Open in desktop
File renamed without changes.
0 ...rvices/RecordingOracle/RecordingClient.ts → ...rvices/RecordingOracle/RecordingClient.ts
View file
Open in desktop
File renamed without changes.
9 changes: 9 additions & 0 deletions packages/examples/fortune/exchange-oracle/src/vite-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/// <reference types="vite/client" />

interface ImportMetaEnv {
readonly VITE_APP_WALLETCONNECT_PROJECT_ID: string;
}

interface ImportMeta {
readonly env: ImportMetaEnv;
}
11 changes: 11 additions & 0 deletions packages/examples/fortune/exchange-oracle/tests/setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import matchers from '@testing-library/jest-dom/matchers';
import { cleanup } from '@testing-library/react';
import { expect, afterEach } from 'vitest';

// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
cleanup();
});
Loading