Svelte kit

.env.kovan-fork

@@ -0,0 +1,3 @@
+VITE_CHAIN_ID=42
+VITE_JSON_RPC_PROVIDER_URL=http://127.0.0.1:8545
+VITE_REN_POOL=0xbF115A5538290D234fA31e917241a58A20a847Bc

.env.mainnet

@@ -0,0 +1,3 @@
+VITE_CHAIN_ID=1
+VITE_JSON_RPC_PROVIDER_URL=https://eth-mainnet.alchemyapi.io/v2/4qQo8naBUQPUU4UWex6jJupYRxlfIdxl
+VITE_REN_POOL=0xf1e98770ab8ed1364371B8c7DBdA56633F7cB6a9

.env.mainnet-fork

@@ -0,0 +1,3 @@
+VITE_CHAIN_ID=1
+VITE_JSON_RPC_PROVIDER_URL=http://localhost:8545
+VITE_REN_POOL=0xf1e98770ab8ed1364371B8c7DBdA56633F7cB6a9

.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,24 @@
+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

.prettierrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    arrowParens: "avoid",
+    tabWidth: 4,
+    svelteStrictMode: true,
+    svelteSortOrder: "options-scripts-markup-styles",
+    plugins: ["prettier-plugin-svelte"],
+};

.storybook/main.cjs

@@ -0,0 +1,37 @@
+const preprocess = require("svelte-preprocess");
+
+module.exports = {
+    stories: [
+        "../src/**/*.stories.mdx",
+        "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)",
+    ],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-svelte-csf",
+        {
+            name: "@storybook/addon-postcss",
+            options: {
+                cssLoaderOptions: {
+                    // When you have splitted your css over multiple files
+                    // and use @import('./other-styles.css')
+                    importLoaders: 1,
+                },
+                postcssLoaderOptions: {
+                    // When using postCSS 8
+                    implementation: require("postcss"),
+                },
+            },
+        },
+        "@storybook/addon-interactions",
+    ],
+    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.

jest.config.js

@@ -1,23 +1,16 @@
-module.exports = {
-  // The root of your source code, typically /src
-  // `<rootDir>` is a token Jest substitutes
-  roots: ['<rootDir>/src'],
-  // Jest transformations -- this adds support for TypeScript
-  // using ts-jest
+/** @type {import('ts-jest').InitialOptionsTsJest} */
+const config = {
   transform: {
-    '^.+\\.tsx?$': 'ts-jest'
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.svelte$': [
+      'svelte-jester',
+      {
+        preprocess: true,
+      },
+    ],
   },
-  // Runs special logic, such as cleaning up components
-  // when using React Testing Library and adds special
-  // extended assertions to Jest
-  setupFilesAfterEnv: [
-    '@testing-library/react/cleanup-after-each',
-    '@testing-library/jest-dom/extend-expect'
-  ],
-  // Test spec file resolution pattern
-  // Look for tests inside the `src` folder and filename
-  // should contain `test` or `spec`.
-  testRegex: '(/**/.*|(\\.|/)(test|spec))\\.tsx?$',
-  // Module file extensions for importing
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-}
+  moduleFileExtensions: ['js', 'ts', 'svelte'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+};
+
+export default config;