From 07c4221bf98c4e0ee09199ef80a37d23905b4df5 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 27 Jan 2025 01:09:17 +0400
Subject: [PATCH] refactor: DRY

---
 apps/ui/src/components/Connectors.vue      | 16 +++++++++--
 apps/ui/src/components/Modal/Connector.vue | 32 ++++------------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/apps/ui/src/components/Connectors.vue b/apps/ui/src/components/Connectors.vue
index 525a75496..047e9d96b 100644
--- a/apps/ui/src/components/Connectors.vue
+++ b/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)"
diff --git a/apps/ui/src/components/Modal/Connector.vue b/apps/ui/src/components/Modal/Connector.vue
index 733fab723..0a4ef53bd 100644
--- a/apps/ui/src/components/Modal/Connector.vue
+++ b/apps/ui/src/components/Modal/Connector.vue
@@ -11,13 +11,6 @@ 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>
@@ -25,26 +18,11 @@ const availableConnectors = computed(() => {
     <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>