ArVerify integration

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@verto/lib": "^0.6.2",
+    "arverify": "^2.1.0",
     "arweave": "^1.9.1",
     "community-js": "^1.0.14",
     "compression": "^1.7.1",

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)) 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

@@ -1174,6 +1174,11 @@
     node-fetch "^2.6.1"
     smartweave "^0.3.6"
 
+"@weavery/clarity@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@weavery/clarity/-/clarity-0.1.5.tgz#f06bbb0dac7c63c6e2ccd76cda3e8b32b57f82c2"
+  integrity sha512-0ms2/sBx+uyW3EmXte5otIzNVAXpfJ3lBl6FS8JuLdWmPU6SxiAoGTMUT0N0SL3Ogiz2PZt6NV+mfApbSvYBaQ==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -1302,6 +1307,15 @@ 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@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/arverify/-/arverify-2.1.0.tgz#071ce35f96f6e6d0aab8bf97823a26ce8dbbd95d"
+  integrity sha512-/nPMrRLc5kOOYDaCDfe23KvPINCsePtEVD4PIbUKb33f0zs8ss2yfuZZ92sxZtpss6Z+8hRqAav/WZIwmUgGVA==
+  dependencies:
+    arweave "^1.9.1"
+    node-fetch "^2.6.1"
+    smartweave "^0.4.10"
+
 arweave@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/arweave/-/arweave-1.9.1.tgz#9b3754eeb38a244ed9abf1024ab0df6bfb76a990"
@@ -1400,6 +1414,11 @@ bignumber.js@^9.0.0:
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.0.tgz#805880f84a329b5eac6e7cb6f8274b6d82bdf075"
   integrity sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==
 
+bignumber.js@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.1.tgz#8d7ba124c882bfd8e43260c67475518d0689e4e5"
+  integrity sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA==
+
 binary-extensions@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
@@ -1702,6 +1721,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone@~0.1.9:
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/clone/-/clone-0.1.19.tgz#613fb68639b26a494ac53253e15b1a6bd88ada85"
@@ -2093,6 +2121,11 @@ escalade@^3.0.2:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
   integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
 
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -2444,7 +2477,7 @@ gensync@^1.0.0-beta.1:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
   integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -4172,6 +4205,17 @@ smartweave@^0.3.6:
     loglevel "^1.7.0"
     yargs "^15.3.1"
 
+smartweave@^0.4.10:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/smartweave/-/smartweave-0.4.11.tgz#847cc736f1b15f425059407e1a654a49a16893f7"
+  integrity sha512-y/tcaWh9Uq6qPzIpqLadsxjR6GoeFU2no8KoQ8ycQgQbrcGKm7hQGghWNOknPzX+qaoF/xEA73hkAewyKM9Tpw==
+  dependencies:
+    "@weavery/clarity" "^0.1.5"
+    arweave "^1.9.1"
+    bignumber.js "^9.0.1"
+    loglevel "^1.7.0"
+    yargs "^16.1.0"
+
 source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -4811,6 +4855,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -4853,6 +4906,11 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
+y18n@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
+  integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
@@ -4879,6 +4937,11 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.4"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
+  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+
 yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
@@ -4912,6 +4975,19 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^16.1.0:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.1.1.tgz#5a4a095bd1ca806b0a50d0c03611d38034d219a1"
+  integrity sha512-hAD1RcFP/wfgfxgMVswPE+z3tlPFtxG8/yWUrG2i17sTWGCGqWnxKcLTF4cUKDUK8fzokwsmO9H0TDkRbMHy8w==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yorkie@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/yorkie/-/yorkie-2.0.0.tgz#92411912d435214e12c51c2ae1093e54b6bb83d9"