feat: connect modal layout update

src/background/bgPopupHandler.ts

@@ -30,16 +30,17 @@ const popups: Dictionary<IPopupConfigNoActions> = {};
 
 const storageSession = (browser.storage as any)?.session;
 
-export const getAeppUrl = (v: any) => new URL(v.connection.port.sender.url);
-
 export const openPopup = async (
   popupType: PopupType,
-  aepp: string | object,
+  aepp: string | Record<string, any>, // TODO establish correct type for the object
   popupProps: Partial<IPopupProps> = {},
 ) => {
   const id = uuid();
-  const { href, protocol, host } = (typeof aepp === 'object') ? getAeppUrl(aepp) : new URL(aepp);
-  const { name = host } = (typeof aepp === 'object') ? aepp : {} as any;
+  const url = (typeof aepp === 'object') ? aepp.connection.port.sender.url : aepp;
+  const { href, protocol, host } = new URL(url);
+
+  // TODO fix the name resolving issue happening in `onSubscription` of aeSdk
+  const name = (typeof aepp === 'object') ? aepp.name : undefined;
 
   const tabs = await browser.tabs.query({ active: true });
 

src/background/index.ts

@@ -34,7 +34,11 @@ import { updateDynamicRules } from './redirectRule';
 /**
  * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#sending_an_asynchronous_response_using_sendresponse
  */
-function handleMessage(msg: IBackgroundMessageData, _: any, sendResponse: Function) {
+const handleMessage: browser.runtime.onMessageBool = (
+  msg: IBackgroundMessageData,
+  sender: browser.runtime.MessageSender,
+  sendResponse: Function,
+) => {
   if (msg.target === 'background') {
     const {
       aepp,
@@ -73,7 +77,7 @@ function handleMessage(msg: IBackgroundMessageData, _: any, sendResponse: Functi
     target: 'offscreen',
   });
   return true;
-}
+};
 
 browser.runtime.onMessage.addListener(handleMessage);
 browser.runtime.onInstalled.addListener(updateDynamicRules);

src/constants/common.ts

@@ -373,8 +373,11 @@ export const POPUP_TYPES = [
   POPUP_TYPE_UNSAFE_SIGN,
 ] as const;
 
-export const POPUP_CONNECT_ADDRESS_PERMISSION = 'address';
-export const POPUP_CONNECT_TRANSACTIONS_PERMISSION = 'transactions';
+export const CONNECT_PERMISSIONS = {
+  address: 'address',
+  addressList: 'addressList',
+  transactions: 'transactions',
+} as const;
 
 export const POPUP_ACTIONS = {
   getProps: 'getProps',
@@ -467,6 +470,56 @@ export const BROWSER_ACTIONS = {
   favourite: 'favourite',
 } as const;
 
+/**
+ * List of dapps that we are sure that we support.
+ */
+export const TRUSTED_DAPPS: {
+  name: string;
+  url: string;
+  image: string;
+  /** Display the dapp link in the app browser featured section */
+  isFeatured?: boolean;
+}[] = [
+  {
+    name: 'Aeternity Governance',
+    url: 'https://governance.aeternity.com',
+    image: 'Governance.webp',
+    isFeatured: true,
+  },
+  {
+    name: 'Graffiti Aepp',
+    url: 'https://graffiti.aeternity.com',
+    image: 'graffiti.svg',
+    isFeatured: true,
+  },
+  {
+    name: 'Superhero Social',
+    url: 'https://superhero.com',
+    image: 'superhero-social.svg',
+  },
+  {
+    name: 'Superhero DEX',
+    url: 'https://aepp.dex.superhero.com',
+    image: 'superhero-dex.svg',
+    isFeatured: true,
+  },
+  {
+    name: 'aeScan',
+    url: 'https://aescan.io',
+    image: 'aescan.svg',
+  },
+  {
+    name: 'Tokaen.org (DEV)',
+    url: 'https://dev.tokaen.org',
+    image: 'tokaen-org.svg',
+  },
+  {
+    name: 'Tokaen.org',
+    url: 'https://tokaen.org',
+    image: 'tokaen-org.svg',
+  },
+];
+
 export const PAGE_TRANSITION_DURATION = 150;
 
 export const MAX_BROWSER_HISTORY_ITEMS = 10;

src/popup/components/AccountCardAdd.vue

@@ -39,7 +39,7 @@ import { MODAL_PROTOCOL_SELECT, MODAL_ACCOUNT_CREATE, PROTOCOLS } from '@/consta
 import { useModals } from '@/composables';
 
 import AccountCardBase, { accountCardBaseCommonProps } from '@/popup/components/AccountCardBase.vue';
-import PlusCircleIcon from '../../icons/plus-circle-fill.svg?vue-component';
+import PlusCircleIcon from '../../icons/plus-circle.svg?vue-component';
 
 export default defineComponent({
   components: {

src/popup/components/AccountImportRow.vue

@@ -2,6 +2,7 @@
   <AccountSelectOptionsItem
     :custom-account="account"
     :outside-balance="balance"
+    clickable
   />
 </template>
 

src/popup/components/AccountSelectOptionsItem.vue

@@ -1,23 +1,25 @@
 <template>
-  <BtnPlain
+  <component
+    :is="(clickable) ? 'BtnPlain' : 'div'"
     v-if="account"
     class="account-select-options-item"
     :style="bgColorStyle"
     @click.prevent="$emit('click')"
   >
     <div
       class="option-wrapper"
-      :class="{ selected }"
+      :class="{ selected, clickable }"
     >
       <AccountInfo
         :account="account"
         class="account-info"
         avatar-size="rg"
         avatar-borderless
         is-list-name
-        show-protocol-icon
+        :show-protocol-icon="!hideProtocolIcon"
       />
       <TokenAmount
+        v-if="!hideBalance"
         :amount="balance"
         :symbol="tokenSymbol"
         :protocol="account.protocol"
@@ -26,7 +28,7 @@
         small
       />
     </div>
-  </BtnPlain>
+  </component>
 </template>
 
 <script lang="ts">
@@ -66,6 +68,9 @@ export default defineComponent({
       default: 0,
     },
     selected: Boolean,
+    hideBalance: Boolean,
+    hideProtocolIcon: Boolean,
+    clickable: Boolean,
   },
   setup(props) {
     const { getAccountBalance } = useBalances();
@@ -106,7 +111,6 @@ export default defineComponent({
   --border-width: 3px;
 
   width: 100%;
-  padding: 2px 8px;
 
   .option-wrapper {
     position: relative;
@@ -130,10 +134,10 @@ export default defineComponent({
       border: var(--border-width) solid var(--bg-color);
       box-sizing: border-box;
       border-radius: 10px;
-      transition: background-color 0.12s ease-in-out;
+      transition: all 0.12s ease-in-out;
     }
 
-    &:hover:not(.selected) {
+    &.clickable:hover:not(.selected) {
       &::before {
         opacity: 0.8;
       }

src/popup/components/AppsBrowser/AppsBrowserListItem.vue

@@ -3,19 +3,18 @@
     class="apps-browser-list-item"
     type="button"
   >
-    <div
-      class="app-image-wrapper"
-    >
+    <div class="app-image-wrapper">
       <img
         v-if="imageUrl"
         :src="imageUrl"
         class="app-image"
         alt="Dapp favicon"
       >
     </div>
-    <div class="app-title">
-      {{ title }}
-    </div>
+    <div
+      class="app-name"
+      v-text="name"
+    />
   </button>
 </template>
 
@@ -25,10 +24,8 @@ import { computed, defineComponent } from 'vue';
 export default defineComponent({
   name: 'AppsBrowserListItem',
   props: {
-    title: { type: String, required: true },
-    /**
-     * App image name, should be located in src\icons\dapp
-     */
+    name: { type: String, required: true },
+    /** App image name, should be located in src\icons\dapp */
     image: { type: String, default: null },
   },
   setup(props) {
@@ -67,7 +64,7 @@ export default defineComponent({
       background: $color-disabled;
     }
 
-    .app-title,
+    .app-name,
     .app-image {
       opacity: 1;
     }
@@ -89,7 +86,7 @@ export default defineComponent({
     opacity: 0.85;
   }
 
-  .app-title {
+  .app-name {
     padding: 4px 8px;
     font-size: 12px;
     line-height: 16px;

src/popup/components/BulletSwitcher.vue

@@ -42,7 +42,7 @@
 import { computed, defineComponent } from 'vue';
 
 import BtnPlain from './buttons/BtnPlain.vue';
-import PlusCircleIcon from '../../icons/plus-circle-fill.svg?vue-component';
+import PlusCircleIcon from '../../icons/plus-circle.svg?vue-component';
 
 // Physical size of the bullet area in pixels
 const BULLET_SIZE = 16;