Feat/add to address

packages/extension/src/providers/common/ui/styles/verify-transaction.less

@@ -7,6 +7,13 @@
   &__logo {
     margin-bottom: 8px;
   }
+  &__label {
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: @grayPrimary;
+    margin: 0 0 4px 44px;
+  }
   &__network {
     display: flex;
     justify-content: flex-start;
@@ -167,11 +174,11 @@
 
       &-to {
         font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 20px;
-        letter-spacing: 0.25px;
-        color: @primaryLabel;
+        font-weight: 400 !important;
+        font-size: 16px !important;
+        line-height: 20px !important;
+        letter-spacing: 0.5px;
+        color: @black !important;
         word-break: break-all;
       }
     }

packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue

@@ -11,7 +11,9 @@
     <template #content>
       <h2>Verify transaction</h2>
       <hardware-wallet-msg :wallet-type="account.walletType" />
+      <!--FROM-->
       <div class="provider-verify-transaction__block">
+        <p class="provider-verify-transaction__label">From</p>
         <div class="provider-verify-transaction__account">
           <img :src="identicon" />
           <div class="provider-verify-transaction__account-info">
@@ -32,9 +34,10 @@
           </div>
         </div>
       </div>
+      <!-- TX INFO -->
       <div class="provider-verify-transaction__block">
         <div class="provider-verify-transaction__info">
-          <img :src="Options.faviconURL" />
+          <img :src="Options.faviconURL" width="32px" height="32px" />
           <div class="provider-verify-transaction__info-info">
             <h4>{{ Options.domain }}</h4>
           </div>
@@ -77,6 +80,20 @@
           </p>
         </div>
       </div>
+      <!-- TO -->
+      <div class="provider-verify-transaction__block">
+        <p class="provider-verify-transaction__label">To</p>
+        <div class="provider-verify-transaction__account">
+          <img :src="identiconTo" />
+          <div class="provider-verify-transaction__account-info">
+            <div>
+              <p class="provider-verify-transaction__account-info-to">
+                {{ decodedTx?.toAddress ?? '~' }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <send-fee-select
         :in-swap="true"
@@ -183,6 +200,7 @@ const account = ref<EnkryptAccount>({
   address: '',
 } as EnkryptAccount);
 const identicon = ref<string>('');
+const identiconTo = ref<string>(network.value.identicon(''));
 const windowPromise = WindowPromiseHandler(3);
 const Options = ref<ProviderRequestOptions>({
   domain: '',
@@ -216,6 +234,9 @@ onBeforeMount(async () => {
     Request.value.params![0] as EthereumTransaction,
     network.value as EvmNetwork,
   ).then(decoded => {
+    identiconTo.value = network.value.identicon(
+      decoded.toAddress!.toLowerCase(),
+    );
     if (decoded.decoded && decoded.dataHex.startsWith(TokenSigs.approve)) {
       isApproval.value = true;
       if (

packages/extension/src/providers/ethereum/ui/send-transaction/components/send-address-input.vue

@@ -71,6 +71,7 @@ const visibleAddress = computed(() => {
   if (props.network.isAddress(address))
     address = props.network.displayAddress(props.value);
   if (isFocus.value) return address;
+  if (address.length < 13) return address;
   return replaceWithEllipsis(address, 6, 6);
 });
 const address = computed({

packages/extension/src/providers/solana/ui/send-transaction/components/send-address-input.vue

@@ -66,11 +66,13 @@ const solAddress = computed(() => {
   if (props.value) return props.network.displayAddress(props.value);
   else return props.value;
 });
+
 const address = computed({
-  get: () =>
-    isFocus.value
-      ? solAddress.value
-      : replaceWithEllipsis(solAddress.value, 6, 6),
+  get: () => {
+    if (isFocus.value) return solAddress.value;
+    if (solAddress.value.length < 13) return solAddress.value;
+    return replaceWithEllipsis(solAddress.value, 6, 6);
+  },
   set: value => emit('update:inputAddress', value),
 });
 

packages/extension/src/ui/action/views/swap/components/send-address-input.vue

@@ -80,6 +80,7 @@ const address = computed({
     } catch {
       displayAddress = props.value;
     }
+    if (displayAddress.length < 13) return displayAddress;
     return isFocus.value
       ? displayAddress
       : replaceWithEllipsis(displayAddress, 6, 6);

packages/hw-wallets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enkryptcom/hw-wallets",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Hardware wallet manager for enkrypt",
   "type": "module",
   "main": "src/index.ts",