ArVerify integration

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@verto/lib": "^0.8.8",
+    "arverify": "^0.0.2",
     "ar-gql": "^0.0.3",
     "arweave": "^1.10.0",
     "community-js": "^1.1.8",

src/components/app/Balance.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import { address, balance } from "../../stores/keyfileStore";
+  import { address, balance, keyfile } from "../../stores/keyfileStore";
   import { theme } from "../../stores/themeStore";
   import { Theme } from "../../utils/types";
   import SkeletonLoading from "../SkeletonLoading.svelte";
   import { notification } from "../../stores/notificationStore";
   import { NotificationType } from "../../utils/types";
   import downArrowIcon from "../../assets/down-arrow.svg";
   import copyIcon from "../../assets/copy.svg";
+  import { isVerified, verify } from "arverify";
+  import Modal from "../Modal.svelte";
 
   export let showThemeSwitcher: boolean = false;
+  const verified = isVerified($address);
+  let hoveredVerify = false,
+    verifyModalOpened = false;
 
   function roundCurrency(val: number | string): string {
     if (val === "?") return val;
@@ -79,13 +84,44 @@
       {roundCurrency($balance)}<span style="text-transform: uppercase; font-size: .5em; display: inline-block">Ar</span>
     </h1>
     <p class="wallet" in:fade={{ duration: 150 }}>
-      Wallet: {$address}<img
-        src={copyIcon}
-        alt="copy-address"
-        on:click={copyAddress} />
+      Wallet:
+      {#await verified}
+        ⏳
+      {:then ver}
+        <span
+          class="verified-emoji"
+          on:click={() => {
+            if (!ver.verified) verifyModalOpened = true;
+          }}
+          style={ver.verified ? '' : 'cursor: pointer;'}
+          on:mouseover={() => (hoveredVerify = true)}
+          on:mouseleave={() => (hoveredVerify = false)}>
+          {#if ver.verified}✅{:else}🙅{/if}
+          {#if hoveredVerify}
+            <div class="verified-tooltip" transition:fade={{ duration: 160 }}>
+              {#if ver.verified}
+                Verified on ArVerify
+              {:else}Not verified on ArVerify. Click to verify!{/if}
+            </div>
+          {/if}
+        </span>
+      {/await}
+      {$address}<img src={copyIcon} alt="copy-address" on:click={copyAddress} />
     </p>
   {/if}
 </div>
+<Modal bind:opened={verifyModalOpened} confirmation={true} onConfirm={() => {}}>
+  <h1 style="text-align: center;">🤖?</h1>
+  <p style="text-align: justify;">
+    ArVerify checks to ensure an Arweave wallet address is owned by an actual
+    person, not a robot. Verifying promotes trust for person-to-person
+    interactions across the network.
+  </p>
+  <p>Click the URL below to verify your wallet:</p>
+  {#await verify(JSON.parse($keyfile), 'http://localhost:3000') then verifyURL}
+    <a href={verifyURL} target="_blank" rel="noopener noreferer">{verifyURL}</a>
+  {/await}
+</Modal>
 
 <style lang="sass">
 
@@ -111,6 +147,39 @@
         text-transform: none
         justify-content: normal
 
+        span.verified-emoji
+          margin: 0 .32em
+          cursor: default
+          position: relative
+
+          .verified-tooltip
+            position: absolute
+            top: 137%
+            left: 50%
+            background-color: var(--inverted-elements-color)
+            padding: .27em .36em
+            border-radius: 5px
+            color: var(--background-color)
+            font-size: .83em
+            font-weight: 400
+            text-align: center
+            text-transform: none
+            width: max-content
+            max-width: 193px
+            display: inline-block
+            transform: translateX(-50%)
+
+            &::after
+              content: ''
+              position: absolute
+              bottom: 100%
+              left: 50%
+              background-color: var(--inverted-elements-color)
+              width: .6em
+              height: .6em
+              z-index: -1
+              transform: translate(-50%, 60%) rotate(45deg)
+
         img
           height: .97em
           filter: var(--svg-color)

src/routes/_layout.svelte

@@ -18,7 +18,7 @@
 <main
   style="
     --primary-text-color: {$displayTheme === DisplayTheme.Dark ? 'rgba(255, 255, 255, .837)' : '#000'};
-    --secondary-text-color: {$displayTheme === DisplayTheme.Dark ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'};
+    --secondary-text-color: {$displayTheme === DisplayTheme.Dark ? '#4d4d4d' : '#b2b2b2'};
     --darker-secondary-text-color: {$displayTheme === DisplayTheme.Dark ? 'rgba(255, 255, 255, .5)' : 'rgba(0, 0, 0, .5)'};
     --inverted-elements-color: {$displayTheme === DisplayTheme.Dark ? 'rgba(255, 255, 255, .94)' : '#000'};
     --nav-scrolled: {$displayTheme === DisplayTheme.Dark ? 'rgba(0, 0, 0, .73)' : 'rgba(255, 255, 255, .7)'};

yarn.lock

@@ -1283,6 +1283,13 @@ aproba@^1.0.3:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
+ar-gql@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/ar-gql/-/ar-gql-0.0.1.tgz#66b4b1fcba928dee634a0b9c76a9534a41eb4a55"
+  integrity sha512-ky7kOIfs5lYr3cN3movieHbzm45xeUb1q42kZN4nvb3FB712UQ939q3I48WCpcrBeZXygSDfLvNvUxOZZjylrA==
+  dependencies:
+    node-fetch "^2.6.1"
+
 ar-gql@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/ar-gql/-/ar-gql-0.0.3.tgz#3c0734e572a26842ffbdb6bb343182f96e2a711f"
@@ -1315,6 +1322,16 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
+arverify@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/arverify/-/arverify-0.0.2.tgz#ad1b82afb92c2d935e764f59b4f0caa32d6789a0"
+  integrity sha512-g2dXmlRDP7FwMqG9g5A5M16vm3s0oGWKQCLK0yV7D3CxSceLioyS78rVR/FCiOQ0NDlQPE+5f1KkPBj2Fevzbw==
+  dependencies:
+    ar-gql "^0.0.1"
+    arweave "^1.9.1"
+    node-fetch "^2.6.1"
+    smartweave "^0.4.10"
+
 arweave@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/arweave/-/arweave-1.10.0.tgz#76df929ff1f75349d49241ffc542c1422a4b235a"
@@ -4158,7 +4175,7 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-smartweave@^0.4.11, smartweave@^0.4.12:
+smartweave@^0.4.10, smartweave@^0.4.11, smartweave@^0.4.12:
   version "0.4.12"
   resolved "https://registry.yarnpkg.com/smartweave/-/smartweave-0.4.12.tgz#e9c770867ab5eb36940637db264620974e2c19b6"
   integrity sha512-EMaRLV7ZT0kafU+XDlNH7EBKIJO1PfRXe4yOKu1IVN279uMHCRaEywioo7eHQ2WjCryr168X07ndpFA6l1fgkA==