@stellar-expert/ui-framework 1.10.4 → 1.11.0

package/controls/tooltip.scss

@@ -3,8 +3,8 @@
 $tooltip-notch-shadow-color: var(--color-border-shadow);
 
 .tooltip-wrapper {
-  width: 30rem;
-  max-width: 30rem;
+  width: 40rem;
+  max-width: min(40rem, 80vw);
   position: absolute;
   visibility: hidden;
   opacity: 0;
@@ -17,7 +17,7 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
   font-size: 0.9*$font-size-base;
   font-style: normal;
   line-height: 1.3;
-  max-width: 30rem;
+  max-width: min(40rem, 80vw);
   background: var(--color-bg);
   border-color: var(--color-contrast-border);
   border-radius: $border-radius-input;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.10.4",
+  "version": "1.11.0",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",
@@ -21,7 +21,7 @@
     "@stellar-expert/client-cache": "github:stellar-expert/client-cache",
     "@stellar-expert/formatter": "^2.3.0",
     "@stellar-expert/navigation": "github:stellar-expert/navigation#v1.0.2",
-    "@stellar-expert/tx-meta-effects-parser": "^5.0.4",
+    "@stellar-expert/tx-meta-effects-parser": "^5.2.0",
     "classnames": ">=2",
     "prop-types": ">=15",
     "qrcode.react": "^3.1.0",

package/tx/op-description-view.js

@@ -117,8 +117,10 @@ function PathPaymentDescriptionView({op, compact}) {
     if (sendMax !== undefined) {
         if (isSwap && sendAssetId === destAssetId && effects.length) { //circular trades yield accountCredited/Debited effect
             const changeEffect = effects.find(e => e.source === source && e.asset === sendAssetId && (e.type === 'accountCredited' || e.type === 'accountDebited'))
-            const change = BigInt(changeEffect.amount)
-            src = fromStroops(toStroops(destAmount) + (changeEffect.type === 'accountCredited' ? -change : change))
+            if (changeEffect) { //arbitrage successful, otherwise src = dst and no account changes happened
+                const change = BigInt(changeEffect.amount)
+                src = fromStroops(toStroops(destAmount) + (changeEffect.type === 'accountCredited' ? -change : change))
+            }
         } else {
             const debitedEffect = effects.find(e => e.source === source && e.type === 'accountDebited' && e.asset === sendAssetId)
             if (debitedEffect) {
@@ -129,8 +131,10 @@ function PathPaymentDescriptionView({op, compact}) {
     if (destMin !== undefined) {
         if (isSwap && sendAssetId === destAssetId && effects.length) { //circular trades yield accountCredited/Debited effect
             const changeEffect = effects.find(e => e.source === source && e.asset === destAssetId && (e.type === 'accountCredited' || e.type === 'accountDebited'))
-            const change = BigInt(changeEffect.amount)
-            dst = fromStroops(toStroops(destAmount) + (changeEffect.type === 'accountCredited' ? change : -change))
+            if (changeEffect) { //arbitrage successful, otherwise src = dst and no account changes happened
+                const change = BigInt(changeEffect.amount)
+                dst = fromStroops(toStroops(destAmount) + (changeEffect.type === 'accountCredited' ? change : -change))
+            }
         } else {
             const creditedEffect = effects.find(e => e.source === destination && e.type === 'accountCredited' && e.asset === destAssetId)
             if (creditedEffect) {
@@ -844,15 +848,15 @@ function InvokeHostFunctionView({op, compact}) {
  * @param {Boolean} compact
  * @constructor
  */
-function BumpFootprintExpirationView({op}) {
-    const {ledgersToExpire} = op.operation
+function ExtendFootprintTTLView({op}) {
+    const {extendTo} = op.operation
     if (op.isEphemeral)
         return <>
-            <b>Bump state expiration</b> for {ledgersToExpire} ledgers
+            <b>Extend ledger state expiration</b> to sequence {extendTo}
             <OpSourceAccount op={op}/>
         </>
     return <>
-        <OpSourceAccount op={op}/> bumped state expiration for {ledgersToExpire} ledgers
+        <OpSourceAccount op={op}/> extended ledger state expiration to sequence {extendTo}
     </>
 }
 
@@ -866,10 +870,10 @@ function RestoreFootprintView({op}) {
     const {ledgersToExpire} = op.operation
     if (op.isEphemeral)
         return <>
-            <b>Restore state</b><OpSourceAccount op={op}/>
+            <b>Restore ledger state entry</b> <OpSourceAccount op={op}/>
         </>
     return <>
-        <OpSourceAccount op={op}/> restored state
+        <OpSourceAccount op={op}/> restored ledger state entry
     </>
 }
 
@@ -905,7 +909,7 @@ const typeMapping = {
     liquidityPoolDeposit: DepositLiquidityDescriptionView,
     liquidityPoolWithdraw: WithdrawLiquidityDescriptionView,
     invokeHostFunction: InvokeHostFunctionView,
-    bumpFootprintExpiration: BumpFootprintExpirationView,
+    extendFootprintTTL: ExtendFootprintTTLView,
     restoreFootprint: RestoreFootprintView
 }
 

package/tx/tx-operations-list.js

@@ -70,13 +70,25 @@ export const TxOperationsList = React.memo(function TxOperationsList({
                                                                          showEffects
                                                                      }) {
     const [effectsExpanded, setEffectsExpanded] = useState(false)
+    const [opsExpanded, setOpsExpanded] = useState(false)
     const toggleEffects = useCallback(e => setEffectsExpanded(e.expanded), [])
+    const toggleAdditionalOps = useCallback(e => setOpsExpanded(e.expanded), [])
     let {operations} = parsedTx
     let opdiff = 0
-    //filter operations if filtered output is requested
-    if (filter) {
-        operations = operations.filter(filter)
-        opdiff = parsedTx.operations.length - operations.length
+    if (!opsExpanded) {
+        //filter operations if filtered output is requested
+        if (filter) {
+            const visibleOps = operations.filter(filter)
+            if (visibleOps.length) {
+                operations = visibleOps
+                opdiff = parsedTx.operations.length - operations.length
+            }
+        }
+        //hide some operations in large transactions to prevent interface hanging
+        if (operations.length > 5) {
+            operations = operations.subarray(0, 5)
+            opdiff = parsedTx.operations.length - operations.length
+        }
     }
 
     return <div>
@@ -97,9 +109,8 @@ export const TxOperationsList = React.memo(function TxOperationsList({
                 {effectsExpanded && <OpEffectsView effects={op.operation.effects}/>}
             </div>)}
             {showFees && <TxChargedFee {...{parsedTx, compact}}/>}
-            {opdiff > 0 && <div className="dimmed text-small block-indent">
-                {opdiff} more operation{opdiff > 1 && 's'} hidden
-            </div>}
+            {(opsExpanded || opdiff > 0) && <Spoiler expanded={opsExpanded} onChange={toggleAdditionalOps}
+                                    showMore={`${opdiff} more operation${opdiff > 1 && 's'} hidden`} showLess="Hide extra operations"/>}
         </div>
     </div>
 })