Feature/Fee Bump Transaction (#196)

src/lib/components/transaction/Transaction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Transaction, xdr } from 'stellar-sdk';
+    import { FeeBumpTransaction, Transaction, TransactionBuilder, xdr } from 'stellar-sdk';
     import { createEventDispatcher } from 'svelte';
     import { Link } from 'svelte-navigator';
 
@@ -33,11 +33,18 @@
 
     const storage = new LocalStorage();
     const dispatch = createEventDispatcher();
-
-    let wallet: IWallet;
     const storedWallet = storage.getItem('wallet');
     const walletFactory = new WalletFactory();
 
+    let wallet: IWallet;
+    let feeBumpTx: FeeBumpTransaction | undefined;
+    let tx: Transaction;
+    let network: string;
+    let operationComponents: OperationComponent[] = [];
+    let transactionGroups: (OperationComponent | IOperationGroupComponent)[] = [];
+    let shortedSourceAccount: string;
+    let isValidXdr = false;
+
     if (storedWallet) {
         if (storedWallet === WalletConnect.NAME) {
             wallet = walletFactory.createWalletConnect(walletConnectService);
@@ -46,14 +53,6 @@
         }
     }
 
-    let tx: Transaction;
-    let network: string;
-
-    let operationComponents: OperationComponent[] = [];
-    let transactionGroups: (OperationComponent | IOperationGroupComponent)[] = [];
-    let shortedSourceAccount: string;
-    let isValidXdr = false;
-
     function toggleOperationVisibility(i: number) {
         $operationsVisibility[i] = !$operationsVisibility[i];
         $isUserPublicKeyClicked = false;
@@ -82,7 +81,14 @@
 
     try {
         isValidXdr = xdr.TransactionEnvelope.validateXDR(transactionMessage.xdr, 'base64');
-        tx = new Transaction(transactionMessage.xdr, CURRENT_NETWORK_PASSPHRASE);
+        const buildedTx = TransactionBuilder.fromXDR(transactionMessage.xdr, CURRENT_NETWORK_PASSPHRASE);
+
+        if (buildedTx instanceof FeeBumpTransaction) {
+            feeBumpTx = buildedTx;
+            tx = buildedTx.innerTransaction;
+        } else {
+            tx = buildedTx;
+        }
 
         network = CURRENT_STELLAR_NETWORK;
 
@@ -109,13 +115,30 @@
 
 {#if isValidXdr}
     <h1 class="simple-signer tx-title">{$language.SIGN}</h1>
+
+    {#if feeBumpTx}
+        <h2 class="simple-signer tx-title">{$language.FEE_BUMP}</h2>
+    {/if}
+
     {#if transactionMessage.description}
         <div class="simple-signer tx-description-container">
             <p class="simple-signer tx-description-text">{transactionMessage.description}</p>
         </div>
     {/if}
     {#if wallet}
         <div class="simple-signer tx-data-container">
+            {#if feeBumpTx}
+                <div class="simple-signer fee-bump-tx-info-container">
+                    <p>
+                        {$language.FEE_BUMP_DESCRIPTION_1}
+                        <span class="simple-signer bold-text">{$language.FEE.toUpperCase()}</span>
+                        {$language.FEE_BUMP_DESCRIPTION_2}
+                    </p>
+                </div>
+
+                <hr class="simple-signer separator" />
+            {/if}
+
             <div class="simple-signer tx-network-container">
                 <p>{$language.NETWORK}:</p>
                 &nbsp;
@@ -124,14 +147,14 @@
             <div class="simple-signer tx-sequence-number">
                 <p class="sequence-number">{$language.SEQUENCE_NUMBER} {tx ? tx.sequence : ''}</p>
             </div>
+
             <div class="simple-signer tx-source-account">
                 <p class="simple-signer source-account">
                     {$language.SOURCE_ACCOUNT}
-                    {$language.YOUR_ACCOUNT}
+                    <span class="simple-signer user-publickey" on:click={toggleSourceAccount}>
+                        {$isSourceAccountClicked ? tx.source : shortedSourceAccount}
+                    </span>
                 </p>
-                <span class="simple-signer user-publickey" on:click={toggleSourceAccount}
-                    >{$isSourceAccountClicked ? tx.source : shortedSourceAccount}</span
-                >
             </div>
         </div>
         <Signatures signatures={tx.signatures} />
@@ -186,7 +209,9 @@
             <div class="simple-signer tx-fee-container">
                 <p class="simple-signer operation-info-title bottom-info-title">{$language.NETWORK_FEE}</p>
                 &nbsp;
-                <p class="simple-signer bottom-info-paragraph">{convertStroopsToXLM(tx.fee)} XLM</p>
+                <p class="simple-signer bottom-info-paragraph">
+                    {convertStroopsToXLM(feeBumpTx ? feeBumpTx.fee : tx.fee)} XLM
+                </p>
             </div>
             {#if tx.memo.value}
                 <div class="simple-signer memo-container">
@@ -200,7 +225,8 @@
             <button class="simple-signer cancel-button" on:click={() => dispatch('cancel')}>{$language.CANCEL}</button>
             <button
                 class="simple-signer sign-tx-button"
-                on:click={async () => dispatch('confirm', await wallet.sign(tx))}>{$language.CONFIRM}</button
+                on:click={async () => dispatch('confirm', await wallet.sign(feeBumpTx || tx))}
+                >{$language.CONFIRM}</button
             >
         </div>
     {:else}
@@ -220,6 +246,22 @@
 {/if}
 
 <style>
+    .bold-text {
+        font-weight: 500;
+    }
+
+    .fee-bump-tx-info-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .separator {
+        border: 1px solid #e5e5e5;
+        width: 100%;
+        margin: 20px 0 20px 0;
+    }
+
     .user-publickey {
         color: #2f69b7;
         word-wrap: break-word;

src/lib/i18n/ITranslation.ts

@@ -32,6 +32,10 @@ export interface ITranslation {
     ERROR: string;
     EXPAND_ALL: string;
     EXTEND_TO: string;
+    FEE_BUMP_DESCRIPTION_1: string;
+    FEE_BUMP_DESCRIPTION_2: string;
+    FEE_BUMP: string;
+    FEE: string;
     FROM: string;
     FUNCTION_TYPE: string;
     GO_TO_CONNECT: string;

src/lib/i18n/languages/english.json

@@ -32,6 +32,10 @@
     "ERROR": "Error",
     "EXPAND_ALL": "Expand all",
     "EXTEND_TO": "Extend to:",
+    "FEE_BUMP_DESCRIPTION_1": "You will sign to pay the",
+    "FEE_BUMP_DESCRIPTION_2": "of the transaction below",
+    "FEE_BUMP": "FEE BUMP",
+    "FEE": "Fee",
     "FROM": "From:",
     "FUNCTION_TYPE": "Function type:",
     "GO_TO_CONNECT": "Go to Connect",

src/lib/i18n/languages/spanish.json

@@ -32,6 +32,10 @@
     "ERROR": "Error",
     "EXPAND_ALL": "Expandir todas",
     "EXTEND_TO": "Extender a:",
+    "FEE_BUMP_DESCRIPTION_1": "Vas a firmar para pagar la",
+    "FEE_BUMP_DESCRIPTION_2": "de la transacción a continuación",
+    "FEE_BUMP": "FEE BUMP",
+    "FEE": "Comisión",
     "FROM": "De:",
     "FUNCTION_TYPE": "Tipo de función:",
     "GO_TO_CONNECT": "Ir a Conectar",

src/lib/wallets/IWallet.ts

@@ -1,9 +1,9 @@
-import type { Transaction } from 'stellar-sdk';
+import type { FeeBumpTransaction, Transaction } from 'stellar-sdk';
 import type { ComponentType } from 'svelte';
 
 export default interface IWallet {
     getPublicKey(privateKey?: string): Promise<string>;
-    sign(tx: Transaction): Promise<string>;
+    sign(tx: Transaction | FeeBumpTransaction): Promise<string>;
     getName(): string;
     getFriendlyName(): string;
     getSvgIcon(): ComponentType;

src/lib/wallets/albedo/Albedo.ts

@@ -1,4 +1,4 @@
-import type { Transaction } from 'stellar-sdk';
+import type { FeeBumpTransaction, Transaction } from 'stellar-sdk';
 
 import { AlbedoIcon } from '../../../assets';
 import { CURRENT_STELLAR_NETWORK, StellarNetwork } from '../../stellar/StellarNetwork';
@@ -30,7 +30,7 @@ export default class Albedo extends AbstractWallet implements IWallet {
         return requestPubKey.pubkey;
     }
 
-    public override async sign(tx: Transaction) {
+    public override async sign(tx: Transaction | FeeBumpTransaction): Promise<string> {
         const signedXdr = await window.albedo.tx({ xdr: tx.toXDR(), network: this.albedoNetwork });
         return signedXdr.signed_envelope_xdr;
     }

src/lib/wallets/freighter/Freighter.ts

@@ -1,5 +1,5 @@
 import { getPublicKey, isConnected, signTransaction } from '@stellar/freighter-api';
-import type { Transaction } from 'stellar-sdk';
+import type { FeeBumpTransaction, Transaction } from 'stellar-sdk';
 
 import { FreighterIcon } from '../../../assets';
 import { CURRENT_STELLAR_NETWORK, StellarNetwork } from '../../stellar/StellarNetwork';
@@ -33,7 +33,7 @@ export default class Freighter extends AbstractWallet implements IWallet {
         return publicKey;
     }
 
-    public override async sign(tx: Transaction): Promise<string> {
+    public override async sign(tx: Transaction | FeeBumpTransaction): Promise<string> {
         return signTransaction(tx.toXDR(), { network: this.freighterNetwork });
     }
 

src/lib/wallets/privateKey/PrivateKey.ts

@@ -1,4 +1,4 @@
-import type { Transaction } from 'stellar-sdk';
+import type { FeeBumpTransaction, Transaction } from 'stellar-sdk';
 import { Keypair } from 'stellar-sdk';
 
 import { PrivateKeyIcon } from '../../../assets';
@@ -35,7 +35,7 @@ export default class PrivateKey extends AbstractWallet implements IWallet {
         return Keypair.fromSecret(publicKey).publicKey();
     }
 
-    public override async sign(tx: Transaction): Promise<string> {
+    public override async sign(tx: Transaction | FeeBumpTransaction): Promise<string> {
         const privateKey = await this.getDecryptedStoredPrivateKey();
         const keyPair = Keypair.fromSecret(privateKey);
 

src/lib/wallets/rabet/Rabet.ts

@@ -1,4 +1,4 @@
-import type { Transaction } from 'stellar-sdk';
+import type { FeeBumpTransaction, Transaction } from 'stellar-sdk';
 
 import { RabetIcon } from '../../../assets';
 import { CURRENT_STELLAR_NETWORK, StellarNetwork } from '../../stellar/StellarNetwork';
@@ -30,7 +30,7 @@ export default class Rabet extends AbstractWallet implements IWallet {
         return result.publicKey;
     }
 
-    public override async sign(tx: Transaction): Promise<string> {
+    public override async sign(tx: Transaction | FeeBumpTransaction): Promise<string> {
         return window.rabet.sign(tx.toXDR(), this.rabetNetwork).then((result) => result.xdr);
     }
 

src/lib/wallets/walletConnect/WalletConnect.ts

@@ -1,6 +1,6 @@
 import type { SessionTypes } from '@walletconnect/types';
 import type IStorage from 'src/lib/storage/IStorage';
-import type { Transaction } from 'stellar-sdk';
+import type { FeeBumpTransaction, Transaction } from 'stellar-sdk';
 
 import { WalletConnectIcon } from '../../../assets';
 import { NoPublicKeyError } from '../../errors/WalletConnectErrors';
@@ -47,7 +47,7 @@ export default class WalletConnect extends AbstractWallet implements IWallet {
         return publicKey;
     }
 
-    public override async sign(tx: Transaction): Promise<string> {
+    public override async sign(tx: Transaction | FeeBumpTransaction): Promise<string> {
         const { signedXDR } = await this.walletConnectService.makeRequest({
             network: this.walletConnectNetwork,
             method: WalletConnectAllowedMethods.SIGN,

src/lib/wallets/xBull/XBull.ts

@@ -1,5 +1,5 @@
 import { xBullWalletConnect } from '@creit-tech/xbull-wallet-connect';
-import type { Transaction } from 'stellar-sdk';
+import type { FeeBumpTransaction, Transaction } from 'stellar-sdk';
 
 import { XBullIcon } from '../../../assets';
 import { CURRENT_STELLAR_NETWORK, StellarNetwork } from '../../stellar/StellarNetwork';
@@ -33,7 +33,7 @@ export default class XBull extends AbstractWallet implements IWallet {
         return publicKey;
     }
 
-    public override async sign(tx: Transaction): Promise<string> {
+    public override async sign(tx: Transaction | FeeBumpTransaction): Promise<string> {
         const bridge = new xBullWalletConnect();
         const signedXdr = await bridge.sign({ xdr: tx.toXDR(), network: this.XBullNetwork });
         bridge.closeConnections();