From be27dfa0cc17a0b0ffd4eac51d84313660ea3031 Mon Sep 17 00:00:00 2001
From: Bartosz <bartosz@peronczyk.com>
Date: Mon, 4 Nov 2024 14:43:07 +0100
Subject: [PATCH] feat: connect modal layout update

---
 src/constants/common.ts            |  18 ++++
 src/icons/dapp.svg                 |   3 +
 src/popup/App.vue                  |  10 +-
 src/popup/components/Card.vue      |  44 +++++----
 src/popup/components/InfoBox.vue   |   4 +-
 src/popup/locales/en.json          |   6 +-
 src/popup/pages/AppsBrowser.vue    |  20 +---
 src/popup/pages/Popups/Connect.vue | 154 +++++++++++++++++++----------
 8 files changed, 168 insertions(+), 91 deletions(-)
 create mode 100644 src/icons/dapp.svg

diff --git a/src/constants/common.ts b/src/constants/common.ts
index 964ceaa56..c65027a14 100644
--- a/src/constants/common.ts
+++ b/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;
diff --git a/src/icons/dapp.svg b/src/icons/dapp.svg
new file mode 100644
index 000000000..fef2ef6fc
--- /dev/null
+++ b/src/icons/dapp.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 20.1135C1.151 22.1801 2.62476 23.25 5.10591 23.25H18.7821C21.7244 23.25 23.25 21.7455 23.25 18.8584V5.15512C23.25 2.25452 21.7244 0.75 18.7821 0.75H5.10591C2.62476 0.75 1.151 1.81988 0.75 3.89463V20.1135ZM12.0938 17.2184C12.1483 17.503 12.3527 17.7063 12.6523 17.7063C12.9248 17.7063 13.1291 17.503 13.1836 17.2319C13.9328 13.0979 14.3414 12.3389 18.6459 11.7696C18.9455 11.7425 19.1499 11.512 19.1499 11.2274C19.1499 10.9563 18.9455 10.7395 18.6459 10.6852C14.3823 10.116 13.8238 9.34337 13.1836 5.25C13.1427 4.96536 12.9248 4.76205 12.6523 4.76205C12.3663 4.76205 12.1619 4.95181 12.0938 5.23645C11.3583 9.39759 10.936 10.116 6.64516 10.6852C6.34549 10.7395 6.14116 10.9563 6.14116 11.2274C6.14116 11.512 6.34549 11.7289 6.64516 11.7696C10.9224 12.2575 11.4672 13.0843 12.0938 17.2184ZM6.56343 19.6446C6.63154 19.8614 6.76776 20.0105 6.98571 20.0105C7.19003 20.0105 7.33987 19.875 7.39436 19.6717C7.41412 19.5617 7.4325 19.4574 7.44994 19.3585C7.7572 17.6155 7.77319 17.5247 9.88713 17.1913C10.0915 17.1506 10.2413 16.988 10.2413 16.7982C10.2413 16.5949 10.0915 16.4322 9.88713 16.3916C7.77341 16.0581 7.7572 15.9674 7.45004 14.2479C7.43257 14.15 7.41415 14.047 7.39436 13.9383C7.33987 13.7214 7.20365 13.5587 6.98571 13.5587C6.78138 13.5587 6.63154 13.7078 6.56343 13.9383C6.53698 14.0774 6.51308 14.2072 6.49076 14.3285C6.19128 15.9552 6.17596 16.0384 4.08429 16.3916C3.87996 16.4322 3.74374 16.5949 3.74374 16.7982C3.74374 17.0151 3.87996 17.1506 4.12515 17.1913C6.17462 17.506 6.19142 17.5985 6.48895 19.2389C6.51178 19.3647 6.53626 19.4997 6.56343 19.6446Z" fill="white"/>
+</svg>
diff --git a/src/popup/App.vue b/src/popup/App.vue
index 953dcca3c..36299b6a9 100644
--- a/src/popup/App.vue
+++ b/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();
diff --git a/src/popup/components/Card.vue b/src/popup/components/Card.vue
index 7e6ee3b01..198349882 100644
--- a/src/popup/components/Card.vue
+++ b/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;
     }
   }
 
diff --git a/src/popup/components/InfoBox.vue b/src/popup/components/InfoBox.vue
index d1aa5a6df..34138f348 100644
--- a/src/popup/components/InfoBox.vue
+++ b/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,
     },
diff --git a/src/popup/locales/en.json b/src/popup/locales/en.json
index 657ee8ce9..2b9a54986 100644
--- a/src/popup/locales/en.json
+++ b/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",
diff --git a/src/popup/pages/AppsBrowser.vue b/src/popup/pages/AppsBrowser.vue
index ff4d07423..ef5ec764e 100644
--- a/src/popup/pages/AppsBrowser.vue
+++ b/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;
diff --git a/src/popup/pages/Popups/Connect.vue b/src/popup/pages/Popups/Connect.vue
index 13d5fe63e..95700c072 100644
--- a/src/popup/pages/Popups/Connect.vue
+++ b/src/popup/pages/Popups/Connect.vue
@@ -5,37 +5,52 @@
     class="connect"
     data-cy="popup-aex2"
   >
-    <TransactionInfo
-      :custom-labels="[$t('pages.connectConfirm.title')]"
-      :sender="sender"
-      :recipient="activeAccount"
-    />
-
-    <div
-      class="subtitle"
-      data-cy="aepp"
-    >
-      <span class="app-name">{{ sender.name }}</span>
-      ({{ sender.address }}) {{ $t('pages.connectConfirm.websiteRequestConnect') }}
-    </div>
-
-    <div class="permissions">
-      <template v-if="access.includes(POPUP_CONNECT_ADDRESS_PERMISSION)">
-        <span class="title">
-          <CheckMark class="icon" /> {{ $t('common.address') }}
-        </span>
-        <span class="description">
-          {{ $t('pages.connectConfirm.addressRequest') }}
-        </span>
-      </template>
-      <template v-if="access.includes(POPUP_CONNECT_TRANSACTIONS_PERMISSION)">
-        <span class="title">
-          <CheckMark class="icon" /> {{ $t('pages.connectConfirm.transactionLabel') }}
-        </span>
-        <span class="description">
-          {{ $t('pages.connectConfirm.transactionRequest') }}
-        </span>
-      </template>
+    <p class="text-heading-4 text-center">Connect with SuperheroWallet</p>
+
+    <div class="connect-content">
+      <p class="text-center">Following dApp:</p>
+
+      <Card
+        v-if="sender"
+        data-cy="aepp"
+        :text="sender.name || $t('pages.connectConfirm.unknownSource')"
+        :description="sender.url || $t('pages.connectConfirm.unknownUrl')"
+        dense
+      >
+        <template #icon>
+          <Avatar size="lg" variant="grey">
+            <img v-if="appIcon" :src="appIcon" class="dapp-logo" alt="DAPP logo" />
+            <DappIcon v-else class="dapp-icon" />
+          </Avatar>
+        </template>
+      </Card>
+
+      <InfoBox v-if="isUnknown" type="warning">
+        Kindly ensure that you are aware of the request origin.
+        Providing permission might cause undesired results, including loss of your funds.
+      </InfoBox>
+
+      <p class="text-description text-center">{{ $t('pages.connectConfirm.websiteRequestConnect') }}:</p>
+
+      <Card dense>
+        <AccountInfo
+          v-if="activeAccount"
+          :account="activeAccount"
+        />
+        <p v-else class="text-center">...</p>
+      </Card>
+
+      <p class="text-description text-center">and get access to:</p>
+
+      <div class="permissions">
+        <div v-for="(accessName, index) in access" :key="index">
+          <div class="label">
+            <CheckMark class="icon" />
+            {{ accessLabels[accessName]?.label || 'Unknown' }}
+          </div>
+          <div class="description" v-text="accessLabels[accessName]?.description" />
+        </div>
+      </div>
     </div>
 
     <template #footer>
@@ -61,9 +76,12 @@ import {
   defineComponent,
   onMounted,
   onUnmounted,
+  PropType,
 } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { RejectedByUserError } from '@/lib/errors';
 import {
+  DAPPS_LIST,
   PERMISSION_DEFAULTS,
   POPUP_CONNECT_ADDRESS_PERMISSION,
   POPUP_CONNECT_TRANSACTIONS_PERMISSION,
@@ -72,21 +90,30 @@ import {
 import { useAccounts, usePopupProps } from '@/composables';
 import { usePermissions } from '@/composables/permissions';
 
+import AccountInfo from '@/popup/components/AccountInfo.vue';
+import Card from '@/popup/components/Card.vue';
+import Avatar from '@/popup/components/Avatar.vue';
+import InfoBox from '@/popup/components/InfoBox.vue';
 import Modal from '../../components/Modal.vue';
 import BtnMain from '../../components/buttons/BtnMain.vue';
-import TransactionInfo from '../../components/TransactionInfo.vue';
+
 import CheckMark from '../../../icons/check-mark.svg?vue-component';
+import DappIcon from '../../../icons/dapp.svg?vue-component';
 
 export default defineComponent({
   components: {
+    AccountInfo,
+    Card,
+    Avatar,
     Modal,
     BtnMain,
-    TransactionInfo,
+    InfoBox,
     CheckMark,
+    DappIcon,
   },
   props: {
     access: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => ([
         POPUP_CONNECT_ADDRESS_PERMISSION,
         POPUP_CONNECT_TRANSACTIONS_PERMISSION,
@@ -94,11 +121,13 @@ export default defineComponent({
     },
   },
   setup() {
+    const { t } = useI18n();
+
     const { getLastActiveProtocolAccount } = useAccounts();
     const { popupProps, sender, setPopupProps } = usePopupProps();
     const { permissions, addPermission } = usePermissions();
 
-    const activeAccount = getLastActiveProtocolAccount(PROTOCOLS.aeternity);
+    const activeAccount = computed(() => getLastActiveProtocolAccount(PROTOCOLS.aeternity));
 
     const permission = computed(() => {
       const host = popupProps.value?.app?.host;
@@ -106,6 +135,26 @@ export default defineComponent({
     });
 
     const appName = computed(() => permission.value?.name || popupProps.value?.app?.name);
+    const appIcon = computed(() => {
+      const knownDapp = DAPPS_LIST.find(({ url }) => popupProps.value?.app?.url === url);
+      if (knownDapp) {
+        // eslint-disable-next-line global-require, import/no-dynamic-require
+        return require(`@/icons/dapp/${knownDapp.image}`);
+      }
+      return null;
+    });
+    const isUnknown = computed(() => !popupProps.value?.app?.url && !popupProps.value?.app?.name);
+
+    const accessLabels: Record<string, any> = {
+      [POPUP_CONNECT_ADDRESS_PERMISSION]: {
+        label: t('common.address'),
+        description: t('pages.connectConfirm.addressRequest'),
+      },
+      [POPUP_CONNECT_TRANSACTIONS_PERMISSION]: {
+        label: t('pages.connectConfirm.transactionLabel'),
+        description: t('pages.connectConfirm.transactionRequest'),
+      },
+    };
 
     function confirm() {
       addPermission({
@@ -131,8 +180,12 @@ export default defineComponent({
     return {
       POPUP_CONNECT_ADDRESS_PERMISSION,
       POPUP_CONNECT_TRANSACTIONS_PERMISSION,
+      popupProps,
       activeAccount,
+      appIcon,
       sender,
+      accessLabels,
+      isUnknown,
       confirm,
       cancel,
     };
@@ -145,27 +198,28 @@ export default defineComponent({
 @use '@/styles/typography';
 
 .connect {
-  .transaction-info {
-    margin-bottom: 16px;
+  .connect-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    margin-top: 6px;
+
+    > * {
+      margin: 0;
+    }
   }
 
-  .subtitle {
-    @extend %face-sans-15-medium;
-
-    margin-top: 24px;
-    margin-bottom: 16px;
-    color: $color-grey-light;
-    text-align: center;
+  .dapp-logo,
+  .dapp-icon {
+    width: 28px;
+  }
 
-    .app-name {
-      color: $color-white;
-    }
+  .dapp-icon {
+    opacity: 0.5;
   }
 
   .permissions {
-    margin: 16px 0;
-
-    .title {
+    .label {
       @extend %face-sans-15-medium;
 
       display: flex;