@stellar-expert/ui-framework 1.10.5 → 1.11.1

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.5",
+  "version": "1.11.1",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",

package/tx/op-description-view.js

@@ -848,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}
     </>
 }
 
@@ -870,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
     </>
 }
 
@@ -909,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>
 })