Make 'Form' render links and addresses correctly

public/index.css

@@ -159,8 +159,8 @@ a {
 	border-bottom: 1px solid #444;
 }
 a:hover {
-	color: #e0e0e0;
-	border-bottom-color: #e0e0e0;
+	color: var(--color-foreground);
+	border-bottom-color: var(--color-foreground);
 }
 a.primary {
 	color: var(--color-primary);
@@ -169,6 +169,9 @@ a.primary:hover {
 	color: var(--color-primary-faded);
 	border-bottom-color: var(--color-primary-faded);
 }
+a.address {
+	border-bottom-color: transparent;
+}
 
 input[type="text"], button {
 	line-height: 1.5em;

src/Form.svelte

@@ -10,7 +10,8 @@
 
 <script lang="typescript">
   import { createEventDispatcher } from 'svelte';
-  import { capitalize } from '@app/utils';
+  import { link } from 'svelte-routing';
+  import { capitalize, isUrl, isAddress } from '@app/utils';
 
   export let fields: Field[];
   export let editable = false;
@@ -32,23 +33,18 @@
     align-self: center;
   }
 
-  input.field {
-    padding: 0;
-    margin: 0;
-    border: none;
-  }
-  input.field {
-    padding: 0.25rem 1rem;
-    border-radius: 1rem;
-    border: 1px dashed transparent;
+  .field {
     width: 28rem;
+    border: 1px dashed transparent;
+    padding: 0.25rem 1rem;
+    margin: 0;
+  }
+
+  input.field {
+    border-radius: 1rem;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  input.field[disabled] {
-    color: var(--color-foreground);
-    font-style: normal;
-  }
   input.field::placeholder {
     color: var(--color-subtle);
     font-style: italic;
@@ -60,6 +56,10 @@
     border-color: var(--color-secondary) !important;
   }
 
+  span.field {
+    display: inline-block;
+  }
+
   .label {
     border: 1px solid transparent;
   }
@@ -83,9 +83,20 @@
       {field.label || capitalize(field.name)}
     </div>
     <div>
-      <input name={field.name} class="field" placeholder={field.placeholder}
-             disabled={!field.editable || !editable || disabled} bind:value={field.value}
-             type="text" />
+      {#if field.value && (!field.editable || !editable || disabled)}
+        <span class="field">
+          {#if isUrl(field.value)}
+            <a href="{field.value}" target="_blank">{field.value}</a>
+          {:else if isAddress(field.value)}
+            <a use:link href={`/resolve?q=${field.value}`} class="address">{field.value}</a>
+          {:else}
+            {field.value}
+          {/if}
+        </span>
+      {:else}
+        <input name={field.name} class="field" placeholder={field.placeholder}
+               bind:value={field.value} type="text" />
+      {/if}
     </div>
   {/each}
 </div>

src/utils.ts

@@ -36,7 +36,18 @@ export function isRadicleId(input: string): boolean {
   return /^rad:[a-z]+:[a-zA-Z0-9]+$/.test(input);
 }
 
+// Check whether the input is a URL.
+export function isUrl(input: string): boolean {
+  return /^https?:\/\//.test(input);
+}
+
+// Check whether the input is an Ethereum address.
+export function isAddress(input: string): boolean {
+  return ethers.utils.isAddress(input);
+}
+
+// Get search parameters from location.
 export function getSearchParam(key: string, location: RouteLocation): string | null {
   let params = new URLSearchParams(location.search);
   return params.get(key);
-};
+}