use modal for safe select

Signed-off-by: ryanwolhuter <[email protected]>

src/components/BaseModalSelectItem.vue

@@ -23,7 +23,7 @@ defineProps<{
           />
           <BasePill>{{ tag }}</BasePill>
         </div>
-        <span class="text-skin-text" v-text="description" />
+        <span class="text-skin-text break-all" v-text="description" />
       </div>
       <i-ho-check v-if="selected" class="absolute right-0 text-md" />
     </div>

src/plugins/oSnap/Create.vue

@@ -2,6 +2,7 @@
 import { ExtendedSpace, TreasuryWallet } from '@/helpers/interfaces';
 import { formatUnits } from '@ethersproject/units';
 import { cloneDeep } from 'lodash';
+import Safe from './components/Input/Safe.vue';
 import TransactionBuilder from './components/TransactionBuilder/TransactionBuilder.vue';
 import {
   BalanceResponse,
@@ -182,8 +183,8 @@ async function createSafes() {
   return safes;
 }
 
-function updateSafe(safeIndex: string) {
-  newPluginData.value.safe = cloneDeep(safes.value[safeIndex]);
+function updateSafe(safe: GnosisSafe) {
+  newPluginData.value.safe = cloneDeep(safe);
   update(newPluginData.value);
 }
 
@@ -220,7 +221,9 @@ onMounted(async () => {
         Using the oSnap plugin while the SafeSnap plugin is still installed on
         your place will cause unexpected behavior.
       </p>
-      <p class="font-bold">Please remove the SafeSnap plugin before using the oSnap plugin.</p>
+      <p class="font-bold">
+        Please remove the SafeSnap plugin before using the oSnap plugin.
+      </p>
     </div>
   </template>
   <template v-else>
@@ -234,19 +237,11 @@ onMounted(async () => {
         <h2 class="text-md">Add oSnap transactions</h2>
       </div>
       <h3 class="text-base">Pick a safe</h3>
-      <UiSelect
-        :model-value="
-          safes.findIndex(
-            safe => safe.safeAddress === newPluginData.safe?.safeAddress
-          )
-        "
-        @update:modelValue="updateSafe"
-      >
-        <template #label>Safe</template>
-        <option v-for="(safe, index) in safes" :key="index" :value="index">
-          {{ safe.safeName }}
-        </option>
-      </UiSelect>
+      <Safe
+        :safes="safes"
+        :selectedSafe="newPluginData.safe"
+        @updateSafe="updateSafe($event)"
+      />
       <div class="mt-4 border-b last:border-b-0">
         <TransactionBuilder
           v-if="!!newPluginData.safe"

src/plugins/oSnap/components/Input/Safe.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { GnosisSafe } from '../../types';
+import ModalSafe from '../TransactionBuilder/ModalSafe.vue';
+
+defineProps<{
+  safes: GnosisSafe[];
+  selectedSafe: GnosisSafe | null;
+}>();
+
+const emit = defineEmits<{
+  updateSafe: [safe: GnosisSafe];
+}>();
+
+const isModalOpen = ref(false);
+</script>
+
+<template>
+  <div class="mb-2">
+    <TuneButtonSelect
+      :model-value="
+        safes.find(safe => safe.safeAddress === selectedSafe?.safeAddress)
+          ?.safeName || 'Select Safe'
+      "
+      @select="isModalOpen = true"
+    />
+    <teleport to="#modal">
+      <ModalSafe
+        :selected="selectedSafe"
+        :open="isModalOpen"
+        :safes="safes"
+        @update-safe="emit('updateSafe', $event)"
+        @close="isModalOpen = false"
+      />
+    </teleport>
+  </div>
+</template>

src/plugins/oSnap/components/TransactionBuilder/ModalSafe.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { GnosisSafe } from '../../types';
+import networks from '@snapshot-labs/snapshot.js/src/networks.json';
+
+defineProps<{
+  open: boolean;
+  safes: GnosisSafe[]
+  selected: GnosisSafe | null;
+}>();
+
+const emit = defineEmits<{
+  updateSafe: [type: GnosisSafe];
+  close: [];
+}>();
+
+function select(type: GnosisSafe) {
+  emit('updateSafe', type);
+  emit('close');
+}
+
+function makeSafeDescription(safe: GnosisSafe) {
+  const networkDetails = networks[safe.network];
+
+  return `${safe.safeAddress} (${networkDetails?.name})`;
+}
+</script>
+
+<template>
+  <BaseModal :open="open" @close="$emit('close')">
+    <template #header>
+      <h3>Select Safe</h3>
+    </template>
+    <div class="mx-0 my-4 flex flex-col space-y-3 md:mx-4">
+      <button
+        v-for="(safe, key) in safes"
+        :key="key"
+        @click="select(safe)"
+      >
+        <BaseModalSelectItem
+          :selected="safe.safeAddress === selected?.safeAddress"
+          :title="safe.safeName"
+          :description="makeSafeDescription(safe)"
+        />
+      </button>
+    </div>
+  </BaseModal>
+</template>