feat: connect modal layout update

src/constants/common.ts

@@ -466,6 +466,24 @@ export const BROWSER_ACTIONS = {
   favourite: 'favourite',
 } as const;
 
+export const DAPPS_LIST = [
+  {
+    title: 'Aeternity Governance',
+    url: 'https://governance.aeternity.com/',
+    image: 'Governance.webp',
+  },
+  {
+    title: 'Graffiti Aepp',
+    url: 'https://graffiti.aeternity.com',
+    image: 'graffiti.svg',
+  },
+  {
+    title: 'Superhero DEX',
+    url: 'https://aepp.dex.superhero.com/swap',
+    image: 'SuperheroDEX.svg',
+  },
+];
+
 export const PAGE_TRANSITION_DURATION = 150;
 
 export const MAX_BROWSER_HISTORY_ITEMS = 10;

src/popup/App.vue

@@ -87,6 +87,7 @@ import {
   IS_FIREFOX,
   RUNNING_IN_POPUP,
   RUNNING_IN_TESTS,
+  MODAL_CONFIRM_CONNECT,
 } from '@/constants';
 import { watchUntilTruthy } from '@/utils';
 import { ROUTE_ACCOUNT } from '@/popup/router/routeNames';
@@ -135,7 +136,7 @@ export default defineComponent({
       isLoaderVisible,
       initVisibilityListeners,
     } = useUi();
-    const { modalsOpen } = useModals();
+    const { modalsOpen, openModal } = useModals();
     const { isLoggedIn } = useAccounts();
     const { addWalletNotification } = useNotifications();
     const { loadCoinsData } = useCurrencies({ pollingDisabled: true });
@@ -285,6 +286,13 @@ export default defineComponent({
         loadCoinsData();
       }
 
+      // TODO remove
+      setTimeout(() => {
+        openModal(MODAL_CONFIRM_CONNECT, {
+          app: { host: 'http://test.com', url: 'https://aepp.dex.superhero.com/swap', name: 'Test app' },
+        });
+      }, 100);
+
       watchUntilTruthy(isLoggedIn).then(() => {
         setTimeout(() => {
           verifyBackedUpSeed();

src/popup/components/Card.vue

@@ -9,20 +9,27 @@
       }"
       :style="styleComponent"
     >
-      <IconWrapper
-        v-if="icon"
-        :icon="icon"
-        class="card-icon"
-        is-boxed
-      />
+      <slot name="icon">
+        <IconWrapper
+          v-if="icon"
+          :icon="icon"
+          class="card-icon"
+          is-boxed
+        />
+      </slot>
 
       <div>
-        <div class="text">
-          {{ text }}
-        </div>
-        <div class="description">
-          {{ description }}
-        </div>
+        <div
+          v-if="text"
+          class="text"
+          v-text="text"
+        />
+        <div
+          v-if="description"
+          class="description"
+          v-text="description"
+        />
+
         <slot />
       </div>
 
@@ -54,8 +61,8 @@ export default defineComponent({
     IconWrapper,
   },
   props: {
-    text: { type: String, required: true },
-    description: { type: String, required: true },
+    text: { type: String, default: null },
+    description: { type: String, default: null },
     background: { type: String, default: null },
     cardId: { type: String as PropType<string | null>, default: null },
     icon: { type: Object, default: null },
@@ -96,9 +103,9 @@ export default defineComponent({
   z-index: 1;
   position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   width: 100%;
-  min-height: 116px;
+  // min-height: 116px;
   border-radius: $border-radius-interactive;
   padding: 20px 16px;
   gap: 16px;
@@ -141,8 +148,11 @@ export default defineComponent({
   }
 
   &.dense {
+    padding: 10px;
+    gap: 8px;
+
     .description {
-      margin-top: 0;
+      margin-top: 1px;
     }
   }
 

src/popup/components/InfoBox.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 export const INFO_BOX_TYPES = {
   default: 'default',
@@ -21,7 +21,7 @@ export type InfoBoxType = keyof typeof INFO_BOX_TYPES;
 export default defineComponent({
   props: {
     type: {
-      type: String,
+      type: String as PropType<InfoBoxType>,
       validator: (value: InfoBoxType) => Object.keys(INFO_BOX_TYPES).includes(value),
       default: INFO_BOX_TYPES.default,
     },

src/popup/locales/en.json

@@ -798,13 +798,15 @@
     },
     "connectConfirm": {
       "title": "Allow access",
-      "websiteRequestConnect": "would like to connect to your account.",
+      "websiteRequestConnect": "would like to connect to your account",
       "websiteRequest": "This website is requesting access to view your current account address. Always make sure you trust the website you interact with. ",
       "cancelButton": "Deny",
       "confirmButton": "Accept",
       "transactionLabel": "Transaction",
       "addressRequest": "This aepp is requesting access to view your current account address.",
-      "transactionRequest": "This aepp may prepare a transaction, you are in charge of confirming it."
+      "transactionRequest": "This aepp may prepare a transaction, you are in charge of confirming it.",
+      "unknownSource": "Unknown source",
+      "unknownUrl": "Unknown URL"
     },
     "fungible-tokens": {
       "tokens": "Tokens | Token | Tokens",

src/popup/pages/AppsBrowser.vue

@@ -93,7 +93,7 @@ import {
   computed,
 } from 'vue';
 import { Field } from 'vee-validate';
-import { MODAL_WARNING_DAPP_BROWSER, IS_SAFARI } from '@/constants';
+import { MODAL_WARNING_DAPP_BROWSER, IS_SAFARI, DAPPS_LIST } from '@/constants';
 import {
   getLocalStorageItem,
   setLocalStorageItem,
@@ -113,24 +113,6 @@ import BtnIcon from '@/popup/components/buttons/BtnIcon.vue';
 import CloseIcon from '@/icons/circle-close.svg?vue-component';
 import GlobeSmallIcon from '@/icons/globe-small.svg?vue-component';
 
-const DAPPS_LIST = [
-  {
-    title: 'Aeternity Governance',
-    url: 'https://governance.aeternity.com/',
-    image: 'Governance.webp',
-  },
-  {
-    title: 'Graffiti Aepp',
-    url: 'https://graffiti.aeternity.com',
-    image: 'graffiti.svg',
-  },
-  {
-    title: 'Superhero DEX',
-    url: 'https://aepp.dex.superhero.com/swap',
-    image: 'SuperheroDEX.svg',
-  },
-];
-
 interface App {
   title?: string;
   url: string;