From 82e99722f74c43e289779c93f11364de43b96585 Mon Sep 17 00:00:00 2001 From: santerisarle Date: Wed, 29 May 2024 11:45:32 +0300 Subject: [PATCH 1/6] Improve transfer type design --- packages/ethereum-wallets/src/lib/modal.ts | 25 +++++++++++++++------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/ethereum-wallets/src/lib/modal.ts b/packages/ethereum-wallets/src/lib/modal.ts index 9033e984e..8ed316ab2 100644 --- a/packages/ethereum-wallets/src/lib/modal.ts +++ b/packages/ethereum-wallets/src/lib/modal.ts @@ -294,7 +294,7 @@ export function createModal({ txs.length === 1 && txs[0].actions.length === 1 && txs[0].actions[0].type === "AddKey" - ? "

Log in

" + ? "

Log in

" : txs.length === 1 && txs[0].actions.length === 1 && txs[0].actions[0].type === "DeleteKey" @@ -485,15 +485,24 @@ export function createModal({ ` : tx.actions[0].type === "Transfer" ? ` -
-

- Transfer ${formatUnits( +

+
+
From
+
${tx.signerId}
+
+
+
To
+
${tx.receiverId}
+
+
+
Amount
+
${formatUnits( BigInt(tx.actions[0].params.deposit), 24 - )} NEAR from ${tx.signerId} to ${tx.receiverId} -

-
- ` + )} NEAR +
+ + ` : `

Unknown transaction type.

From e44f3b031de80e53212490d66b54f4fdadb79f8c Mon Sep 17 00:00:00 2001 From: santerisarle Date: Wed, 29 May 2024 11:49:04 +0300 Subject: [PATCH 2/6] Format JSON better --- packages/ethereum-wallets/src/lib/modal.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/ethereum-wallets/src/lib/modal.ts b/packages/ethereum-wallets/src/lib/modal.ts index 8ed316ab2..51306f639 100644 --- a/packages/ethereum-wallets/src/lib/modal.ts +++ b/packages/ethereum-wallets/src/lib/modal.ts @@ -230,6 +230,7 @@ export function createModal({ padding: 10px; background: #F1F1F1; border-radius: 8px; + width: 100%; max-width: 100%; overflow: auto; } @@ -241,6 +242,8 @@ export function createModal({ color: #646464; word-wrap: break-word; overflow-wrap: break-word; + white-space: pre-wrap; + margin: 0; } .ethereum-wallet-txs-status { From aa87d78f03eb2506a5990fa11451785b90cc8a99 Mon Sep 17 00:00:00 2001 From: santerisarle Date: Wed, 29 May 2024 13:40:16 +0300 Subject: [PATCH 3/6] Add text highlight --- packages/ethereum-wallets/src/lib/modal.ts | 30 +++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/ethereum-wallets/src/lib/modal.ts b/packages/ethereum-wallets/src/lib/modal.ts index 51306f639..1d86a126d 100644 --- a/packages/ethereum-wallets/src/lib/modal.ts +++ b/packages/ethereum-wallets/src/lib/modal.ts @@ -263,6 +263,22 @@ export function createModal({ font-size: 14px; line-height: 20px; } + + .ethereum-wallet-tx-highlight { + position: relative; + z-index: 1; + } + .ethereum-wallet-tx-highlight::before { + content: ""; + position: absolute; + top: -4px; + left: -6px; + right: -6px; + bottom: -4px; + z-index: -1; + background-color: #DDF3E4; + border-radius: 8px; + } `; // Create a style element and append the CSS styles @@ -475,11 +491,13 @@ export function createModal({
Type
-
${tx.actions[0].params.methodName}
+
${ + tx.actions[0].params.methodName + }
Deposit
-
${formatUnits( +
${formatUnits( BigInt(tx.actions[0].params.deposit), 24 )} NEAR
@@ -497,9 +515,15 @@ export function createModal({
To
${tx.receiverId}
+
+
Type
+
${ + tx.actions[0].type + }
+
Amount
-
${formatUnits( +
${formatUnits( BigInt(tx.actions[0].params.deposit), 24 )} NEAR
From f11ab7fab6c10f24a234ac5956caa0d1e11c750d Mon Sep 17 00:00:00 2001 From: santerisarle Date: Wed, 29 May 2024 15:15:08 +0300 Subject: [PATCH 4/6] Add spinner --- packages/ethereum-wallets/src/lib/modal.ts | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/ethereum-wallets/src/lib/modal.ts b/packages/ethereum-wallets/src/lib/modal.ts index 1d86a126d..dc8f7323c 100644 --- a/packages/ethereum-wallets/src/lib/modal.ts +++ b/packages/ethereum-wallets/src/lib/modal.ts @@ -247,6 +247,7 @@ export function createModal({ } .ethereum-wallet-txs-status { + position: relative; display: flex; justify-content: center; align-items: center; @@ -279,6 +280,28 @@ export function createModal({ background-color: #DDF3E4; border-radius: 8px; } + + .ethereum-wallet-spinner { + position: absolute; + right: 14px; + top: 16px; + width: 16px; + height: 16px; + border: 2px solid #384EAC; + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + } + @keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } `; // Create a style element and append the CSS styles @@ -549,6 +572,7 @@ export function createModal({ : "Sign the transaction in your wallet..." }

+ ${isSent ? `` : ""}
` } From 96f5ee8e3e3e994c5a039d6ebf4f6374202c4b96 Mon Sep 17 00:00:00 2001 From: santerisarle Date: Wed, 29 May 2024 16:17:15 +0300 Subject: [PATCH 5/6] Add explorer link --- packages/ethereum-wallets/src/lib/modal.ts | 31 ++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/ethereum-wallets/src/lib/modal.ts b/packages/ethereum-wallets/src/lib/modal.ts index dc8f7323c..1fffbd44d 100644 --- a/packages/ethereum-wallets/src/lib/modal.ts +++ b/packages/ethereum-wallets/src/lib/modal.ts @@ -119,6 +119,23 @@ export function createModal({ width: 24px; } + .ethereum-wallet-tx-explorer-link { + height: 24px; + width: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + } + .ethereum-wallet-tx-explorer-link:hover { + background-color: #DDF3E4; + } + .ethereum-wallet-tx-explorer-link svg { + height: 16px; + width: 16px; + color: #202020; + } + .ethereum-wallet-tx.ethereum-wallet-tx-signing { background-color: #F9F9F9; padding-bottom: 10px; @@ -403,7 +420,6 @@ export function createModal({ const isActive = i === selectedIndex; const isPending = i > selectedIndex; const isSent = selectedIndex < ethTxHashes.length; - // eslint-disable-next-line @typescript-eslint/no-unused-vars const explorerLink = i < ethTxHashes.length ? `${explorerUrl}/tx/${ethTxHashes[i]}` @@ -425,7 +441,18 @@ export function createModal({ isCompleted ? `
-

Transaction ${txNumber}

+
+

Transaction ${txNumber}

+ ${ + explorerLink + ? ` + + + + ` + : "" + } +
` From 7a5f296b2ac9c2bb8201fcc4de30be1bf93b1290 Mon Sep 17 00:00:00 2001 From: santerisarle Date: Wed, 29 May 2024 16:19:36 +0300 Subject: [PATCH 6/6] Clean up --- packages/ethereum-wallets/src/lib/modal.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/ethereum-wallets/src/lib/modal.ts b/packages/ethereum-wallets/src/lib/modal.ts index 1fffbd44d..a58b105b9 100644 --- a/packages/ethereum-wallets/src/lib/modal.ts +++ b/packages/ethereum-wallets/src/lib/modal.ts @@ -307,8 +307,6 @@ export function createModal({ border: 2px solid #384EAC; border-bottom-color: transparent; border-radius: 50%; - display: inline-block; - box-sizing: border-box; animation: rotation 1s linear infinite; } @keyframes rotation {