Use Alchemy as fallback provider

package-lock.json

@@ -13,7 +13,7 @@
       "devDependencies": {
         "@snowpack/plugin-svelte": "^3.5.2",
         "@tsconfig/svelte": "^1.0.10",
-        "snowpack": "^3.0.1",
+        "snowpack": "^3.5.0",
         "svelte-check": "^1.5.2",
         "svelte-preprocess": "^4.7.2",
         "typescript": "^4.2.4"
@@ -2943,9 +2943,9 @@
       }
     },
     "node_modules/snowpack": {
-      "version": "3.3.7",
+      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.5.0.tgz",
-      "integrity": "sha512-7I5wznB6wGKq2fi6pxU3UZLEe3R0a5IChO8x+w0iYT7/oERubkbzc/SXTMXm6lVvtYMs2W1AkE+0VHP1KI0IEw==",
+      "integrity": "sha512-RlQbyXlILgGKYkvlYHzDydM1V2xAgQ5ZQsb/BUlkzAqNlbFSbyM2Genfw3eWTfk6o5kG0BrpdAmyGcTpN1Q+UQ==",
       "dev": true,
       "dependencies": {
         "cli-spinners": "^2.5.0",
@@ -5632,9 +5632,9 @@
       "dev": true
     },
     "snowpack": {
-      "version": "3.3.7",
+      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.5.0.tgz",
-      "integrity": "sha512-7I5wznB6wGKq2fi6pxU3UZLEe3R0a5IChO8x+w0iYT7/oERubkbzc/SXTMXm6lVvtYMs2W1AkE+0VHP1KI0IEw==",
+      "integrity": "sha512-RlQbyXlILgGKYkvlYHzDydM1V2xAgQ5ZQsb/BUlkzAqNlbFSbyM2Genfw3eWTfk6o5kG0BrpdAmyGcTpN1Q+UQ==",
       "dev": true,
       "requires": {
         "cli-spinners": "^2.5.0",

package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@snowpack/plugin-svelte": "^3.5.2",
     "@tsconfig/svelte": "^1.0.10",
-    "snowpack": "^3.0.1",
+    "snowpack": "^3.5.0",
     "svelte-check": "^1.5.2",
     "svelte-preprocess": "^4.7.2",
     "typescript": "^4.2.4"

public/index.css

@@ -43,6 +43,7 @@
 	--color-foreground-6: #d3dee8;
 	--color-background: #0b131a;
 	--color-glow: #5555ff22;
+	--color-glow-error: #ff555522;
 	--color-subtle: #777;
 
 	--font-family-sans-serif: Inter, sans-serif;

snowpack.config.js

@@ -1,5 +1,8 @@
 /** @type {import("snowpack").SnowpackUserConfig } */
 module.exports = {
+  env: {
+    RADICLE_ALCHEMY_API_KEY: process.env.RADICLE_ALCHEMY_API_KEY,
+  },
   mount: {
     public: '/',
     src: '/dist',

src/App.svelte

@@ -10,6 +10,8 @@
   import Orgs from '@app/base/orgs/Routes.svelte';
   import Resolver from '@app/base/resolver/Routes.svelte';
   import Header from '@app/Header.svelte';
+  import Loading from '@app/Loading.svelte';
+  import Modal from '@app/Modal.svelte';
 
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
@@ -30,10 +32,11 @@
 </style>
 
 <svelte:window on:keydown={handleKeydown} />
-{#await getConfig()}
+<div class="app">
-  <!-- Loading wallet -->
+  {#await getConfig()}
-{:then config}
+    <!-- Loading wallet -->
-  <div class="app">
+    <Loading center />
+  {:then config}
     <Header session={$session} {config} />
     <div class="wrapper">
       <Router>
@@ -48,7 +51,18 @@
         <Resolver {config} />
       </Router>
     </div>
-  </div>
+  {:catch err}
-{:catch}
+    <div class="wrapper">
-  <!-- Show error -->
+      <Modal error subtle>
-{/await}
+        <span slot="title">
+          <h3>👻</h3>
+          <div>Error connecting to network</div>
+        </span>
+
+        <span slot="body">
+          {err}
+        </span>
+      </Modal>
+    </div>
+  {/await}
+</div>

src/Error.svelte

@@ -10,11 +10,12 @@
   export let subtitle: string = "";
   export let message: string = "";
   export let floating = false;
+  export let subtle = false;
 
   let body = message || (error && error.message) || "";
 </script>
 
-<Modal on:close error {floating}>
+<Modal on:close error {floating} {subtle}>
   <span slot="title">
     {title}
   </span>

src/Header.svelte

@@ -13,7 +13,9 @@
   import type { Config } from '@app/config';
 
   export let session: Session | null;
-  export let config: Config;
+  export let config: Config | null;
+
+  console.log(config);
 
   let sessionButton: HTMLElement | null = null;
   let sessionButtonHover = false;
@@ -78,6 +80,13 @@
     margin: 0 2rem;
     border-radius: var(--border-radius);
   }
+  .network.unavailable {
+    color: #888;
+    background-color: #ffffff11;
+  }
+  .network:last-child {
+    margin-right: 0;
+  }
 </style>
 
 {#if $error}
@@ -98,17 +107,21 @@
     <div class="nav">
       <a use:link href="/registrations">Register</a>
       <a use:link href="/vesting/">Vesting</a>
-      {#if config.network.name === 'ropsten'}
+      {#if config && config.network.name === 'ropsten'}
         <a use:link href="/orgs/">Orgs</a>
       {/if}
     </div>
   </div>
 
   <div>
-    {#if config.network.name == 'ropsten'}
+    {#if config && config.network.name == 'ropsten'}
       <span class="network">Ropsten</span>
-    {:else if config.network.name == 'rinkeby'}
+    {:else if config && config.network.name == 'rinkeby'}
       <span class="network">Rinkeby</span>
+    {:else if config && config.network.name == 'homestead'}
+      <!-- Don't show anything -->
+    {:else}
+      <span class="network unavailable">No Network</span>
     {/if}
 
     {#if address}
@@ -127,7 +140,7 @@
           {formatAddress(address)}
         {/if}
       </button>
-    {:else}
+    {:else if config}
       <Connect className="small" {config} />
     {/if}
   </div>

src/Modal.svelte

@@ -40,6 +40,12 @@
       transparent 70%
     );
   }
+  .modal.modal-subtle.error {
+    background: radial-gradient(
+      var(--color-glow-error) 0%,
+      transparent 70%
+    );
+  }
   .modal-title {
     font-size: 1.25rem;
     font-weight: bold;

src/config.ts

@@ -7,17 +7,45 @@ declare global {
     ethereum: any;
     registrarState: any;
   }
+
+  interface ImportMeta {
+    env: {
+      RADICLE_ALCHEMY_API_KEY: string | null,
+    }
+  }
 }
 
-export type Config = {
+export class Config {
-  network: { name: string, chainId: number },
+  network: { name: string, chainId: number };
-  registrar: { address: string, domain: string },
+  registrar: { address: string, domain: string };
-  radToken: { address: string },
+  radToken: { address: string };
-  orgFactory: { address: string },
+  orgFactory: { address: string };
-  gasLimits: { createOrg: number },
+  gasLimits: { createOrg: number };
-  provider: ethers.providers.JsonRpcProvider,
+  provider: ethers.providers.JsonRpcProvider;
-  signer: ethers.Signer & TypedDataSigner,
+  signer: ethers.Signer & TypedDataSigner | null;
-};
+
+  constructor(
+    network: { name: string, chainId: number },
+    provider: ethers.providers.JsonRpcProvider
+  ) {
+    let cfg = (<Record<string, any>> config)[network.name];
+    let signer = null;
+
+    try {
+      signer = provider.getSigner();
+    } catch (e) {
+      console.log(e.message);
+    }
+
+    this.network = network;
+    this.registrar = cfg.registrar;
+    this.radToken = cfg.radToken;
+    this.orgFactory = cfg.orgFactory;
+    this.provider = provider;
+    this.signer = signer;
+    this.gasLimits = gasLimits;
+  }
+}
 
 /// Gas limits for various transactions.
 const gasLimits = {
@@ -30,26 +58,21 @@ function isMetamaskInstalled(): boolean {
 }
 
 export async function getConfig(): Promise<Config> {
+  let config: Config;
+
   if (isMetamaskInstalled()) {
     const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const network = await provider.ready;
 
-    let network = await provider.ready;
+    config = new Config(network, provider);
-    let cfg = (<Record<string, any>> config)[network.name];
-
-    if (cfg) {
-      return {
-        network,
-        registrar: cfg.registrar,
-        radToken: cfg.radToken,
-        orgFactory: cfg.orgFactory,
-        provider: provider,
-        signer: provider.getSigner(),
-        gasLimits: gasLimits,
-      };
-    } else {
-      throw `Wrong network: ${network.name}`;
-    }
   } else {
-    throw "No provider available";
+    const network = { name: "homestead", chainId: 1 };
+    const apiKey = import.meta.env.RADICLE_ALCHEMY_API_KEY;
+    const provider = new ethers.providers.AlchemyProvider(network.name, apiKey);
+
+    config = new Config(network, provider);
   }
+  console.log(config);
+
+  return config;
 }

src/ens/SetName.svelte

@@ -70,7 +70,7 @@
   <Modal floating>
     <div slot="title">
       {#if mismatchError}
-        🦉
+        👻
       {:else}
         🖊️
       {/if}

tsconfig.json

@@ -8,7 +8,8 @@
     "node_modules/*"
   ],
   "compilerOptions": {
-    "target": "es2019",
+    "target": "es2020",
+    "module": "es2020",
     "types": [
       "svelte"
     ],