From 68e7cd8931184d373dfc8f296051a2f524ae0936 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Wed, 4 Aug 2021 22:17:26 +0300
Subject: [PATCH] wip

---
 components/QrCode.vue                         | 70 ++++++++++++++++
 components/SearchInput.vue                    |  2 +-
 components/common/menu/MenuButton.vue         |  6 +-
 .../context/SidebarDepositOverview.vue        | 81 +++++++++++++++++++
 .../context/components/CurrencyList.vue       |  2 +-
 .../sidebar/context/overview/CardCurrency.vue | 31 +++++--
 .../context/overview/SidebarOverview.vue      | 10 ++-
 .../overview/SidebarOverviewBalance.vue       |  6 +-
 composables/useCopiedToClipboardUx.ts         | 27 +++++++
 composables/useSidebar.ts                     |  3 +
 nuxt.config.js                                |  1 +
 package.json                                  |  2 +
 pages/mainnet/aave-v2.vue                     |  1 +
 pages/overview.vue                            | 14 ----
 pages/polygon/aave-v2.vue                     |  1 +
 plugins/v-clipboard2.js                       |  4 +
 yarn.lock                                     | 40 ++++++++-
 17 files changed, 270 insertions(+), 31 deletions(-)
 create mode 100644 components/QrCode.vue
 create mode 100644 components/sidebar/context/SidebarDepositOverview.vue
 create mode 100644 composables/useCopiedToClipboardUx.ts
 delete mode 100644 pages/overview.vue
 create mode 100644 plugins/v-clipboard2.js

diff --git a/components/QrCode.vue b/components/QrCode.vue
new file mode 100644
index 0000000..6cadddc
--- /dev/null
+++ b/components/QrCode.vue
@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="flex items-center justify-center"
+    :style="{
+      width: width + 'px',
+      height: width + 'px',
+    }"
+  >
+    <transition
+      enter-active-class="duration-300 ease-out"
+      enter-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-class="opacity-100"
+      leave-to-class="opacity-0"
+      @leave="show = false"
+      @after-leave="show = true"
+    >
+      <img
+        v-if="show && !!src"
+        :width="width"
+        :height="width"
+        :src="src"
+        alt="QR Code"
+        class="w-full h-full overflow-hidden rounded-xs"
+      />
+    </transition>
+  </div>
+</template>
+
+<script>
+import { defineComponent, watch, ref, useContext, onUnmounted } from '@nuxtjs/composition-api'
+import { toDataURL } from 'qrcode'
+
+export default defineComponent({
+  props: {
+    value: { type: String, required: true },
+    width: { type: Number, default: 220 },
+  },
+  setup(props, context) {
+    const src = ref(null)
+    const show = ref(true)
+
+    watch(
+      () => [props.value],
+      async ([value]) => {
+        URL.revokeObjectURL(src.value)
+
+        src.value = null
+
+        if (!value) return
+
+        src.value = await toDataURL(value, {
+          width: props.width,
+          margin: 0,
+          color: {
+            light: '#00000000',
+            dark: '#131E40ff',
+          },
+        })
+      },
+      { immediate: true }
+    )
+
+    onUnmounted(() => URL.revokeObjectURL(src.value))
+
+    return { src, show }
+  },
+})
+</script>
diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index ddc287e..5fa6197 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex items-center h-9 w-[200px]">
+  <div class="relative flex items-center h-9">
     <input
       class="w-full pl-3 pr-8 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
       type="text"
diff --git a/components/common/menu/MenuButton.vue b/components/common/menu/MenuButton.vue
index 6394f9d..e1d3e7f 100644
--- a/components/common/menu/MenuButton.vue
+++ b/components/common/menu/MenuButton.vue
@@ -1,18 +1,20 @@
 <template>
   <Button
     color="white"
-    class="border rounded-sm border-grey-light dark:border-opacity-25 dark:bg-opacity-100 dark:bg-dark-400"
+    class="border rounded-[6px] p-1.5 border-grey-light dark:border-opacity-25 dark:bg-opacity-100 dark:bg-dark-400"
     :style="`width: ${size}px; height: ${size}px`"
     v-on="$listeners"
   >
-    <Icon name="dots-horizontal" :style="`height: ${+size / 2}`" />
+    <DotsHorizontal :style="`height: ${+size / 2}`" />
   </Button>
 </template>
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+import DotsHorizontal from '@/assets/img/icons/heroicons/solid/dots-horizontal.svg?inline'
 
 export default defineComponent({
+  components: { DotsHorizontal },
   props: { size: { type: String, default: '30' } },
 })
 </script>
diff --git a/components/sidebar/context/SidebarDepositOverview.vue b/components/sidebar/context/SidebarDepositOverview.vue
new file mode 100644
index 0000000..d743268
--- /dev/null
+++ b/components/sidebar/context/SidebarDepositOverview.vue
@@ -0,0 +1,81 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title
+      >Deposit <span class="uppercase">{{ tokenKey }}</span></template
+    >
+    <div class="relative">
+      <div
+        v-if="activeAccount"
+        class="flex flex-col items-center justify-center px-8 mt-6 mb-8"
+      >
+        <QrCode
+          v-if="
+            activeAccount.address !==
+              '0x0000000000000000000000000000000000000000'
+          "
+          :value="activeAccount.address"
+          :width="220"
+        />
+
+        <div
+          v-if="
+            activeAccount.address !==
+              '0x0000000000000000000000000000000000000000'
+          "
+          v-tooltip.bottom="tooltip"
+          v-clipboard:copy="activeAccount.address"
+          v-clipboard:success="onCopy"
+          class="flex items-center px-8 mt-4 whitespace-no-wrap cursor-pointer select-none group"
+          style="width: 220px"
+        >
+          <div
+            class="flex-1 font-medium text-center text-ocean-blue-pure text-19"
+          >
+            {{ shortenHash(activeAccount.address) }}
+          </div>
+
+          <Icon
+            v-if="!copied"
+            name="clipboard-copy"
+            type="outline"
+            class="flex-shrink-0 w-6 h-6 ml-4 text-grey-pure group-hover:text-ocean-blue-pure"
+          />
+          <Icon
+            v-else
+            name="clipboard-check"
+            type="outline"
+            class="flex-shrink-0 w-6 h-6 ml-4 transform -translate-x-px text-ocean-blue-pure dark:text-light"
+          />
+        </div>
+      </div>
+    </div>
+  </SidebarContextRootContainer>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { useFormatting } from '~/composables/useFormatting'
+import { useDSA } from '~/composables/useDSA'
+import { useCopiedToClipboardUx } from '~/composables/useCopiedToClipboardUx'
+
+export default defineComponent({
+  props: {
+    tokenKey: {}
+  },
+  setup() {
+    const { activeAccount } = useDSA()
+
+    const { shortenHash } = useFormatting()
+
+    const { onCopy, tooltip, copied } = useCopiedToClipboardUx()
+
+    return { activeAccount, shortenHash, onCopy, tooltip, copied }
+  },
+})
+</script>
+
+<style>
+.blured {
+  filter: blur(6px);
+}
+</style>
diff --git a/components/sidebar/context/components/CurrencyList.vue b/components/sidebar/context/components/CurrencyList.vue
index 744e75f..d873a04 100644
--- a/components/sidebar/context/components/CurrencyList.vue
+++ b/components/sidebar/context/components/CurrencyList.vue
@@ -9,7 +9,7 @@
       :net-worth="token.netWorth"
       :symbol="token.symbol"
       :action-label="actionLabel"
-      @action="$emit('action', token.key)"
+      @deposit="$router.push({ hash: 'deposit-overview?tokenKey=' + token.key })"
     />
   </div>
   <div v-else>
diff --git a/components/sidebar/context/overview/CardCurrency.vue b/components/sidebar/context/overview/CardCurrency.vue
index dfdedb1..514d4e8 100644
--- a/components/sidebar/context/overview/CardCurrency.vue
+++ b/components/sidebar/context/overview/CardCurrency.vue
@@ -1,13 +1,34 @@
 <template>
-  <div class="flex items-center px-4 py-4 select-none dark:bg-dark-400">
+  <div
+    class="flex items-center px-4 py-4 select-none shadow-sm bg-white rounded-[4px] "
+  >
     <IconCurrency :currency="tokenKey" />
-    <div class="flex flex-col px-4">
-      <div class="mb-1 font-semibold whitespace-no-wrap text-12 text-navi-pure dark:text-light">
+    <div class="flex-1 flex flex-col px-4">
+      <div
+        class="mb-1 font-semibold whitespace-no-wrap text-sm text-primary-dark"
+      >
         {{ formatDecimal(balance) }} {{ symbol }}
       </div>
-      <div class="font-medium whitespace-no-wrap text-12 text-grey-pure">{{ formatUsd(netWorth, 2) }}</div>
+      <div
+        class="font-medium whitespace-no-wrap text-sm text-[#9299AF] text-opacity-90"
+      >
+        {{ formatUsd(netWorth, 2) }}
+      </div>
+    </div>
+    <div class="flex flex-col items-center">
+      <button
+        class="mb-2 h-[26px] w-24 flex-shrink-0 text-xs bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
+         @click="$emit('deposit')"
+      >
+        Deposit
+      </button>
+      <button
+        class="h-[26px] w-24 text-xs flex-shrink-0  text-primary-blue-dark shadow border border-primary-blue-dark border-opacity-38 hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
+        @click="$emit('action')"
+      >
+        Withdraw
+      </button>
     </div>
-    <Button class="ml-auto w-18" color="ocean-blue" @click="$emit('action')">{{ actionLabel }}</Button>
   </div>
 </template>
 
diff --git a/components/sidebar/context/overview/SidebarOverview.vue b/components/sidebar/context/overview/SidebarOverview.vue
index 69f8907..9b0e950 100644
--- a/components/sidebar/context/overview/SidebarOverview.vue
+++ b/components/sidebar/context/overview/SidebarOverview.vue
@@ -3,15 +3,17 @@
     <SidebarContextHeader :showBackButton="false"></SidebarContextHeader>
 
     <div class="flex-grow overflow-y-scroll scrollbar-hover">
-      <div class="h-full mx-auto" style="max-width: 296px">
+      <div class="h-full mx-auto">
         <div class="flex flex-col h-full py-2 sm:py-4">
           <SidebarOverviewBalance />
-          <div class="flex flex-col flex-grow mt-2 sm:mt-4">
+          <div
+            class="bg-[#C5CCE1] bg-opacity-[0.15] py-10 px-8 flex flex-col flex-grow mt-2 sm:mt-4"
+          >
             <div class="flex flex-shrink-0">
               <search-input
                 v-model.trim="search"
                 placeholder="Search Currency"
-                class="mr-2"
+                class="w-full mr-2"
               />
               <Menu>
                 <template v-slot:activator="{ on }">
@@ -32,7 +34,7 @@
               </Menu>
             </div>
 
-            <div class="flex flex-col flex-grow mt-2 sm:mt-4">
+            <div class="flex flex-col flex-grow mt-2 sm:mt-4 overflow-y-scroll">
               <currency-list :search="search" type="dsa" action-label="Trade">
                 <template v-slot:no-items>
                   <div class="flex flex-col">
diff --git a/components/sidebar/context/overview/SidebarOverviewBalance.vue b/components/sidebar/context/overview/SidebarOverviewBalance.vue
index 1625815..19a43c7 100644
--- a/components/sidebar/context/overview/SidebarOverviewBalance.vue
+++ b/components/sidebar/context/overview/SidebarOverviewBalance.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col items-center flex-shrink-0 w-full px-8 mt-6 mb-2 text-center sm:mb-10">
-    <h3 class="flex items-center leading-none">Balance <Info text="This is your DSA balance and doesn't reflect your wallet balance (like Metamask)" class="ml-1" /></h3>
-    <div class="mt-4 font-semibold text-32">{{ formatUsd(balanceTotal) }}</div>
+  <div class="flex flex-col items-center text-primary-black flex-shrink-0 w-full px-8 mb-2 text-center sm:mb-10">
+    <h3 class="flex items-center font-medium leading-none">Balance</h3>
+    <div class="mt-2 font-semibold text-32">{{ formatUsd(balanceTotal) }}</div>
   </div>
 </template>
 
diff --git a/composables/useCopiedToClipboardUx.ts b/composables/useCopiedToClipboardUx.ts
new file mode 100644
index 0000000..618d6f5
--- /dev/null
+++ b/composables/useCopiedToClipboardUx.ts
@@ -0,0 +1,27 @@
+import { computed, ref } from "@nuxtjs/composition-api";
+
+export function useCopiedToClipboardUx() {
+  const copied = ref(false);
+  let copiedTimeout;
+
+  function onCopy() {
+    if (copiedTimeout) {
+      clearTimeout(copiedTimeout);
+      copiedTimeout = null;
+    }
+
+    copied.value = true;
+    copiedTimeout = setTimeout(() => {
+      copied.value = false;
+      copiedTimeout = null;
+    }, 1800);
+  }
+
+  const tooltip = computed(() => ({
+    content: "Copied!",
+    trigger: "manual",
+    show: copied.value
+  }));
+
+  return { onCopy, tooltip, copied };
+}
diff --git a/composables/useSidebar.ts b/composables/useSidebar.ts
index b06e6db..241884b 100644
--- a/composables/useSidebar.ts
+++ b/composables/useSidebar.ts
@@ -20,9 +20,12 @@ import SidebarAaveV2Payback from '~/components/sidebar/context/aaveV2/SidebarAav
 
 //@ts-ignore
 import SidebarOverview from '~/components/sidebar/context/overview/SidebarOverview.vue'
+//@ts-ignore
+import SidebarDepositOverview from '~/components/sidebar/context/SidebarDepositOverview.vue'
 
 const sidebars = {
   "#overview" :  {component: SidebarOverview, back : false, close : true },
+  "#deposit-overview": {component: SidebarDepositOverview },
   "/polygon/aave-v2": { component: null },
   "/polygon/aave-v2#supply": { component: SidebarAaveV2Supply },
   "/polygon/aave-v2#borrow": { component: SidebarAaveV2Borrow },
diff --git a/nuxt.config.js b/nuxt.config.js
index 0d38b0a..3eb756a 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -33,6 +33,7 @@ export default {
     "~/plugins/v-click-outside.js",
     "~/plugins/web3modal.js",
     { src: '~/plugins/v-tooltip', mode: 'client' },
+    { src: '~/plugins/v-clipboard2', mode: 'client' },
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
diff --git a/package.json b/package.json
index 5d264cf..aaf8fa9 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,10 @@
     "css-color-function": "^1.3.3",
     "dsa-connect": "^0.4.2",
     "nuxt": "^2.15.7",
+    "qrcode": "^1.4.4",
     "v-click-outside": "^3.1.2",
     "v-tooltip": "^2.1.3",
+    "vue-clipboard2": "^0.3.1",
     "vue-composable": "^1.0.0-beta.23",
     "walletlink": "^2.1.6",
     "web3": "^1.4.0",
diff --git a/pages/mainnet/aave-v2.vue b/pages/mainnet/aave-v2.vue
index fbbb9ca..7a677d2 100644
--- a/pages/mainnet/aave-v2.vue
+++ b/pages/mainnet/aave-v2.vue
@@ -113,6 +113,7 @@
           <SearchInput
             v-model.trim="search"
             dense
+            class="w-[200px]"
             placeholder="Search positions"
           />
         </div>
diff --git a/pages/overview.vue b/pages/overview.vue
deleted file mode 100644
index 6dd494a..0000000
--- a/pages/overview.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <sidebar-overview />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-import SidebarOverview from "~/components/sidebar/context/overview/SidebarOverview.vue";
-
-export default defineComponent({
-  components: {SidebarOverview  },
-});
-</script>
diff --git a/pages/polygon/aave-v2.vue b/pages/polygon/aave-v2.vue
index fbbb9ca..7a677d2 100644
--- a/pages/polygon/aave-v2.vue
+++ b/pages/polygon/aave-v2.vue
@@ -113,6 +113,7 @@
           <SearchInput
             v-model.trim="search"
             dense
+            class="w-[200px]"
             placeholder="Search positions"
           />
         </div>
diff --git a/plugins/v-clipboard2.js b/plugins/v-clipboard2.js
new file mode 100644
index 0000000..8ce0d97
--- /dev/null
+++ b/plugins/v-clipboard2.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueClipboard from 'vue-clipboard2'
+
+Vue.use(VueClipboard)
diff --git a/yarn.lock b/yarn.lock
index a5dfe8e..87924f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3625,6 +3625,15 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
+clipboard@^2.0.0:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
+  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -4476,6 +4485,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -5850,6 +5864,13 @@ globby@^11.0.3:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 google-fonts-helper@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/google-fonts-helper/-/google-fonts-helper-1.2.0.tgz#32eb8ebf9816dbb2ec8acda81ad03a021ed44050"
@@ -9508,7 +9529,7 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qrcode@1.4.4:
+qrcode@1.4.4, qrcode@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
   integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
@@ -10160,6 +10181,11 @@ secp256k1@^4.0.1:
     node-addon-api "^2.0.0"
     node-gyp-build "^4.2.0"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 semaphore@>=1.0.1, semaphore@^1.0.3:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/semaphore/-/semaphore-1.1.0.tgz#aaad8b86b20fe8e9b32b16dc2ee682a8cd26a8aa"
@@ -10999,6 +11025,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -11499,6 +11530,13 @@ vue-client-only@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.1.0.tgz#1a67a47b8ecacfa86d75830173fffee3bf8a4ee3"
   integrity sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA==
 
+vue-clipboard2@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894"
+  integrity sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==
+  dependencies:
+    clipboard "^2.0.0"
+
 vue-composable@^1.0.0-beta.23:
   version "1.0.0-beta.23"
   resolved "https://registry.yarnpkg.com/vue-composable/-/vue-composable-1.0.0-beta.23.tgz#1085bcd8360d9ed309ec5c33e8242611790cd5c5"