Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Use Alchemy as fallback provider
Alexis Sellier committed 5 years ago
commit 8e73432703aa6535dbb7f874c855a20e83e297cb
parent 4728a0ca722abddada7e7daabe5cbe6e8b809267
11 files changed +112 -50
modified 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",
- 
      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.3.7.tgz",
- 
      "integrity": "sha512-7I5wznB6wGKq2fi6pxU3UZLEe3R0a5IChO8x+w0iYT7/oERubkbzc/SXTMXm6lVvtYMs2W1AkE+0VHP1KI0IEw==",
+ 
      "version": "3.5.0",
+ 
      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.5.0.tgz",
+ 
      "integrity": "sha512-RlQbyXlILgGKYkvlYHzDydM1V2xAgQ5ZQsb/BUlkzAqNlbFSbyM2Genfw3eWTfk6o5kG0BrpdAmyGcTpN1Q+UQ==",

      "dev": true,

      "dependencies": {

        "cli-spinners": "^2.5.0",
@@ -5632,9 +5632,9 @@
      "dev": true

    },

    "snowpack": {
- 
      "version": "3.3.7",
- 
      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.3.7.tgz",
- 
      "integrity": "sha512-7I5wznB6wGKq2fi6pxU3UZLEe3R0a5IChO8x+w0iYT7/oERubkbzc/SXTMXm6lVvtYMs2W1AkE+0VHP1KI0IEw==",
+ 
      "version": "3.5.0",
+ 
      "resolved": "https://registry.npmjs.org/snowpack/-/snowpack-3.5.0.tgz",
+ 
      "integrity": "sha512-RlQbyXlILgGKYkvlYHzDydM1V2xAgQ5ZQsb/BUlkzAqNlbFSbyM2Genfw3eWTfk6o5kG0BrpdAmyGcTpN1Q+UQ==",

      "dev": true,

      "requires": {

        "cli-spinners": "^2.5.0",
modified 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"
modified 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;
modified 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',
modified 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()}
- 
  <!-- Loading wallet -->
- 
{:then config}
- 
  <div class="app">
+ 
<div class="app">
+ 
  {#await getConfig()}
+ 
    <!-- Loading wallet -->
+ 
    <Loading center />
+ 
  {:then config}

    <Header session={$session} {config} />

    <div class="wrapper">

      <Router>
@@ -48,7 +51,18 @@
        <Resolver {config} />

      </Router>

    </div>
- 
  </div>
- 
{:catch}
- 
  <!-- Show error -->
- 
{/await}
+ 
  {:catch err}
+ 
    <div class="wrapper">
+ 
      <Modal error subtle>
+ 
        <span slot="title">
+ 
          <h3>👻</h3>
+ 
          <div>Error connecting to network</div>
+ 
        </span>
+
+ 
        <span slot="body">
+ 
          {err}
+ 
        </span>
+ 
      </Modal>
+ 
    </div>
+ 
  {/await}
+ 
</div>
modified 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>
modified 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>
modified 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;
modified 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 = {
- 
  network: { name: string, chainId: number },
- 
  registrar: { address: string, domain: string },
- 
  radToken: { address: string },
- 
  orgFactory: { address: string },
- 
  gasLimits: { createOrg: number },
- 
  provider: ethers.providers.JsonRpcProvider,
- 
  signer: ethers.Signer & TypedDataSigner,
- 
};
+ 
export class Config {
+ 
  network: { name: string, chainId: number };
+ 
  registrar: { address: string, domain: string };
+ 
  radToken: { address: string };
+ 
  orgFactory: { address: string };
+ 
  gasLimits: { createOrg: number };
+ 
  provider: ethers.providers.JsonRpcProvider;
+ 
  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;
- 
    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}`;
- 
    }
+ 
    config = new Config(network, provider);

  } 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;

}
modified src/ens/SetName.svelte
@@ -70,7 +70,7 @@
  <Modal floating>

    <div slot="title">

      {#if mismatchError}
- 
        🦉
+ 
        👻

      {:else}

        🖊️

      {/if}
modified tsconfig.json
@@ -8,7 +8,8 @@
    "node_modules/*"

  ],

  "compilerOptions": {
- 
    "target": "es2019",
+ 
    "target": "es2020",
+ 
    "module": "es2020",

    "types": [

      "svelte"

    ],