Merge pull request #279 from globe-and-citizen/feature/permissioning-…

…system

Merge "feature/permissioning-system" in "feat/PS/backend"

app/package.json

@@ -37,14 +37,16 @@
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.11.10",
     "@vitejs/plugin-vue": "^5.0.3",
-    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/coverage-istanbul": "^2.0.4",
+    "@vitest/ui": "^2.0.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.4",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.17",
     "cypress": "^13.6.3",
     "daisyui": "^4.7.2",
+    "dotenv": "^16.4.5",
     "eslint": "^8.49.0",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-vue": "^9.17.0",
@@ -57,7 +59,7 @@
     "tailwindcss": "^3.4.1",
     "typescript": "~5.3.0",
     "vite": "^5.0.11",
-    "vitest": "^1.2.2",
+    "vitest": "^2.0.4",
     "vue-tsc": "^1.8.27"
   }
 }

app/src/adapters/siweMessageCreatorAdapter.ts

@@ -5,23 +5,23 @@ import { log, parseError } from '@/utils'
 export interface ISiweMessageCreator {
   create(): Promise<string>
 }
-
 // Adapter for SiweMessage class for Siwe library
 export class SLSiweMessageCreator implements ISiweMessageCreator {
-  private data: any
+  private data: Partial<SiweMessage>
 
-  constructor(data: any) {
-    // Check if origin and uri are already set in the data object
+  // Type the data
+  constructor(param: Partial<SiweMessage>) {
+    // Check if domaine and uri are already set in the data object
     // If not, set them using window.location
-    if (!data.origin) {
-      data.uri = window.location.origin
+    if (!param.uri) {
+      param.uri = window.location.origin
     }
 
-    if (!data.domain) {
-      data.domain = window.location.host
+    if (!param.domain) {
+      param.domain = window.location.host
     }
 
-    this.data = data
+    this.data = param
   }
 
   async create(): Promise<string> {
@@ -33,6 +33,7 @@ export class SLSiweMessageCreator implements ISiweMessageCreator {
 
       return message
     } catch (error) {
+      // TODO : Look at this. It's weird to catch an error the throw a new one
       log.error(parseError(error))
       throw new Error('Something went wrong. Please try agin')
     }

app/src/adapters/web3LibraryAdapter.ts

@@ -3,6 +3,7 @@ import { BrowserProvider, /*, Signer */ ethers } from 'ethers'
 import { MetaMaskUtil } from '@/utils/web3Util'
 import type { Signer } from 'ethers'
 import type { ContractFactory } from 'ethers'
+import { log } from '@/utils/generalUtil'
 
 // Define interface for web3 library
 export interface IWeb3Library {
@@ -20,38 +21,56 @@ export interface IWeb3Library {
   sendTransaction(to: string, amount: string): Promise<any>
 }
 
-const metaMaskUtil = new MetaMaskUtil()
+// TODO handle the case when the provider is not available
+let metaMaskUtil: MetaMaskUtil
 
 // Adapter for ethers.js
 export class EthersJsAdapter implements IWeb3Library {
   private static instance: IWeb3Library | undefined
-  private provider: any
+
   //private provider: ethers.providers.Web3Provider | null = null;
-  //private signer: ethers.Signer | null = null;
-  private signer: any
-  /*private _address: Ref<string | null>
+  private provider!: BrowserProvider
 
-  constructor() {
-    this._address = ref(null)
-  }*/
+  //private signer: ethers.Signer | null = null;
+  private signer: any | ethers.Signer
+  // private _address: Ref<string | null>
 
+  /**
+   * Initialize the provider and signer
+   */
   async initialize() {
-    // Initialize provider
+    log.info('Start Initializing the provider & the signer')
+
+    try {
+      metaMaskUtil = new MetaMaskUtil()
+    } catch (e) {
+      log.error('MetaMask is not installed')
+    }
+
+    // Stop the initialisation when MetaMask is not installed
+    if (!metaMaskUtil) {
+      return
+    }
     const metaProvider = metaMaskUtil.getProvider()
     this.provider = new BrowserProvider(metaProvider)
+
+    // Listen for account change
     metaProvider.on('accountsChanged', async (/*accounts: string[]*/) => {
+      log.info('Account changed')
       this.signer = await this.provider.getSigner()
     })
 
-    //this.signer = this.provider.getSigner();
+    log.info('Finish Initializing the provider & the signer')
   }
 
+  /**
+   * Connect wallet to the app
+   */
   async connectWallet(): Promise<void> {
     if (!this.provider) {
       //throw new Error('Ethers.js adapter is not initialized');
       this.initialize()
     }
-
     await metaMaskUtil.switchNetwork()
 
     await this.provider.send('eth_requestAccounts', [])

app/src/components/AccordionComponent.vue

@@ -1,7 +1,13 @@
 <template>
   <template v-for="(accordion, index) in accordions" :key="index">
     <div class="collapse collapse-arrow bg-base-200">
-      <input type="radio" :name="`accordion-${index}`" :checked="activeAccordion == index" />
+      <input
+        type="radio"
+        :data-test="`accordion-radio-${index}`"
+        :name="`accordion-${index}`"
+        :checked="activeAccordion === index"
+        @click="activeAccordion = index"
+      />
       <div class="collapse-title text-xl font-medium">{{ accordion }}</div>
       <div class="collapse-content">
         <slot :name="`accordion-${index}`"></slot>
@@ -15,6 +21,7 @@ defineProps<{
   accordions: Array<string>
 }>()
 const activeAccordion = defineModel({
-  default: 0
+  type: Number,
+  required: true
 })
 </script>

app/src/components/MemberCard.vue

@@ -1,21 +1,31 @@
 <template>
-  <div
-    class="collapse bg-base-100"
-    :class="`${member.address != ownerAddress && ownerAddress == useUserDataStore().address ? 'collapse-arrow' : ''}`"
-  >
-    <input
-      type="checkbox"
-      v-if="member.address != ownerAddress && ownerAddress == useUserDataStore().address"
-    />
+  <div class="collapse bg-base-100 collapse-arrow">
+    <input type="checkbox" />
     <div class="collapse-title text-sm font-bold flex px-4">
       <span class="w-1/2">{{ member.name }}</span>
       <span class="w-2/3">{{ member.address }}</span>
     </div>
     <div class="collapse-content">
-      <div class="flex justify-center">
+      <div class="flex justify-center gap-2">
+        <button
+          @click="openExplorer(member.address ?? '')"
+          class="btn btn-primary btn-xs"
+          data-test="show-address-button"
+        >
+          See in block explorer
+        </button>
+        <button
+          v-if="isSupported"
+          @click="copy(member.address ?? '')"
+          class="btn btn-info btn-xs"
+          data-test="copy-address-button"
+        >
+          {{ copied ? 'Copied!' : 'Copy address' }}
+        </button>
         <button
           v-if="member.address != ownerAddress && ownerAddress == useUserDataStore().address"
           class="btn btn-error btn-xs"
+          data-test="delete-member-button"
           @click="emits('deleteMember', member)"
         >
           Delete
@@ -27,6 +37,8 @@
 <script setup lang="ts">
 import { useUserDataStore } from '@/stores/user'
 import type { MemberInput } from '@/types'
+import { useClipboard } from '@vueuse/core'
+import { NETWORK } from '@/constant'
 import { ref } from 'vue'
 
 const emits = defineEmits(['deleteMember'])
@@ -36,4 +48,9 @@ const props = defineProps<{
   ownerAddress: String
 }>()
 const member = ref(props.member)
+const { copy, copied, isSupported } = useClipboard()
+
+const openExplorer = (address: string) => {
+  window.open(`${NETWORK.blockExplorerUrl}/address/${address}`, '_blank')
+}
 </script>

app/src/components/ModalComponent.vue

@@ -4,7 +4,7 @@
     class="modal modal-bottom sm:modal-middle"
     :class="{ 'modal-open': toggleOpen }"
   >
-    <div class="modal-box">
+    <div class="modal-box overflow-y-visible">
       <button class="btn btn-sm absolute right-4 top-4" @click="toggleOpen = false">✕</button>
       <slot></slot>
     </div>

app/src/components/NavBar.vue

@@ -50,7 +50,7 @@
           <div class="w-10 rounded-full flex justify-center">
             <img
               alt="Tailwind CSS Navbar component"
-              src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+              src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
             />
           </div>
         </div>
@@ -78,12 +78,14 @@
 </template>
 
 <script setup lang="ts">
-import { logout } from '@/utils/navBarUtil'
 import { NETWORK } from '@/constant/index'
+import { useAuth } from '@/composables/useAuth'
+import { Bars3Icon } from '@heroicons/vue/24/solid'
 import NotificationDropdown from '@/components/NotificationDropdown.vue'
+
 const emits = defineEmits(['toggleSideButton', 'toggleEditUserModal', 'withdraw'])
+const { logout } = useAuth()
 
-import { Bars3Icon } from '@heroicons/vue/24/solid'
 defineProps<{
   withdrawLoading: boolean
   balanceLoading: boolean

app/src/components/TeamAccount.vue

@@ -2,12 +2,27 @@
   <div class="stats bg-green-100 flex text-primary-content border-outline">
     <div class="stat flex flex-col justify-center items-center">
       <div class="stat-title">Team balance</div>
-      <span v-if="team.bankAddress">
-        <span
-          class="badge badge-sm"
-          :class="`${team.ownerAddress == useUserDataStore().address ? 'badge-primary' : 'badge-secondary'}`"
-          >{{ team.bankAddress }}</span
+      <span v-if="team.bankAddress" class="flex gap-2 items-center">
+        <ToolTip data-test="bank-address-tooltip" content="Click to see address in block explorer">
+          <span
+            class="badge badge-sm cursor-pointer"
+            data-test="team-bank-address"
+            @click="openExplorer(team.bankAddress)"
+            :class="`${team.ownerAddress == useUserDataStore().address ? 'badge-primary' : 'badge-secondary'}`"
+            >{{ team.bankAddress }}</span
+          >
+        </ToolTip>
+        <ToolTip
+          data-test="copy-address-tooltip"
+          :content="copied ? 'Copied!' : 'Click to copy address'"
         >
+          <ClipboardDocumentListIcon
+            v-if="isSupported && !copied"
+            class="size-5 cursor-pointer"
+            @click="copy(team.bankAddress)"
+          />
+          <ClipboardDocumentCheckIcon v-if="copied" class="size-5" />
+        </ToolTip>
       </span>
       <span
         class="loading loading-dots loading-xs"
@@ -61,7 +76,11 @@ import { NETWORK } from '@/constant'
 import { ref } from 'vue'
 import LoadingButton from '@/components/LoadingButton.vue'
 import { useUserDataStore } from '@/stores/user'
+import { ClipboardDocumentListIcon, ClipboardDocumentCheckIcon } from '@heroicons/vue/24/outline'
+import { useClipboard } from '@vueuse/core'
+import ToolTip from '@/components/ToolTip.vue'
 const tipAmount = ref(0)
+const { copy, copied, isSupported } = useClipboard()
 
 defineProps<{
   team: Partial<Team>
@@ -71,4 +90,8 @@ defineProps<{
   balanceLoading: boolean
 }>()
 const emits = defineEmits(['pushTip', 'sendTip', 'deposit', 'transfer'])
+
+const openExplorer = (address: string) => {
+  window.open(`${NETWORK.blockExplorerUrl}/address/${address}`, '_blank')
+}
 </script>

app/src/components/TheDrawer.vue

@@ -10,7 +10,7 @@
         <div class="rounded-full">
           <img
             alt="Tailwind CSS Navbar component"
-            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
             class="w-[44px]"
           />
         </div>

app/src/components/ToolTip.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="tooltip" :data-tip="content">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  content: string
+}>()
+</script>