[PROD] Deploy to prod

.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'

.gitignore

@@ -17,8 +17,7 @@ logs
 .fleet
 .idea
 /public/assets/*
-# tailwind config is used just for vs code extension intelisense
-tailwind.config.js
+types/contracts
 
 # Local env files
 .env

app.vue

@@ -1,64 +1,39 @@
 <script setup lang="ts">
 import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
+import { isAddress } from 'web3-utils'
 
-import { fetchProfile } from '@/utils/fetchProfile'
-import { PROVIDERS, STORAGE_KEY } from '@/types/enums'
 import { assertString } from '@/utils/validators'
 
 if (typeof window !== 'undefined') {
-  // @ts-ignore
   import('@lukso/web-components')
 }
 
 const web3Store = useWeb3Store()
-const appStore = useAppStore()
-const { providerEvents, disconnect } = useBrowserExtension()
-const {
-  setProfile: setConnectedProfile,
-  setStatus,
-  profile: connectedProfile,
-} = useConnectedProfileStore()
+const { getNetwork } = useAppStore()
+const { isLoadedApp, selectedChainId, modal } = storeToRefs(useAppStore())
+const { addProviderEvents, removeProviderEvents, disconnect } =
+  useBrowserExtension()
 const router = useRouter()
 
 const setupTranslations = () => {
   useIntl().setupIntl(defaultConfig)
 }
 
-const setupWeb3Instances = () => {
+const setupWeb3Instances = async () => {
   const provider = INJECTED_PROVIDER
 
   if (provider) {
     // for chain interactions through wallet
     web3Store.addWeb3(PROVIDERS.INJECTED, provider)
-    providerEvents(provider)
+    await addProviderEvents(provider)
+    // expose web3 instance to global scope for console access
+    window.web3 = web3Store.getWeb3(PROVIDERS.INJECTED)
   } else {
     console.error('No browser extension provider found')
   }
 
   // for chain interactions through RPC endpoint
-  web3Store.addWeb3(
-    PROVIDERS.RPC,
-    appStore.getNetwork(appStore.selectedNetwork).rpcHttp
-  )
-}
-
-const setupConnectedProfile = async () => {
-  try {
-    const connectedAddress = getItem(STORAGE_KEY.CONNECTED_ADDRESS)
-
-    if (connectedAddress) {
-      assertAddress(connectedAddress, 'profile')
-      setStatus('isConnected', true)
-      setStatus('isProfileLoading', true)
-      const profile = await fetchProfile(connectedAddress)
-      connectedProfile.address = connectedAddress
-      setConnectedProfile(profile)
-    }
-  } catch (error) {
-    console.error(error)
-  } finally {
-    setStatus('isProfileLoading', false)
-  }
+  web3Store.addWeb3(PROVIDERS.RPC, getNetwork(selectedChainId.value).rpcHttp)
 }
 
 const routerBackProfileLoad = async () => {
@@ -71,20 +46,17 @@ const routerBackProfileLoad = async () => {
       const fromProfileAddress = from.params?.profileAddress
       const toProfileAddress = to.params?.profileAddress
 
-      if (!fromProfileAddress || !toProfileAddress) {
-        return next()
-      }
-
-      try {
-        assertString(toProfileAddress)
-        assertAddress(toProfileAddress, 'profile')
-
-        if (toProfileAddress !== fromProfileAddress) {
-          await setupViewedProfile(toProfileAddress)
-          await setupViewedAssets(toProfileAddress)
+      if (toProfileAddress) {
+        try {
+          assertString(toProfileAddress)
+          assertAddress(toProfileAddress, 'profile')
+          if (toProfileAddress !== fromProfileAddress) {
+            await fetchProfile(toProfileAddress)
+            await fetchAssets(toProfileAddress)
+          }
+        } catch (error) {
+          console.error(error)
         }
-      } catch (error) {
-        console.error(error)
       }
       next()
     }
@@ -109,12 +81,61 @@ const checkConnectionExpiry = () => {
   setInterval(expiryCheck, CONNECTION_EXPIRY_CHECK_INTERVAL_MS)
 }
 
+const setupCurrencies = async () => {
+  const { currencyList } = storeToRefs(useCurrencyStore())
+  const { fetchCurrencies } = useCurrency()
+
+  currencyList.value = await fetchCurrencies()
+}
+
+const setupViewedProfile = async () => {
+  try {
+    const profileAddress = useRouter().currentRoute.value.params?.profileAddress
+
+    if (profileAddress) {
+      if (isAddress(profileAddress)) {
+        await fetchProfile(profileAddress)
+        await fetchAssets(profileAddress)
+      } else {
+        navigateTo(notFoundRoute())
+      }
+    }
+  } catch (error: unknown) {
+    console.error(error)
+
+    if (error instanceof EoAError) {
+      navigateTo(notFoundRoute()) // TODO we might want to inform user about EoA instead showing 404
+    }
+  }
+}
+
 onMounted(async () => {
   setupTranslations()
-  setupWeb3Instances()
+  await setupWeb3Instances()
   checkConnectionExpiry()
-  await setupConnectedProfile()
   await routerBackProfileLoad()
+  await setupViewedProfile()
+
+  isLoadedApp.value = true
+
+  await setupCurrencies()
+})
+
+onUnmounted(() => {
+  const provider = INJECTED_PROVIDER
+  removeProviderEvents(provider)
+})
+
+useHead({
+  bodyAttrs: {
+    class: computed(() => {
+      if (modal.value?.isOpen) {
+        return 'overflow-hidden'
+      }
+
+      return ''
+    }),
+  },
 })
 </script>
 

components/AppAvatar.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import makeBlockie from 'ethereum-blockies-base64'
+
+import { Profile } from '@/models/profile'
+
+type Props = {
+  isLoading?: boolean
+  isEoa?: boolean
+  isError?: boolean
+  profile?: Profile
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div v-if="isLoading" class="flex flex-col items-center">
+    <div
+      class="w-20 h-20 bg-neutral-100 rounded-full flex items-center justify-center mb-2"
+    >
+      <lukso-icon name="progress-indicator" size="x-large"></lukso-icon>
+    </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>
+    <lukso-username name="--" size="small" hide-prefix></lukso-username>
+  </div>
+  <div v-else-if="isEoa" class="flex flex-col items-center">
+    <lukso-profile
+      v-if="profile?.address"
+      size="large"
+      :profile-url="makeBlockie(profile.address)"
+      class="mb-2"
+    ></lukso-profile>
+    <lukso-username
+      :address="profile?.address"
+      size="small"
+      slice-by="4"
+    ></lukso-username>
+  </div>
+  <div v-else class="flex flex-col items-center">
+    <lukso-profile
+      size="large"
+      :profile-url="profile?.profileImage?.base64"
+      :profile-address="profile?.address"
+      has-identicon
+      class="mb-2"
+    ></lukso-profile>
+    <lukso-username
+      v-if="profile?.name"
+      :name="profile.name"
+      size="small"
+    ></lukso-username>
+    <lukso-username
+      v-else-if="profile?.address"
+      :address="profile.address"
+      size="small"
+      slice-by="4"
+    ></lukso-username>
+    <lukso-username v-else name="--" size="small" hide-prefix></lukso-username>
+  </div>
+</template>

components/AppButtonConnectOrInstall.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { connect, isUniversalProfileExtension } = useBrowserExtension()
-const { status } = useConnectedProfileStore()
+const { isConnecting } = storeToRefs(useAppStore())
 
 const handleConnect = async () => {
   connect()
@@ -27,7 +27,7 @@ const browserSupportExtension = extensionStore.url !== ''
     variant="landing"
     custom-class="mt-6"
     is-full-width
-    :disabled="status.isConnecting ? true : undefined"
+    :disabled="isConnecting ? true : undefined"
   >
     {{ $formatMessage('connect_or_install_button_connect') }}
   </lukso-button>