chore: Release (#111)

.env.example

@@ -1,2 +1,6 @@
+# neccessary Algolia envs for searching to work properly
+ALGOLIA_APPLICATION_ID=YOUR_ALGOLIA_APPLICATION_ID
+ALGOLIA_API_KEY=YOUR_ALGOLIA_API_KEY
+
 # dev envs not needed in production
 YATA_API_TOKEN=YOUR_YATA_API_TOKEN # yata api token for fetching translations

.eslintrc.cjs

@@ -65,6 +65,8 @@ module.exports = {
       rules: {
         'import/order': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
+        'playwright/no-networkidle': 'off',
+        'playwright/no-skipped-test': 'off',
       },
     },
     {

.github/auto_assign.yaml

@@ -0,0 +1,20 @@
+# Set to true to add reviewers to pull requests
+addReviewers: true
+
+# Set to true to add assignees to pull requests
+# It can also be set to "author"
+addAssignees: false
+
+# A list of reviewers to be added to pull requests (GitHub user name)
+reviewers:
+  - dzbo
+  - richtera
+  - Hugoo
+  - doubleppereira
+
+# A number of reviewers added to the pull request
+# Set 0 to add all the reviewers (default: 0)
+numberOfReviewers: 0
+
+skipKeywords:
+  - chore(

.github/workflows/ci.yml

@@ -13,6 +13,8 @@ on:
 env:
   CF_PROJECT_NAME: wallet-universalprofile-cloud
   CF_BASE_URL: wallet-universalprofile-cloud
+  ALGOLIA_API_KEY: '${{ secrets.ALGOLIA_API_KEY }}'
+  ALGOLIA_APPLICATION_ID: '${{ secrets.ALGOLIA_APPLICATION_ID }}'
 
 jobs:
   test:

.github/workflows/review.yaml

@@ -0,0 +1,12 @@
+name: 'Auto Assign'
+on:
+  pull_request:
+    types: [opened, ready_for_review]
+
+jobs:
+  add-reviews:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: kentaro-m/[email protected]
+        with:
+          configuration-path: '.github/auto_assign.yaml'

components/AppAvatar.vue

@@ -19,11 +19,11 @@ defineProps<Props>()
     >
       <lukso-icon name="progress-indicator" size="x-large"></lukso-icon>
     </div>
-    <div>- -</div>
+    <lukso-username name="--" size="small" hide-prefix></lukso-username>
   </div>
   <div v-else-if="isError" class="flex flex-col items-center">
     <lukso-profile size="large" class="mb-2"></lukso-profile>
-    <div>- -</div>
+    <lukso-username name="--" size="small" hide-prefix></lukso-username>
   </div>
   <div v-else-if="isEoa" class="flex flex-col items-center">
     <lukso-profile
@@ -57,6 +57,6 @@ defineProps<Props>()
       size="small"
       slice-by="4"
     ></lukso-username>
-    <div v-else>- -</div>
+    <lukso-username v-else name="--" size="small" hide-prefix></lukso-username>
   </div>
 </template>

components/AppFooter.vue

@@ -1,41 +1,54 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ProviderName } from '@lukso/web-components/dist/components/lukso-share'
+
+const providers: ProviderName[] = ['twitter', 'discord', 'github']
+</script>
 
 <template>
-  <lukso-footer>
+  <lukso-footer :providers="providers">
     <div
-      slot="top"
-      class="grid gap-6 items-center sm:gap-10 sm:grid-cols-[repeat(2,max-content)]"
+      slot="links"
+      class="grid gap-4 items-center grid-cols-1 grid-rows-2 xl:grid-cols-[repeat(3,max-content)] xl:gap-10 xl:grid-rows-1"
     >
-      <a
-        href="https://lukso.network/faq"
-        class="nav-apax-12-medium-uppercase text-purple-41 hover:underline hover:text-purple-31"
-        target="_blank"
-      >
-        {{ $formatMessage('footer_faq_text') }}
-      </a>
-      <a
-        :href="$formatMessage('footer_need_help_url')"
-        class="nav-apax-12-medium-uppercase text-purple-41 hover:underline hover:text-purple-31"
-      >
-        {{ $formatMessage('footer_need_help_text') }}
-      </a>
-    </div>
-
-    <div slot="bottom" class="gap-8 flex items-center">
-      <a
-        href="https://new-creative-economies.foundation/privacy"
-        class="paragraph-inter-12-medium hover:underline"
-        target="_blank"
-      >
-        {{ $formatMessage('footer_privacy_policy_text') }}
-      </a>
-      <a
-        href="https://lukso.network/terms"
-        class="paragraph-inter-12-medium hover:underline cursor-pointer"
-        target="_blank"
-      >
-        {{ $formatMessage('footer_terms_text') }}
-      </a>
+      <div class="flex gap-10">
+        <a
+          href="https://docs.lukso.tech/"
+          class="nav-apax-12-medium-uppercase text-purple-41 hover:underline hover:text-purple-31"
+          target="_blank"
+        >
+          {{ $formatMessage('footer_docs_text') }}
+        </a>
+        <a
+          href="https://lukso.network/faq"
+          class="nav-apax-12-medium-uppercase text-purple-41 hover:underline hover:text-purple-31"
+          target="_blank"
+        >
+          {{ $formatMessage('footer_faq_text') }}
+        </a>
+        <a
+          :href="$formatMessage('footer_need_help_url')"
+          class="nav-apax-12-medium-uppercase text-purple-41 hover:underline hover:text-purple-31"
+        >
+          {{ $formatMessage('footer_need_help_text') }}
+        </a>
+      </div>
+      <div class="hidden w-0.5 h-4 bg-purple-63 xl:block"></div>
+      <div class="flex gap-10">
+        <a
+          href="https://new-creative-economies.foundation/privacy"
+          class="nav-apax-12-medium-uppercase text-purple-41/70 hover:underline hover:text-purple-31/70"
+          target="_blank"
+        >
+          {{ $formatMessage('footer_privacy_policy_text') }}
+        </a>
+        <a
+          href="https://lukso.network/terms"
+          class="nav-apax-12-medium-uppercase text-purple-41/70 hover:underline hover:text-purple-31/70"
+          target="_blank"
+        >
+          {{ $formatMessage('footer_terms_text') }}
+        </a>
+      </div>
     </div>
   </lukso-footer>
 </template>

components/AppNavbar.vue

@@ -35,6 +35,10 @@ const handleDisconnect = async () => {
   disconnect()
 }
 
+const handleNavigationDiscovery = () => {
+  window.open(BASE_UP_CLOUD_URL, '_self')
+}
+
 const extensionStoreData = () => {
   const url = browserInfo().storeLink
   const icon = `logo-${browserInfo().id}`
@@ -56,9 +60,16 @@ const browserSupportExtension = extensionStore.url !== ''
     :is-testnet="IS_TESTNET"
     icon="wallet-outline"
     has-menu
-    @on-brand-click="handleNavigateProfile"
+    @on-brand-click="handleNavigationDiscovery"
   >
     <div class="w-full flex items-center justify-end" slot="desktop">
+      <lukso-button
+        variant="text"
+        custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
+        @click="handleNavigationDiscovery"
+      >
+        {{ $formatMessage('header_discovery') }}
+      </lukso-button>
       <lukso-button
         v-if="status.isConnected"
         variant="text"
@@ -98,6 +109,13 @@ const browserSupportExtension = extensionStore.url !== ''
     </div>
     <div slot="mobile">
       <div className="flex flex-col items-center justify-center h-screen pb-32">
+        <lukso-button
+          variant="text"
+          custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
+          @click="handleNavigationDiscovery"
+        >
+          {{ $formatMessage('header_discovery') }}
+        </lukso-button>
         <lukso-button
           v-if="status.isConnected"
           variant="text"

components/AssetImages.vue

@@ -13,13 +13,15 @@ defineProps<Props>()
     <div class="heading-inter-14-bold pb-3">
       {{ $formatMessage('token_details_images') }}
     </div>
-    <div
-      v-for="(image, index) in images"
-      :key="index"
-      class="w-14 h-14 rounded-8 bg-cover bg-position-center bg-neutral-90"
-      :style="{
-        backgroundImage: `url(${formatUrl(image[0]?.url)})`,
-      }"
-    ></div>
+    <div class="flex gap-4 flex-wrap">
+      <div
+        v-for="(image, index) in images"
+        :key="index"
+        class="w-14 h-14 rounded-8 bg-cover bg-position-center bg-neutral-90"
+        :style="{
+          backgroundImage: `url(${formatUrl(image[0]?.url)})`,
+        }"
+      ></div>
+    </div>
   </div>
 </template>

components/AssetSupply.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+type Props = {
+  supply: string
+  symbol: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="heading-inter-14-bold pb-2">
+    {{ $formatMessage('asset_supply_title') }}
+  </div>
+  <div
+    class="bg-neutral-100 border border-neutral-90 py-3 px-4 rounded-12 mb-8"
+  >
+    <div class="flex items-center justify-between paragraph-inter-14-regular">
+      {{ $formatNumber(supply, { maximumFractionDigits: 20 }) }}
+      <div
+        class="paragraph-inter-12-regular text-neutral-60 border-l border-l-neutral-90 pl-3 ml-3"
+      >
+        {{ symbol }}
+      </div>
+    </div>
+  </div>
+</template>

components/SendCardAmount.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { fromWei } from 'web3-utils'
+import BigNumber from 'bignumber.js'
+import { storeToRefs } from 'pinia'
+
+const { asset, receiverError, amount } = storeToRefs(useSendStore())
+
+const handleKeyDown = (customEvent: CustomEvent) => {
+  const numberRegex = /^[0-9]*\.?[0-9]*$/
+  const event = customEvent.detail.event
+  const input = event.target as HTMLInputElement
+  const key = event.key
+  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Tab']
+  const realValueBN = new BigNumber(`${input.value}${key}`)
+  const assetBalanceBN = new BigNumber(`${fromWei(asset.value?.amount || '0')}`)
+  const maxDecimalPlaces = 6
+
+  // check for allowed keys or if user press CMD+A
+  if (allowedKeys.includes(key) || (event.metaKey && key === 'a')) {
+    return
+  }
+
+  // allow only numbers
+  if (!numberRegex.test(key)) {
+    event.preventDefault()
+  } else {
+    // Did it like this otherwise, if a user presses Esc or any non digit key, it would reset the error message
+    receiverError.value = ''
+  }
+
+  // when value is more then balance we set to max value
+  if (realValueBN.gt(assetBalanceBN)) {
+    input.value = fromWei(asset.value?.amount?.toString() || '0')
+    event.preventDefault()
+  }
+
+  // allow only one dot in the value, but not as first character
+  if (key === '.' && (input.value.includes('.') || input.value === '')) {
+    event.preventDefault()
+  }
+
+  // check for max decimal places
+  if (input.value.toString().split('.')[1]?.length >= maxDecimalPlaces) {
+    event.preventDefault()
+  }
+}
+
+const handleKeyUp = (event: CustomEvent) => {
+  const input = event.detail.event.target
+  amount.value = input.value
+}
+
+const handleUnitClick = (event: CustomEvent) => {
+  const input = event.detail.input
+  const total = fromWei(asset.value?.amount?.toString() || '0')
+  input.value = total
+  amount.value = total
+}
+</script>
+
+<template>
+  <lukso-input
+    placeholder="0"
+    :value="amount"
+    :unit="
+      $formatMessage('profile_balance_of', {
+        balance: $formatNumber(fromWei(asset?.amount || '0', 'ether')),
+        symbol: asset?.symbol || '',
+      })
+    "
+    borderless
+    is-full-width
+    @on-key-down="handleKeyDown"
+    @on-key-up="handleKeyUp"
+    @on-unit-click="handleUnitClick"
+  ></lukso-input>
+</template>