Allow users set reverse records

Signed-off-by: Sebastian Martinez <sebastinez@me.com>

src/base/users/Routes.svelte

@@ -2,10 +2,11 @@
   import { Route } from "svelte-routing";
   import View from '@app/base/users/View.svelte';
   import type { Config } from '@app/config';
+  import { getSearchParam } from '@app/utils';
 
   export let config: Config;
 </script>
 
-<Route path="/users/:address" let:params>
-  <View {config} addressOrName={params.address}/>
+<Route path="/users/:address" let:params let:location>
+  <View {config} addressOrName={params.address} action={getSearchParam("action", location)} />
 </Route>

src/base/users/User.ts

@@ -20,6 +20,6 @@ export class User {
       config.abi.reverseRegistrar,
       config.signer
     );
-    return reverseRegistrar.setName(name, this.address);
+    return reverseRegistrar.setName(name);
   }
 }

src/base/users/View.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { SvelteComponent } from 'svelte';
   import type { Config } from '@app/config';
   import Icon from '@app/Icon.svelte';
   import Address from '@app/Address.svelte';
@@ -8,9 +9,25 @@
   import { Org } from '@app/base/orgs/Org';
   import Message from '@app/Message.svelte';
   import Project from '@app/base/projects/Widget.svelte';
+  import { session } from '@app/session';
+  import { isAddressEqual } from '@app/utils';
+  import Error from '@app/Error.svelte';
+  import SetName from '@app/ens/SetName.svelte';
+  import { User } from '@app/base/users/User';
 
   export let addressOrName: string;
   export let config: Config;
+  export let action: string | null = null;
+
+  let setNameForm: typeof SvelteComponent | null =
+    action === "setName" ? SetName : null;
+  const setName = () => {
+    setNameForm = SetName;
+  };
+
+  $: isAuthorized = (address: string): boolean | null => {
+    return $session && isAddressEqual(address, $session.address);
+  };
 </script>
 
 <style>
@@ -139,6 +156,13 @@
             <span class="subtle">Not set</span>
           {/if}
         </div>
+        <div>
+          {#if (isAuthorized(profile.address))}
+            <button class="tiny secondary" on:click={setName}>
+              Set
+            </button>
+          {/if}
+        </div>
       </div>
       {#await Org.getOrgsByMember(profile.address, config)}
         <Loading center />
@@ -183,4 +207,7 @@
         {/if}
       </div>
   </main>
+  <svelte:component this={setNameForm} entity={new User(profile.address)} {config} on:close={() => setNameForm = null} />
+{:catch err}
+  <Error error={err} />
 {/await}

src/ens/SetName.svelte

@@ -21,6 +21,8 @@
     ? entity as Org
     : null;
 
+  const label = org ? "org" : "profile";
+
   enum State {
     Idle,
     Checking,
@@ -138,14 +140,14 @@
       {:else if state == State.Pending}
         Waiting for transaction to be processed...
       {:else if state == State.Proposing && org}
-        Proposal is being submitted to the safe
+        Proposal is being submitted
         <strong>{formatAddress(org.owner)}</strong>,
         please sign the transaction in your wallet.
       {:else}
         Set an ENS name for <strong>{formatAddress(entity.address)}</strong>
         to associate a profile.
-        ENS profiles provide human-identifiable data to your org, such as a
-        unique name, avatar and URL, and help make your org more discoverable.
+        ENS profiles provide human-identifiable data to your {label}, such as a
+        unique name, avatar and URL, and help make your {label} more discoverable.
       {/if}
     </div>