diff --git a/package-lock.json b/package-lock.json index 6d318b946..02afa868e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 47b695f99..10c2a44d1 100644 --- a/package.json +++ b/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" diff --git a/public/index.css b/public/index.css index 1ff03dedf..683a0d8bc 100644 --- a/public/index.css +++ b/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; diff --git a/snowpack.config.js b/snowpack.config.js index 2c8f306b9..6fc0b7ea5 100644 --- a/snowpack.config.js +++ b/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', diff --git a/src/App.svelte b/src/App.svelte index e308826f9..28ee647fd 100644 --- a/src/App.svelte +++ b/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 @@ -{#await getConfig()} - -{:then config} -
+
+ {#await getConfig()} + + + {:then config}
@@ -48,7 +51,18 @@
-
-{:catch} - -{/await} + {:catch err} +
+ + +

👻

+
Error connecting to network
+ + + + {err} + + +
+ {/await} +
diff --git a/src/Error.svelte b/src/Error.svelte index bc68bd2fd..c89814318 100644 --- a/src/Error.svelte +++ b/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) || ""; - + {title} diff --git a/src/Header.svelte b/src/Header.svelte index 0b659f7c2..60632da9a 100644 --- a/src/Header.svelte +++ b/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; + } {#if $error} @@ -98,17 +107,21 @@
Register Vesting - {#if config.network.name === 'ropsten'} + {#if config && config.network.name === 'ropsten'} Orgs {/if}
- {#if config.network.name == 'ropsten'} + {#if config && config.network.name == 'ropsten'} Ropsten - {:else if config.network.name == 'rinkeby'} + {:else if config && config.network.name == 'rinkeby'} Rinkeby + {:else if config && config.network.name == 'homestead'} + + {:else} + No Network {/if} {#if address} @@ -127,7 +140,7 @@ {formatAddress(address)} {/if} - {:else} + {:else if config} {/if}
diff --git a/src/Modal.svelte b/src/Modal.svelte index 2b27e4b91..b76942ae5 100644 --- a/src/Modal.svelte +++ b/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; diff --git a/src/config.ts b/src/config.ts index 6d4d20c23..d64226c56 100644 --- a/src/config.ts +++ b/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 = (> 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 { + 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 = (> 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; } diff --git a/src/ens/SetName.svelte b/src/ens/SetName.svelte index 91828b10f..74b46ef86 100644 --- a/src/ens/SetName.svelte +++ b/src/ens/SetName.svelte @@ -70,7 +70,7 @@
{#if mismatchError} - 🦉 + 👻 {:else} 🖊️ {/if} diff --git a/tsconfig.json b/tsconfig.json index d3aa4bd06..8764a990f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,8 @@ "node_modules/*" ], "compilerOptions": { - "target": "es2019", + "target": "es2020", + "module": "es2020", "types": [ "svelte" ],