use Intl API (snapshot-labs#1434)

* replaced numeral, timeago.js and day.js with Intl * linting * fixed yarn.lock * added comment to intl composable * added comments * improved comment * fixed getTimeDiffAndUnit * implemented duration / time left * use same number format as before * linting * readded lock dependencies * fix parameter Co-authored-by: Sam <[email protected]> * fix typo Co-authored-by: Sam <[email protected]> * fix weird linter bug {{ '< some string' }} seems to be interpreted as an opening html tag * fixed percentage calculation when providing 0 as max value * added comments, renamed functions * linting * fixed percent formatter behaves now as before * use only english for number formatting Co-authored-by: Sam <[email protected]>
rmiranda87 · Jan 17, 2022 · 45fed63 · 45fed63
1 parent 1ee7d73
commit 45fed63
Show file tree

Hide file tree

Showing 33 changed files with 365 additions and 133 deletions.
diff --git a/package.json b/package.json
@@ -29,19 +29,16 @@
     "@vueuse/core": "^7.5.1",
     "autolinker": "^3.14.3",
     "chart.js": "^3.5.1",
-    "dayjs": "^1.10.7",
     "eslint": "^7.32.0",
     "ethereum-blockies-base64": "^1.0.2",
     "graphql": "^16.2.0",
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
-    "numeral": "^2.0.6",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "remarkable": "^2.0.1",
     "remove-markdown": "^0.3.0",
     "scrollmonitor": "^1.2.4",
-    "timeago.js": "^4.0.2",
     "typescript": "^4.3.5",
     "vue": "^3.2.27",
     "vue-i18n": "^9.1.9",

diff --git a/src/components/Block/Network.vue b/src/components/Block/Network.vue
@@ -1,5 +1,7 @@
 <script setup>
-import { n } from '@/helpers/utils';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatCompactNumber } = useIntl();
 
 defineProps(['network']);
 
@@ -21,7 +23,7 @@ function getLogoUrl(key) {
       <div v-text="network.key" class="ml-1 text-color" />
     </div>
     <div class="text-color">
-      {{ $tc('inSpaces', [n(network.spaces)]) }}
+      {{ $tc('inSpaces', [formatCompactNumber(network.spaces)]) }}
     </div>
   </Block>
 </template>
diff --git a/src/components/Block/Plugin.vue b/src/components/Block/Plugin.vue
@@ -1,5 +1,7 @@
 <script setup>
-import { n } from '@/helpers/utils';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatCompactNumber } = useIntl();
 
 defineProps(['plugin']);
 
@@ -37,7 +39,7 @@ function getLogoUrl(key) {
           {{ plugin.author }}
         </a>
       </div>
-      {{ $tc('inSpaces', [n(plugin.spaces)]) }}
+      {{ $tc('inSpaces', [formatCompactNumber(plugin.spaces)]) }}
     </div>
   </Block>
 </template>
diff --git a/src/components/Block/Results.vue b/src/components/Block/Results.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { computed } from 'vue';
-import { shorten, n } from '@/helpers/utils';
+import { shorten } from '@/helpers/utils';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatCompactNumber, formatPercentNumber } = useIntl();
 
 const props = defineProps({
   id: String,
@@ -27,7 +30,7 @@ const choices = computed(() =>
     )
 );
 
-const getPercentage = (n, max) => ((100 / max) * n) / 1e2;
+const getPercentage = (n, max) => (max ? ((100 / max) * n) / 1e2 : 0);
 
 const hideAbstain = props.space?.voting?.hideAbstain ?? false;
 </script>
@@ -54,24 +57,26 @@ const hideAbstain = props.space?.voting?.hideAbstain ?? false;
             class="inline-block"
             v-tippy="{
               content: results.resultsByStrategyScore[choice.i]
-                .map((score, index) => `${n(score)} ${titles[index]}`)
+                .map(
+                  (score, index) =>
+                    `${formatCompactNumber(score)} ${titles[index]}`
+                )
                 .join(' + ')
             }"
           >
-            {{ n(results.resultsByVoteBalance[choice.i]) }}
+            {{ formatCompactNumber(results.resultsByVoteBalance[choice.i]) }}
             {{ shorten(space.symbol, 'symbol') }}
           </span>
           <span
             v-if="proposal.type === 'basic' && hideAbstain && choice.i === 0"
             class="float-right"
             v-text="
-              n(
+              formatPercentNumber(
                 getPercentage(
                   results.resultsByVoteBalance[0],
                   results.resultsByVoteBalance[0] +
                     results.resultsByVoteBalance[1]
-                ),
-                '0.[00]%'
+                )
               )
             "
           />
@@ -81,26 +86,24 @@ const hideAbstain = props.space?.voting?.hideAbstain ?? false;
             "
             class="float-right"
             v-text="
-              n(
+              formatPercentNumber(
                 getPercentage(
                   results.resultsByVoteBalance[1],
                   results.resultsByVoteBalance[0] +
                     results.resultsByVoteBalance[1]
-                ),
-                '0.[00]%'
+                )
               )
             "
           />
           <span
             v-else
             class="float-right"
             v-text="
-              n(
+              formatPercentNumber(
                 getPercentage(
                   results.resultsByVoteBalance[choice.i],
                   results.sumOfResultsBalance
-                ),
-                '0.[00]%'
+                )
               )
             "
           />
@@ -120,8 +123,8 @@ const hideAbstain = props.space?.voting?.hideAbstain ?? false;
     <div v-if="props.space?.voting?.quorum" class="text-skin-link">
       {{ $t('settings.quorum') }}
       <span class="float-right">
-        {{ n(results.sumOfResultsBalance) }} /
-        {{ n(props.space.voting.quorum) }}
+        {{ formatCompactNumber(results.sumOfResultsBalance) }} /
+        {{ formatCompactNumber(props.space.voting.quorum) }}
       </span>
     </div>
   </Block>

diff --git a/src/components/Block/Skin.vue b/src/components/Block/Skin.vue
@@ -1,5 +1,7 @@
 <script setup>
-import { n } from '@/helpers/utils';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatCompactNumber } = useIntl();
 
 defineProps(['skin']);
 </script>
@@ -9,7 +11,7 @@ defineProps(['skin']);
     <Block>
       <UiButton class="mb-2" primary>{{ skin.key }}</UiButton>
       <div class="text-color">
-        {{ $tc('inSpaces', [n(skin.spaces)]) }}
+        {{ $tc('inSpaces', [formatCompactNumber(skin.spaces)]) }}
       </div>
     </Block>
   </div>

diff --git a/src/components/Block/Space.vue b/src/components/Block/Space.vue
@@ -1,11 +1,11 @@
 <script setup>
 import { computed, ref, watchEffect } from 'vue';
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
-import { n } from '@/helpers/utils';
 import { useWeb3 } from '@/composables/useWeb3';
 import { useApp } from '@/composables/useApp';
 import { useSpaceSubscription } from '@/composables/useSpaceSubscription';
 import { useFollowSpace } from '@/composables/useFollowSpace';
+import { useIntl } from '@/composables/useIntl';
 import verified from '@/../snapshot-spaces/spaces/verified.json';
 
 const props = defineProps({
@@ -17,6 +17,8 @@ const { web3Account } = useWeb3();
 
 const { explore } = useApp();
 
+const { formatCompactNumber } = useIntl();
+
 const nbrMembers = explore.value.spaces[props.space.id].followers;
 const isVerified = verified[props.space.id] || 0;
 
@@ -71,7 +73,11 @@ watchEffect(() => {
           <Icon v-if="isVerified === -1" name="warning" size="20" />
         </h3>
         <div class="mb-[12px] text-color">
-          {{ $tc('members', nbrMembers, { count: n(nbrMembers) }) }}
+          {{
+            $tc('members', nbrMembers, {
+              count: formatCompactNumber(nbrMembers)
+            })
+          }}
         </div>
         <div class="flex justify-center gap-x-2">
           <FollowButton :space="space" />

diff --git a/src/components/Block/Strategy.vue b/src/components/Block/Strategy.vue
@@ -1,5 +1,7 @@
 <script setup>
-import { n } from '@/helpers/utils';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatCompactNumber } = useIntl();
 
 defineProps(['strategy']);
 </script>
@@ -16,6 +18,6 @@ defineProps(['strategy']);
       <Icon name="github" class="mr-1" />
       {{ strategy.author }}
     </div>
-    <div>{{ $tc('inSpaces', [n(strategy.spaces)]) }}</div>
+    <div>{{ $tc('inSpaces', [formatCompactNumber(strategy.spaces)]) }}</div>
   </Block>
 </template>
diff --git a/src/components/Block/Validation.vue b/src/components/Block/Validation.vue
@@ -1,5 +1,7 @@
 <script setup>
-import { n } from '@/helpers/utils';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatCompactNumber } = useIntl();
 
 defineProps(['validation']);
 </script>
@@ -10,7 +12,7 @@ defineProps(['validation']);
       <h3 v-text="validation.name" />
     </div>
     <div class="text-color">
-      {{ $tc('inSpaces', [n(validation.spaces)]) }}
+      {{ $tc('inSpaces', [formatCompactNumber(validation.spaces)]) }}
     </div>
   </Block>
 </template>
diff --git a/src/components/Block/Votes.vue b/src/components/Block/Votes.vue
@@ -1,10 +1,11 @@
 <script setup>
 import { ref, computed, watch, toRefs } from 'vue';
-import { shorten, getChoiceString, n } from '@/helpers/utils';
+import { shorten, getChoiceString } from '@/helpers/utils';
 import { useProfiles } from '@/composables/useProfiles';
 import { useWeb3 } from '@/composables/useWeb3';
 import { clone } from '@snapshot-labs/snapshot.js/src/utils';
 import uniqBy from 'lodash/uniqBy';
+import { useIntl } from '@/composables/useIntl';
 
 const props = defineProps({
   space: Object,
@@ -20,6 +21,7 @@ defineEmits(['loadVotes']);
 
 const format = getChoiceString;
 
+const { formatCompactNumber } = useIntl();
 const { votes } = toRefs(props);
 const { web3Account } = useWeb3();
 
@@ -116,11 +118,19 @@ watch(visibleVotes, () => {
         <span
           v-tippy="{
             content: vote.scores
-              ?.map((score, index) => `${n(score)} ${titles[index]}`)
+              ?.map(
+                (score, index) =>
+                  `${formatCompactNumber(score)} ${titles[index]}`
+              )
               .join(' + ')
           }"
         >
-          {{ `${n(vote.balance)} ${shorten(space.symbol, 'symbol')}` }}
+          {{
+            `${formatCompactNumber(vote.balance)} ${shorten(
+              space.symbol,
+              'symbol'
+            )}`
+          }}
         </span>
         <a
           @click="openReceiptModal(vote)"

diff --git a/src/components/Modal/Confirm.vue b/src/components/Modal/Confirm.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { computed, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { shorten, getChoiceString, explorerUrl, n } from '@/helpers/utils';
+import { shorten, getChoiceString, explorerUrl } from '@/helpers/utils';
 import { useClient } from '@/composables/useClient';
+import { useIntl } from '@/composables/useIntl';
 
 const props = defineProps({
   open: Boolean,
@@ -21,6 +22,7 @@ const { t } = useI18n();
 const notify = inject('notify');
 const { send, clientLoading } = useClient();
 const format = getChoiceString;
+const { formatNumber, formatCompactNumber } = useIntl();
 
 const symbols = computed(() =>
   props.strategies.map(strategy => strategy.params.symbol)
@@ -70,7 +72,7 @@ async function handleSubmit() {
             target="_blank"
             class="float-right"
           >
-            {{ n(proposal.snapshot, '0,0') }}
+            {{ formatNumber(proposal.snapshot) }}
             <Icon name="external-link" class="ml-1" />
           </a>
         </div>
@@ -79,11 +81,14 @@ async function handleSubmit() {
           <span
             v-tippy="{
               content: scores
-                .map((score, index) => `${n(score)} ${symbols[index]}`)
+                .map(
+                  (score, index) =>
+                    `${formatCompactNumber(score)} ${symbols[index]}`
+                )
                 .join(' + ')
             }"
           >
-            {{ n(totalScore) }}
+            {{ formatCompactNumber(totalScore) }}
             {{ shorten(space.symbol, 'symbol') }}
           </span>
           <a

diff --git a/src/components/Plugin/CommentBox/CommentBlock.vue b/src/components/Plugin/CommentBox/CommentBlock.vue
@@ -1,12 +1,14 @@
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue';
-import { ms } from '@/helpers/utils';
 import { useNotifications } from '@/composables/useNotifications';
 import { useModal } from '@/composables/useModal';
 import { useWeb3 } from '@/composables/useWeb3';
 import { signMessage } from '@snapshot-labs/snapshot.js/src/utils/web3';
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
 import { useI18n } from 'vue-i18n';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatRelativeTime } = useIntl();
 const { t } = useI18n();
 const auth = getInstance();
 const { modalOpen, modalAccountOpen } = useModal();
@@ -243,7 +245,7 @@ function deleteItemReply(key) {
         /><span
           v-text="$d(item.timestamp, 'short', 'en-US')"
           v-tippy="{
-            content: ms(item.timestamp / 1e3)
+            content: formatRelativeTime(item.timestamp / 1e3)
           }"
           class="ml-1"
         />

diff --git a/src/components/Plugin/CommentBox/ReplyBlock.vue b/src/components/Plugin/CommentBox/ReplyBlock.vue
@@ -1,12 +1,14 @@
 <script setup>
 import { watch, computed, ref } from 'vue';
-import { ms } from '@/helpers/utils';
 import { useNotifications } from '@/composables/useNotifications';
 import { useModal } from '@/composables/useModal';
 import { useWeb3 } from '@/composables/useWeb3';
 import { signMessage } from '@snapshot-labs/snapshot.js/src/utils/web3';
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
 import { useI18n } from 'vue-i18n';
+import { useIntl } from '@/composables/useIntl';
+
+const { formatRelativeTime } = useIntl();
 const { t } = useI18n();
 const auth = getInstance();
 const { modalOpen, modalAccountOpen } = useModal();
@@ -166,7 +168,7 @@ const isCreator = computed(() => props.proposal.author === web3Account.value);
         <span
           v-text="$d(item.timestamp, 'short', 'en-US')"
           v-tippy="{
-            content: ms(item.timestamp / 1e3)
+            content: formatRelativeTime(item.timestamp / 1e3)
           }"
           class="ml-1"
         />