refactor: DRY

apps/ui/src/components/Connectors.vue

@@ -1,16 +1,28 @@
 <script lang="ts" setup>
-import { Connector } from '@/networks/types';
+import { Connector, ConnectorType } from '@/networks/types';
+
+const props = defineProps<{
+  supportedConnectors?: ConnectorType[];
+}>();
 
 const emit = defineEmits<{
   (e: 'click', connector: Connector): void;
 }>();
 
 const { connectors } = useConnectors();
+
+const availableConnectors = computed(() => {
+  if (!props.supportedConnectors?.length) return connectors.value;
+
+  return connectors.value.filter(connector =>
+    props.supportedConnectors!.includes(connector.type)
+  );
+});
 </script>
 
 <template>
   <UiButton
-    v-for="connector in connectors"
+    v-for="connector in availableConnectors"
     :key="connector.id"
     class="w-full flex justify-center items-center gap-2"
     @click="emit('click', connector)"

apps/ui/src/components/Modal/Connector.vue

@@ -11,40 +11,18 @@ const emit = defineEmits<{
 }>();
 
 const { open } = toRefs(props);
-const { connectors } = useConnectors();
-
-const availableConnectors = computed(() => {
-  return connectors.value.filter(connector =>
-    props.supportedConnectors.includes(connector.type)
-  );
-});
 </script>
 
 <template>
   <UiModal :open="open" @close="emit('close')">
     <template #header>
       <h3 v-text="'Log in'" />
     </template>
-    <div>
-      <div class="m-4 space-y-2 flex flex-col">
-        <button
-          v-for="connector in availableConnectors"
-          :key="connector.id"
-          type="button"
-          @click="emit('pick', connector)"
-        >
-          <UiButton class="w-full flex justify-center items-center">
-            <img
-              :src="connector.info.icon"
-              height="28"
-              width="28"
-              class="mr-2 -mt-1"
-              :alt="connector.info.name"
-            />
-            {{ connector.info.name }}
-          </UiButton>
-        </button>
-      </div>
+    <div class="m-4 space-y-2 flex flex-col">
+      <Connectors
+        :connectors-type="supportedConnectors"
+        @click="(connector: Connector) => emit('pick', connector)"
+      />
     </div>
   </UiModal>
 </template>