02846f0 Improve registration copy/flow — radicle-explorer

Radicle web interface

Improve registration copy/flow

Alexis Sellier committed 4 years ago

commit 02846f0e8ad06b14280371f192b6c995b3cf3669
parent b4ea063038440facca1f1aefaf5541b357400599

2 files changed +27 -6

modified src/base/registrations/Submit.svelte

@@ -53,6 +53,8 @@

     <span slot="title">
       {#if $state.connection === State.Registered}
         <div>🎉</div>
       {:else}
         <div>🌐</div>
       {/if}
       {subdomain}.{config.registrar.domain}
     </span>

@@ -60,12 +62,18 @@

     <span slot="subtitle">
       {#if $state.connection === State.Connecting}
         Connecting...
       {:else if $state.connection === State.SigningPermit}
         Approving registration fee. Please confirm in your wallet.
       {:else if $state.connection === State.SigningCommit}
         Committing to <strong>{subdomain}</strong>. Please confirm transaction in your wallet.
       {:else if $state.connection === State.Committing}
         Committing... Please confirm in your wallet.
         Waiting for <strong>commit</strong> transaction to be processed&hellip;
       {:else if $state.connection === State.WaitingToRegister && $state.commitmentBlock}
         Waiting for commitment time... This may take a moment.
         Waiting for commitment to mature. This may take a moment.
       {:else if $state.connection === State.SigningRegister}
         Proceeding with registration. Please confirm transaction in your wallet.
       {:else if $state.connection === State.Registering}
         Registering name... Please confirm the transaction in your wallet.
         Waiting for <strong>register</strong> transaction to be processed&hellip;
       {/if}
     </span>

modified src/base/registrations/registrar.ts

@@ -26,8 +26,11 @@ export interface Registration {

 export enum State {
   Failed = -1,
   Connecting,
   SigningPermit,
   SigningCommit,
   Committing,
   WaitingToRegister,
   SigningRegister,
   Registering,
   Registered,
 }

@@ -35,8 +38,11 @@ export enum State {

 export type Connection =
     { connection: State.Failed }
   | { connection: State.Connecting }
   | { connection: State.SigningPermit }
   | { connection: State.SigningCommit }
   | { connection: State.Committing }
   | { connection: State.WaitingToRegister; commitmentBlock: number; minAge: number }
   | { connection: State.SigningRegister }
   | { connection: State.Registering }
   | { connection: State.Registered };

@@ -141,14 +147,15 @@ async function commitAndRegister(name: string, owner: string, config: Config): P

 async function commit(commitment: string, fee: BigNumber, minAge: number, config: Config): Promise<void> {
   assert(config.signer);
   state.set({ connection: State.Committing });
   const owner = config.signer;
   const ownerAddr = await owner.getAddress();
   const spender = config.registrar.address;
   const deadline = ethers.BigNumber.from(unixTime()).add(3600); // Expire one hour from now.
   const token = config.token;
   const signature = await permitSignature(owner, token, spender, fee, deadline);
   state.set({ connection: State.SigningCommit });
   const tx = await registrar(config)
     .connect(config.signer)
     .commitWithPermit(

@@ -161,6 +168,8 @@ async function commit(commitment: string, fee: BigNumber, minAge: number, config

       signature.s,
       { gasLimit: 150000 });
   state.set({ connection: State.Committing });
   await tx.wait(1);
   session.state.updateBalance(fee.mul(-1));
   const receipt = await config.provider.getTransactionReceipt(tx.hash);

@@ -181,6 +190,8 @@ async function permitSignature(

 ): Promise<ethers.Signature> {
   assert(owner.provider);
   state.set({ connection: State.SigningPermit });
   const ownerAddr = await owner.getAddress();
   const nonce = await token.nonces(ownerAddr);
   const chainId = (await owner.provider.getNetwork()).chainId;

@@ -213,11 +224,13 @@ async function permitSignature(

 async function register(name: string, owner: string, salt: Uint8Array, config: Config) {
   assert(config.signer);
   state.set({ connection: State.Registering });
   state.set({ connection: State.SigningRegister });
   const tx = await registrar(config).connect(config.signer).register(
     name, owner, ethers.BigNumber.from(salt), { gasLimit: 150000 }
   );
   state.set({ connection: State.Registering });
   console.log("Sent", tx);
   await tx.wait();