feat: improve invite links

Author: CedrikNikita

src/constants/common.ts

@@ -323,6 +323,7 @@ export const MODAL_TRANSFER_RECEIVE = 'transfer-receive';
 export const MODAL_TRANSFER_SEND = 'transfer-send';
 export const MODAL_DAPP_BROWSER_ACTIONS = 'browser-actions';
 export const MODAL_WARNING_DAPP_BROWSER = 'warning-dapp-browser';
+export const MODAL_CLAIM_GIFT_CARD = 'claim-gift-card';
 
 export const POPUP_TYPE_CONNECT = 'connectConfirm';
 export const POPUP_TYPE_ACCOUNT_LIST = 'account-list';

src/popup/components/AccountSelector.vue

@@ -3,6 +3,7 @@
     <Avatar
       v-if="!avatarOnly"
       :address="modelValue.toString()"
+      size="lg"
     />
     <div>
       <BtnPill
@@ -39,9 +40,10 @@
       </BtnPill>
       <AddressTruncated
         v-if="!avatarOnly"
-        :protocol="modelValue.protocol"
         show-explorer-link
+        show-protocol-icon
         :address="modelValue.toString()"
+        class="address-truncated"
       />
     </div>
   </div>
@@ -108,5 +110,9 @@ export default defineComponent({
       margin-bottom: 0;
     }
   }
+
+  .address-truncated {
+    color: $color-white;
+  }
 }
 </style>

src/popup/components/AddressTruncated.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="address-truncated">
+    <ProtocolIcon
+      v-if="showProtocolIcon"
+      :protocol="protocol"
+      class="protocol-icon"
+    />
     <div class="address-truncated-chunks">
       <span class="address-chunk">{{ truncatedAddress[0] }}</span>
       <span class="dots">
@@ -32,17 +37,20 @@ import { PROTOCOL_AETERNITY } from '@/constants';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 
 import ExternalLinkIcon from '@/icons/external-link.svg?vue-component';
+import ProtocolIcon from './ProtocolIcon.vue';
 import LinkButton from './LinkButton.vue';
 
 export default defineComponent({
   components: {
+    ProtocolIcon,
     LinkButton,
     ExternalLinkIcon,
   },
   props: {
     address: { type: String, required: true },
-    protocol: { type: String as PropType<Protocol>, default: PROTOCOL_AETERNITY },
     showExplorerLink: Boolean,
+    showProtocolIcon: Boolean,
+    protocol: { type: String as PropType<Protocol>, default: PROTOCOL_AETERNITY },
   },
   setup(props) {
     const truncatedAddress = computed(() => truncateAddress(props.address));
@@ -69,6 +77,10 @@ export default defineComponent({
   align-items: center;
   user-select: none;
 
+  .protocol-icon {
+    margin-right: 4px;
+  }
+
   &-chunks {
     @extend %face-mono-12-medium;
 

src/popup/components/Header.vue

@@ -129,7 +129,7 @@ export default defineComponent({
       address: () => t('pages.titles.address'),
       signMessage: () => t('pages.titles.signMessage'),
       signTransaction: () => t('pages.titles.signTransaction'),
-      invite: () => t('pages.titles.invite'),
+      giftCards: () => t('pages.titles.giftCards'),
       txDetails: () => t('pages.titles.txDetails'),
       tokenDetails: () => t('pages.titles.tokenDetails'),
       coinDetails: () => t('pages.titles.coinDetails'),

src/popup/components/InputField.vue

@@ -339,7 +339,6 @@ export default defineComponent({
   .message {
     @extend %face-sans-14-regular;
 
-    min-height: 24px;
     line-height: 20px;
     display: flex;
     align-items: center;

src/popup/components/InviteItem.vue

@@ -71,7 +71,6 @@
 </template>
 
 <script lang="ts">
-import nacl from 'tweetnacl';
 import {
   computed,
   defineComponent,
@@ -83,11 +82,12 @@ import { Field } from 'vee-validate';
 import {
   AE_AMOUNT_FORMATS,
   encode,
-  getAddressFromPriv,
   Encoding,
 } from '@aeternity/aepp-sdk';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
+
+import { getAccountFromSecret } from '@/protocols/aeternity/helpers';
 import type { IFormModel } from '@/types';
 import { formatDate } from '@/utils';
 import {
@@ -96,6 +96,7 @@ import {
 } from '@/constants';
 import { ROUTE_INVITE_CLAIM } from '@/popup/router/routeNames';
 import {
+  useAccounts,
   useBalances,
   useMaxAmount,
   useAeSdk,
@@ -127,6 +128,7 @@ export default defineComponent({
     const { marketData } = useCurrencies({ store });
     const { getAeSdk } = useAeSdk({ store });
     const { balance } = useBalances({ store });
+    const { getLastActiveProtocolAccount } = useAccounts({ store });
 
     const formModel = ref<IFormModel>({
       amount: '',
@@ -150,9 +152,7 @@ export default defineComponent({
       );
     });
 
-    const address = computed(() => getAddressFromPriv(
-      nacl.sign.keyPair.fromSeed(Buffer.from(props.secretKey)).secretKey,
-    ));
+    const address = computed(() => getAccountFromSecret(props.secretKey).address);
 
     function deleteItem() {
       store.commit('invites/delete', props.secretKey);
@@ -172,7 +172,11 @@ export default defineComponent({
     async function claim() {
       emit('loading', true);
       try {
-        await store.dispatch('invites/claim', Buffer.from(props.secretKey));
+        await store.dispatch('invites/claim', {
+          secretKey: Buffer.from(props.secretKey),
+          recipientId: getLastActiveProtocolAccount(PROTOCOL_AETERNITY)?.address,
+          isMax: true,
+        });
         await updateBalance();
       } catch (error) {
         if (await store.dispatch('invites/handleNotEnoughFoundsError', { error, isInviteError: true })) {

src/popup/components/Modal.vue

@@ -15,7 +15,8 @@
         'no-padding': noPadding,
         dense,
         'semi-dense': semiDense,
-        'blur-bg': !(IS_FIREFOX && IS_EXTENSION)
+        'blur-bg': !(IS_FIREFOX && IS_EXTENSION),
+        'min-height': minHeight
       }"
     >
       <div class="container">
@@ -100,6 +101,7 @@ export default defineComponent({
     noPadding: Boolean,
     centered: Boolean,
     bodyWithoutPaddingBottom: Boolean,
+    minHeight: Boolean,
     header: { type: String, default: null },
   },
   emits: ['close', 'open'],
@@ -196,6 +198,8 @@ export default defineComponent({
     .body {
       @extend %face-sans-15-regular;
 
+      display: flex;
+      flex-direction: column;
       padding: var(--screen-padding-x);
       color: variables.$color-grey-light;
       word-break: break-word;
@@ -218,6 +222,12 @@ export default defineComponent({
     inset: 0;
   }
 
+  &.min-height {
+    .container {
+      min-height: 480px;
+    }
+  }
+
   &.full-screen,
   &.from-bottom {
     --footer-padding-bottom: 24px;