Svelte kit

.env.template

@@ -1,2 +1,2 @@
-REACT_APP_CHAIN_ID=42
-REACT_APP_INFURA_PROJECT_ID=XXX
+VITE_CHAIN_ID=
+INFURA_PROJECT_ID=

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2019
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -1,9 +1,5 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+/.svelte-kit
+/node_modules/
 
 # testing
 /coverage
@@ -12,13 +8,8 @@
 /build
 
 # misc
-.DS_Store
-.env
-.env.kovan
-.env.dev
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+/.env
+/.env.kovan
+/.env.dev
 
 /.netlify

.storybook/main.cjs

@@ -0,0 +1,37 @@
+
+const preprocess = require('svelte-preprocess');
+
+module.exports = {
+// export default  {
+  core: {
+    builder: "storybook-builder-vite",
+  },
+
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    config.resolve.alias.foo = 'bar';
+    config.mode = 'kovan'
+
+    // return the customized config
+    return config;
+},
+
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-svelte-csf"
+  ],
+  "framework": "@storybook/svelte",
+  "svelteOptions": {
+    // "preprocess": config.preprocess,
+    preprocess: [
+      preprocess({
+        postcss: true,
+      }),
+    ],
+  }
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import "../src/app.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -1,2 +1,78 @@
 # renpool-app
+
 RenPool's client app
+
+## Manually deploy client app
+
+[https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/](https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/)
+
+Install Netlify CLI: `npm install netlify-cli -g`.
+
+```bash
+>> yarn run setEnv:<TARGET_NETWORK>
+>> yarn run deploy
+```
+
+The app is deployed to [https://renpool.netlify.app/](https://renpool.netlify.app/)
+
+## Usage
+
+1. Open the Brownie console. Starting the console launches a fresh [Ganache](https://www.trufflesuite.com/ganache) instance in the background.
+
+    ```bash
+    $ brownie console
+    Brownie v1.9.0 - Python development framework for Ethereum
+
+    ReactMixProject is the active project.
+    Launching 'ganache-cli'...
+    Brownie environment is ready.
+    ```
+
+2. Run the [deployment script](scripts/deploy.py) to deploy the project's smart contracts.
+
+    ```python
+    >>> run("deploy")
+    Running 'scripts.deploy.main'...
+    Transaction sent: 0xd1000d04fe99a07db864bcd1095ddf5cb279b43be8e159f94dbff9d4e4809c70
+    Gas price: 0.0 gwei   Gas limit: 6721975
+    SolidityStorage.constructor confirmed - Block: 1   Gas used: 110641 (1.65%)
+    SolidityStorage deployed at: 0xF104A50668c3b1026E8f9B0d9D404faF8E42e642
+
+    Transaction sent: 0xee112392522ed24ac6ab8cc8ba09bfe51c5d699d9d1b39294ba87e5d2a56212c
+    Gas price: 0.0 gwei   Gas limit: 6721975
+    VyperStorage.constructor confirmed - Block: 2   Gas used: 134750 (2.00%)
+    VyperStorage deployed at: 0xB8485421abC325D172652123dBd71D58b8117070
+    ```
+
+3. While Brownie is still running, start the React app in a different terminal.
+
+    ```bash
+    # make sure to use a different terminal, not the brownie console
+    cd client
+    yarn start
+    ```
+
+4. Connect Metamask to the local Ganache network. In the upper right corner, click the network dropdown menu. Select `Localhost 8545`, or:
+
+    ```bash
+    New Custom RPC
+    http://localhost:8545
+    ```
+
+5. Interact with the smart contracts using the web interface or via the Brownie console.
+
+    ```python
+    # get the newest vyper storage contract
+    >>> vyper_storage = VyperStorage[-1]
+
+    # the default sender of the transaction is the contract creator
+    >>> vyper_storage.set(1337)
+    ```
+
+    Any changes to the contracts from the console should show on the website after a refresh, and vice versa.
+
+## Ending a Session
+
+When you close the Brownie console, the Ganache instance also terminates and the deployment artifacts are deleted.
+
+To retain your deployment artifacts (and their functionality) you can launch Ganache yourself prior to launching Brownie. Brownie automatically attaches to the ganache instance where you can deploy the contracts. After closing Brownie, the chain and deployment artifacts will persist.

package.json

@@ -1,82 +1,50 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "test:watch": "yarn run test --watch",
-    "eject": "react-scripts eject",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
-    "setEnv:dev": "cp .env.dev .env",
-    "setEnv:kovan": "cp .env.kovan .env",
-    "setEnv:rinkeby": "cp .env.rinkeby .env",
-    "deploy": "yarn run build && cp ./_redirects ./build && netlify deploy --dir build --prod"
-  },
-  "dependencies": {
-    "renpool-contracts": "https://github.com/renpool/renpool-contracts",
-    "@ethersproject/address": "^5.4.0",
-    "@ethersproject/bignumber": "^5.4.0",
-    "@ethersproject/contracts": "^5.4.0",
-    "@ethersproject/providers": "^5.4.1",
-    "@ethersproject/strings": "^5.4.0",
-    "@ethersproject/units": "^5.4.0",
-    "@renproject/react-components": "^1.0.0-alpha.10",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/bs58": "^4.0.1",
-    "@types/jest": "^26.0.15",
-    "@types/lodash": "^4.14.170",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/styled-components": "^5.1.11",
-    "@web3-react/core": "^6.1.9",
-    "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/network-connector": "^6.1.9",
-    "bs58": "^4.0.1",
-    "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-device-detect": "^1.17.0",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rimble-ui": "^0.14.0",
-    "styled-components": "^5.3.0",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "dev": "yarn dev:kovan",
+    "dev:kovan": "MODE=kovan svelte-kit dev",
+    "dev:kovan-fork": "MODE=kovan-fork svelte-kit dev",
+    "dev:mainnet": "MODE=mainnet svelte-kit dev",
+    "dev:mainnet-fork": "MODE=mainnet-fork svelte-kit dev",
+    "build": "svelte-kit build",
+    "package": "svelte-kit package",
+    "preview": "svelte-kit preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.27.0",
-    "@typescript-eslint/parser": "^4.27.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "@metamask/providers": "^8.1.1",
+    "@storybook/addon-actions": "^6.4.7",
+    "@storybook/addon-essentials": "^6.4.7",
+    "@storybook/addon-links": "^6.4.7",
+    "@storybook/addon-svelte-csf": "^1.1.0",
+    "@storybook/svelte": "^6.4.7",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^3.2.1",
+    "hardhat": "^2.7.0",
+    "postcss": "^8.4.4",
+    "storybook-builder-vite": "^0.1.10",
+    "svelte": "^3.44.2",
+    "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.9.4",
+    "tailwindcss": "^2.2.19",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "jest": {
-    "testMatch": [
-      "**/?(*.)(spec|test).ts?(x)"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "<rootDir>/Tests/Setup.js",
-      "<rootDir>/Tests/Mocks/*"
-    ]
+  "type": "module",
+  "dependencies": {
+    "ethers": "^5.5.1",
+    "renpool-contracts": "https://github.com/renpool/renpool-contracts"
   }
 }

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}