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

.storybook/main.cjs

@@ -1,20 +1,6 @@
-
 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",
@@ -23,7 +9,22 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-svelte-csf"
+    "@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": {

package.json

@@ -21,9 +21,12 @@
     "@metamask/providers": "^8.1.1",
     "@storybook/addon-actions": "^6.4.7",
     "@storybook/addon-essentials": "^6.4.7",
+    "@storybook/addon-interactions": "^6.4.8",
     "@storybook/addon-links": "^6.4.7",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-svelte-csf": "^1.1.0",
     "@storybook/svelte": "^6.4.7",
+    "@storybook/testing-library": "^0.0.7",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
@@ -32,11 +35,10 @@
     "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-loader": "^3.1.2",
     "svelte-preprocess": "^4.9.4",
     "tailwindcss": "^2.2.19",
     "tslib": "^2.3.1",
@@ -47,4 +49,4 @@
     "ethers": "^5.5.1",
     "renpool-contracts": "https://github.com/renpool/renpool-contracts"
   }
-}
+}

src/context/RenTokenProvider.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState, useEffect, createContext } from 'react'
 import { Contract } from '@ethersproject/contracts'
 import { BigNumber } from '@ethersproject/bignumber'
-import { ContractNames, CONTRACT_ADDRESSES } from '../lib/config'
+import { ContractNames, CONTRACT_ADDRESSES } from '../lib/net/confignfig'
 import { IERC20Standard as artifact } from 'renpool-contracts'
 // import map from '../artifacts/deployments/map.json'
 import { useActiveWeb3React } from '../hooks/useActiveWeb3React'

src/env.d.ts

@@ -53,7 +53,7 @@ interface ImportMetaEnv {
      * ```
      * 
      */
-    readonly VITE_CHAIN_ID: `${keyof typeof import('$lib/config').NETWORKS}`;
+    readonly VITE_CHAIN_ID: `${keyof typeof import('$lib/net/config').NETWORKS}`;
     readonly VITE_JSON_RPC_PROVIDER_URL: string;
     readonly VITE_REN_POOL: string;
 }

src/hooks/useActiveWeb3React.ts

@@ -1,7 +1,7 @@
 import { useWeb3React } from '@web3-react/core'
 import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
 import { Web3Provider } from '@ethersproject/providers'
-import { NETWORK_CONTEXT_NAME } from '../lib/config'
+import { NETWORK_CONTEXT_NAME } from '../lib/net/confignfig'
 
 export const useActiveWeb3React = (): Web3ReactContextInterface<Web3Provider> => {
   const context = useWeb3React<Web3Provider>()

src/hooks/useContract.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Contract, ContractInterface } from '@ethersproject/contracts'
-import { injected } from '../lib/connectors'
+import { injected } from '../lib/net/connectorstors'
 import { useActiveWeb3React } from './useActiveWeb3React'
 
 const CHAIN_ID = process.env.REACT_APP_CHAIN_ID

src/hooks/useEagerConnect.ts

@@ -1,7 +1,7 @@
 import { useWeb3React } from '@web3-react/core'
 import { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
-import { injected } from '../lib/connectors'
+import { injected } from '../lib/net/connectorstors'
 
 export const useEagerConnect = (): boolean => {
   const { activate, active } = useWeb3React() // specifically using useWeb3React because of what this hook does

src/hooks/useInactiveListener.ts

@@ -1,6 +1,6 @@
 import { useWeb3React } from '@web3-react/core'
 import { useEffect } from 'react'
-import { injected } from '../lib/connectors'
+import { injected } from '../lib/net/connectorstors'
 
 /**
  * Use for network and injected - logs user in

src/lib/Addresses.stories.svelte

@@ -1,3 +1,7 @@
+<script context="module">
+    import { config } from "./EtherscanLink.svelte";
+    config.etherscan = "https://mainnet.etherscan.io/address/";
+</script>
 <script>
     import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
     import Addresses from "./Addresses.svelte";

src/lib/Addresses.svelte

@@ -1,5 +1,8 @@
+<script context="module" lang="ts">
+    export const config = { renToken: "", renPool: "" };
+</script>
+
 <script lang="ts">
-    import { NETWORK } from "./config";
     import EtherscanLink from "./EtherscanLink.svelte";
 
     /**
@@ -33,13 +36,12 @@
             <tr>
                 <td class="key">RenToken</td>
                 <td class="value"
-                    ><EtherscanLink address={NETWORK.contracts.REN_TOKEN} /></td
+                    ><EtherscanLink address={config.renToken} /></td
                 >
             </tr>
             <tr>
                 <td class="key">RenPool</td>
-                <td class="value"
-                    ><EtherscanLink address={NETWORK.contracts.REN_POOL} /></td
+                <td class="value"><EtherscanLink address={config.renPool} /></td
                 >
             </tr>
             <tr>
@@ -52,7 +54,6 @@
             </tr>
         </tbody>
     </table>
-
 </section>
 
 <style lang="postcss">

src/lib/EtherscanLink.stories.svelte

@@ -1,3 +1,8 @@
+<script context="module">
+    import { config } from "./EtherscanLink.svelte";
+    config.etherscan = "https://kovan.etherscan.io/address/";
+</script>
+
 <script>
     import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
     import EtherscanLink from "./EtherscanLink.svelte";
@@ -6,6 +11,7 @@
 <Meta title="$lib/EtherscanLink" component={EtherscanLink} argTypes={{}} />
 
 <Template let:args>
+    <p>Using config: {JSON.stringify(config)}</p>
     <EtherscanLink {...args} />
 </Template>
 

src/lib/EtherscanLink.svelte

@@ -1,9 +1,13 @@
-<script lang="ts">
-    import { NETWORK } from "./config";
+<script context="module" lang="ts">
+    export const config: {
+        etherscan: string | null;
+    } = { etherscan: null };
+</script>
 
+<script lang="ts">
     export let address: string;
 </script>
 
-<a href="{NETWORK.etherscan}{address}" target="_blank" rel="noreferrer">
+<a href="{config.etherscan}{address}" target="_blank" rel="noreferrer">
     {address}
 </a>

src/lib/Footer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Logo from './Logo.svelte';
+  import Logo from './img/Logo.svelte';
 </script>
 
 <footer class="text-gray-600 body-font">

src/lib/Header.svelte

@@ -1,6 +1,9 @@
+<script context="module" lang="ts">
+	export const config: { renPool: string | null } = { renPool: null };
+</script>
+
 <script>
-	import Logo from "./Logo.svelte";
-	import { NETWORK } from "./config";
+	import Logo from "./img/Logo.svelte";
 </script>
 
 <header class="text-gray-600 bg-purple-100">
@@ -18,8 +21,8 @@
 			class="md:ml-auto flex flex-wrap items-center text-base justify-center"
 		>
 			<a href="/">Home</a>
-			<a href="/pools/{NETWORK.contracts.REN_POOL}/deposit">Deposit</a>
-			<a href="/pools/{NETWORK.contracts.REN_POOL}/withdraw">Withdraw</a>
+			<a href="/pools/{config.renPool}/deposit">Deposit</a>
+			<a href="/pools/{config.renPool}/withdraw">Withdraw</a>
 			<a href="/howto">How To</a>
 		</nav>
 		<slot />

src/lib/howto/Howto.stories.svelte → src/lib/Howto.stories.svelte

@@ -1,10 +1,10 @@
 <script>
     import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
     import Howto from "./Howto.svelte";
-    import Step from "./Step.svelte";
+    import Step from "./HowtoStep.svelte";
 </script>
 
-<Meta title="$lib/howto/Howto" component={Howto} argTypes={{}} />
+<Meta title="$lib/Howto" component={Howto} argTypes={{}} />
 
 <Template let:args>
     <Howto {...args} />

src/lib/howto/Step.stories.svelte → src/lib/HowtoStep.stories.svelte

@@ -1,12 +1,12 @@
 <script>
     import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
     import { setContext } from "svelte";
-    import Step from "./Step.svelte";
+    import Step from "./HowtoStep.svelte";
 
     setContext("step", { count: 99 });
 </script>
 
-<Meta title="$lib/howto/Step" component={Step} argTypes={{}} />
+<Meta title="$lib/HowtoStep" component={Step} argTypes={{}} />
 
 <Template let:args>
     <Step {...args} />

src/lib/Wallet.stories.svelte

@@ -1,5 +1,6 @@
 <script>
     import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+
     import Wallet from "./Wallet.svelte";
 </script>
 

src/lib/Wallet.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-    import { shortAccount } from "./shortAccount";
+    import { shortAccount } from "./net/shortAccount";
 
+    /**
+     * Indicates whether the MetaMask extension is installed in the browser.
+     * A `null` value should be used when loading the component.
+     */
     export let hasMetaMask: boolean | null = null;
 
     export let chainId: number | null = null;
@@ -17,11 +21,11 @@
 {chainId}
 
 {#if hasMetaMask === null}
-    <div />
+    <span>loading...</span>
 {:else if !hasMetaMask}
     <a target="_blank" href="https://metamask.io/download">Install MetaMask</a>
 {:else if selectedAddress === null}
-    <button on:click={connectToMetaMask}> Connect to MetaMask </button>
+    <button on:click={connectToMetaMask}>Connect to MetaMask</button>
 {:else}
     <a
         href="/"

src/lib/Warn.stories.svelte

@@ -1,5 +1,7 @@
 <script>
   import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import { within, userEvent, waitFor } from "@storybook/testing-library";
+
   import Warn from "./Warn.svelte";
 </script>
 
@@ -25,11 +27,23 @@
   }}
 />
 
-<Story name="Content" args={{}}
-  ><Warn title="Your Warning Message">Something went south</Warn></Story
->
+<Story name="Content" args={{}}>
+  <Warn title="Your Warning Message">Something went south</Warn>
+</Story>
+
+<Story name="Long Content" args={{}}>
+  <Warn title="Your Warning Message">{"Something went south ".repeat(5)}</Warn>
+</Story>
 
-<Story name="Long Content" args={{}}
-  ><Warn title="Your Warning Message">{"Something went south ".repeat(5)}</Warn
-  ></Story
+<Story
+  name="Dismiss Content"
+  args={{}}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await new Promise((r) => setTimeout(r, 2000));
+    userEvent.click(canvas.getByRole("button"));
+  }}
 >
+  <Warn title="Your Warning Message">{"Something went south ".repeat(5)}</Warn>
+  <p>Warn message should be dismissed after 2s.</p>
+</Story>

src/lib/connectors.ts → src/lib/net/connectors.ts

@@ -1,6 +1,6 @@
 import { InjectedConnector } from '@web3-react/injected-connector'
 import { NetworkConnector } from '@web3-react/network-connector'
-import { SUPPORTED_CHAIN_IDS } from './config'
+import { SUPPORTED_CHAIN_IDS } from './net/confignfig'
 
 const INFURA_PROJECT_ID = process.env.REACT_APP_INFURA_PROJECT_ID
 const CHAIN_ID = process.env.REACT_APP_CHAIN_ID

src/lib/wallet.ts → src/lib/net/wallet.ts

@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 import { Contract, ethers } from "ethers";
 import { deployments, IERC20Standard } from "renpool-contracts";
-import { DECIMALS } from "$lib/config";
+import { DECIMALS } from "$lib/net/config";
 import { browser } from '$app/env';
 
 const CHAIN_ID = parseInt(import.meta.env.VITE_CHAIN_ID);

src/routes/__layout.svelte

@@ -27,16 +27,18 @@
 <script lang="ts">
 	import "../app.css";
 
-	import { wallet } from "$lib/wallet";
-	import Header from "$lib/Header.svelte";
+	import { wallet } from "$lib/net/wallet";
+	import Header, { config } from "$lib/Header.svelte";
 	import Footer from "$lib/Footer.svelte";
 	import Wallet from "$lib/Wallet.svelte";
 	import Addresses from "$lib/Addresses.svelte";
 	import Stats from "$lib/Stats.svelte";
 	import Warn from "$lib/Warn.svelte";
-	import { NETWORK } from "$lib/config";
+	import { NETWORK } from "$lib/net/config";
 	import Network from "$lib/Network.svelte";
 
+	config.renPool = NETWORK.contracts.REN_POOL;
+
 	type PropsOf<
 		Component extends new (options: { target: any; props: any }) => any
 	> = NonNullable<ConstructorParameters<Component>[0]["props"]> | null;

src/routes/api/renpool.ts

@@ -1,4 +1,4 @@
-import { NETWORK } from '$lib/config';
+import { NETWORK } from '$lib/net/config';
 import { Contract, providers } from "ethers";
 import { RenPool } from "renpool-contracts";