Feat/show invokehostfunction info

package.json

@@ -83,9 +83,11 @@
     "dependencies": {
         "@creit-tech/xbull-wallet-connect": "github:Creit-Tech/xBull-Wallet-Connect",
         "@stellar/freighter-api": "^1.4.0",
+        "@stellar/stellar-sdk": "^12.0.0-rc.2",
         "@walletconnect/modal": "^2.6.1",
         "@walletconnect/sign-client": "^2.9.2",
         "@walletconnect/types": "^2.9.2",
+        "buffer": "^6.0.3",
         "decode-uri-component": "^0.2.2",
         "json5": "^2.2.2",
         "stellar-sdk": "^11.1.0",

src/constants.ts

@@ -4,6 +4,14 @@ const {
     VITE_HORIZON_NETWORK_PASSPHRASE: HORIZON_NETWORK_PASSPHRASE,
     VITE_STELLAR_NETWORK: STELLAR_NETWORK,
     VITE_HORIZON_URL: HORIZON_URL,
+    VITE_SOROBANRPC_URL: SOROBANRPC_URL,
 } = import.meta.env;
 
-export { PROJECT_ID_FOR_WALLET_CONNECT, DAPP_BASE_URL, HORIZON_NETWORK_PASSPHRASE, STELLAR_NETWORK, HORIZON_URL };
+export {
+    PROJECT_ID_FOR_WALLET_CONNECT,
+    DAPP_BASE_URL,
+    HORIZON_NETWORK_PASSPHRASE,
+    STELLAR_NETWORK,
+    HORIZON_URL,
+    SOROBANRPC_URL,
+};

src/lib/components/transaction/Transaction.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { FeeBumpTransaction, Transaction, TransactionBuilder, xdr } from 'stellar-sdk';
     import { createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
     import { Link } from 'svelte-navigator';
 
     import type { WalletConnectService } from '../../../lib/service/walletConnect';
@@ -15,7 +16,8 @@
     import Signatures from './Signatures.svelte';
     import InsufficientOperationsError from './errors/InsufficientOperationsError';
     import InvalidGroupsSortError from './errors/InvalidGroupsSortError';
-    import DynamicOperationComponentFactory from './operations/DynamicOperationComponentFactory';
+    import { DynamicOperationComponentFactory } from './operations/DynamicOperationComponentFactory';
+    import { InvokeHostFunctionComponentFactory } from './operations/InvokeHostFunctionOperationComponentFactory';
     import Operation from './operations/Operation.svelte';
     import type { OperationComponent } from './operations/OperationComponent';
     import OperationsGroup from './operations/OperationsGroup.svelte';
@@ -79,38 +81,64 @@
         $areOperationsExpanded = true;
     }
 
-    try {
-        isValidXdr = xdr.TransactionEnvelope.validateXDR(transactionMessage.xdr, 'base64');
-        const buildedTx = TransactionBuilder.fromXDR(transactionMessage.xdr, CURRENT_NETWORK_PASSPHRASE);
-
-        if (buildedTx instanceof FeeBumpTransaction) {
-            feeBumpTx = buildedTx;
-            tx = buildedTx.innerTransaction;
-        } else {
-            tx = buildedTx;
+    async function initializeTransactionData() {
+        try {
+            isValidXdr = xdr.TransactionEnvelope.validateXDR(transactionMessage.xdr, 'base64');
+            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;
+
+            shortedSourceAccount = getShortedStellarKey(tx.source);
+
+            const invokeOperationIndex = tx.operations.findIndex(
+                (operation) => operation.type === 'invokeHostFunction',
+            );
+
+            if (invokeOperationIndex >= 0 && tx.operations[invokeOperationIndex]) {
+                const invokeHostFunctionComponentFactory = new InvokeHostFunctionComponentFactory();
+                const invokeOperationComponent = await invokeHostFunctionComponentFactory.create(
+                    tx,
+                    tx.operations[invokeOperationIndex]!,
+                );
+
+                transactionGroups = [invokeOperationComponent];
+            } else {
+                const dynamicOperationComponentFactory = new DynamicOperationComponentFactory();
+
+                operationComponents = tx.operations.map((operation) =>
+                    dynamicOperationComponentFactory.create(tx, operation),
+                );
+
+                if (transactionMessage.operationGroups && transactionMessage.operationGroups.length > 0) {
+                    transactionGroups = groupOperationComponents(
+                        operationComponents,
+                        transactionMessage.operationGroups,
+                    );
+                } else {
+                    console.info("A transaction group object wasn't provided");
+                    transactionGroups = operationComponents;
+                }
+            }
+        } catch (e) {
+            console.error(e);
+            if (e instanceof InvalidGroupsSortError || InsufficientOperationsError) {
+                transactionGroups = operationComponents;
+            }
         }
 
-        network = CURRENT_STELLAR_NETWORK;
-
-        shortedSourceAccount = getShortedStellarKey(tx.source);
-        const dynamicOperationComponentFactory = new DynamicOperationComponentFactory();
-
-        operationComponents = tx.operations.map((operation) => dynamicOperationComponentFactory.create(tx, operation));
-
-        if (transactionMessage.operationGroups && transactionMessage.operationGroups.length > 0) {
-            transactionGroups = groupOperationComponents(operationComponents, transactionMessage.operationGroups);
-        } else {
-            console.info("A transaction group object wasn't provided");
-            transactionGroups = operationComponents;
-        }
-    } catch (e) {
-        console.error(e);
-        if (e instanceof InvalidGroupsSortError || InsufficientOperationsError) {
-            transactionGroups = operationComponents;
-        }
+        $operationsVisibility = transactionGroups.map(() => false);
     }
 
-    $operationsVisibility = transactionGroups.map(() => false);
+    onMount(async () => {
+        await initializeTransactionData();
+    });
 </script>
 
 {#if isValidXdr}

src/lib/components/transaction/getMethodValue.ts

@@ -0,0 +1,86 @@
+import { xdr } from '@stellar/stellar-sdk';
+
+import { getAccountAddress, getContractAddress } from '../../soroban/GetContractFunctionInfo';
+
+export const getMethodValue = (arg: xdr.ScVal, type?: string): xdr.ScVal | string => {
+    type = (type && type.toLowerCase()) || '';
+    switch (type) {
+        case 'address':
+        case 'scvAddress'.toLowerCase():
+            if (arg.address().switch().name === 'scAddressTypeAccount')
+                return getAccountAddress(arg.address().accountId().ed25519().toString('hex'));
+            return getContractAddress(arg.address().contractId().toString('hex'));
+        case 'scvContractInstance'.toLowerCase():
+            return getContractAddress(arg.address().contractId().toString('hex'));
+        case 'bytes':
+        case 'scvBytes'.toLowerCase():
+        case 'scvBytesN'.toLowerCase():
+            return arg.bytes().toString('base64');
+        case 'symbol':
+        case 'scvSymbol'.toLowerCase():
+            return xdr.ScVal.scvSymbol(arg.sym().toString()).value()!.toString();
+        case 'scvBool'.toLowerCase():
+            return xdr.ScVal.scvBool(arg != null);
+        case 'i32'.toLowerCase():
+        case 'scvI32'.toLowerCase():
+            return arg.i32().toString();
+        case 'i64'.toLowerCase():
+        case 'scvI64'.toLowerCase():
+            return arg.i64().low.toString();
+        case 'i128'.toLowerCase():
+        case 'scvI128'.toLowerCase():
+            return arg.i128().lo().toString();
+        case 'i256'.toLowerCase():
+        case 'scvI256'.toLowerCase():
+            return arg.i256().loLo().toString();
+        case 'u64'.toLowerCase():
+        case 'scvU64'.toLowerCase():
+            return arg.u64().toString();
+        case 'u32'.toLowerCase():
+        case 'scvU32'.toLowerCase():
+            return arg.u32().toString();
+        case 'u128'.toLowerCase():
+        case 'scvU128'.toLowerCase():
+            return arg.u128().lo().toString();
+        case 'u256'.toLowerCase():
+        case 'scvU256'.toLowerCase():
+            return arg.u256().loLo().toString();
+        case 'timepoint'.toLowerCase():
+        case 'scvTimepoint'.toLowerCase():
+            return xdr.ScVal.scvTimepoint(new xdr.Uint64(arg.timepoint().high));
+        case 'duration'.toLowerCase():
+        case 'scvDuration'.toLowerCase():
+            return xdr.ScVal.scvDuration(new xdr.Uint64(arg.duration().high));
+        case 'boolean':
+            return xdr.ScVal.scvBool(arg.b());
+        case 'object':
+            return arg.bytes().toString('base64');
+        case 'scvString':
+            return xdr.ScVal.scvString(arg.str());
+        case 'map':
+        case 'scvMap'.toLowerCase():
+            return arg
+                .map()!
+                .map((a) => {
+                    const values = getMethodValue(a.val(), a.val().switch().name);
+                    const keys = getMethodValue(a.key(), a.key().switch().name);
+
+                    return ` ${JSON.stringify(keys)}: ${values} `;
+                })
+                .toString();
+
+        case 'scvVec'.toLowerCase():
+            return `[${arg
+                .vec()!
+                .map((param, index) => {
+                    return `${
+                        arg.vec()![index]?.switch().name !== 'scvMap'
+                            ? ` ${getMethodValue(param, param.switch().name)} `
+                            : ` {\n${getMethodValue(param, param.switch().name)}\n} `
+                    }`;
+                })
+                .toString()}]`;
+        default:
+            return arg.value()!.toString();
+    }
+};

src/lib/components/transaction/operations/DynamicOperationComponentFactory.ts

@@ -15,7 +15,6 @@ import CreateClaimableBalanceComponent from './createClaimableBalance/CreateClai
 import CreatePassiveSellOfferComponent from './createPassiveSellOffer/CreatePassiveSellOfferComponent';
 import EndSponsoringFutureReservesComponent from './endSponsoringFutureReserves/EndSponsoringFutureReservesComponent';
 import ExtendFootprintComponent from './extendFootprint/ExtendFootprintComponent';
-import InvokeHostFunctionComponent from './invokeHostFunction/InvokeHostFunctionComponent';
 import LiquidityPoolDepositComponent from './liquidityPoolDeposit/LiquidityPoolDepositComponent';
 import LiquidityPoolWithdrawComponent from './liquidityPoolWithdraw/LiquidityPoolWithdrawComponent';
 import ManageBuyOfferComponent from './manageBuyOffer/ManageBuyOfferComponent';
@@ -35,7 +34,7 @@ import RevokeTrustlineSponsorshipComponent from './revokeTrustLineSponsorship/Re
 import SetOptionsComponent from './setOptions/SetOptionsComponent';
 import SetTrustLineFlagsComponent from './setTrustLineFlags/SetTrustLineFlagsComponent';
 
-export default class DynamicOperationComponentFactory {
+export class DynamicOperationComponentFactory {
     create(tx: Transaction, operation: Operation): OperationComponent {
         let operationComponent;
 
@@ -154,9 +153,6 @@ export default class DynamicOperationComponentFactory {
             case 'clawbackClaimableBalance':
                 operationComponent = new ClawbackClaimableBalanceComponent(tx, operation);
                 break;
-            case 'invokeHostFunction':
-                operationComponent = new InvokeHostFunctionComponent(tx, operation);
-                break;
             case 'restoreFootprint':
                 operationComponent = new RestoreFootprintComponent(tx, operation);
                 break;

src/lib/components/transaction/operations/InvokeHostFunctionOperationComponentFactory.ts

@@ -0,0 +1,28 @@
+import type { Operation, Transaction } from 'stellar-sdk';
+
+import { getContractAddress, getContractMethodsParams } from '../../../soroban/GetContractFunctionInfo';
+import InvokeHostFunctionComponent from './invokeHostFunction/InvokeHostFunctionComponent';
+
+export class InvokeHostFunctionComponentFactory {
+    async create(tx: Transaction, operation: Operation): Promise<InvokeHostFunctionComponent> {
+        const funcTitle = (operation as Operation.InvokeHostFunction).func.invokeContract().functionName().toString();
+        const contractID = getContractAddress(
+            (operation as Operation.InvokeHostFunction).func
+                .invokeContract()
+                .contractAddress()
+                .contractId()
+                .toString('hex'),
+        );
+        const funcParameters = await getContractMethodsParams(contractID, funcTitle);
+
+        const operationComponent = new InvokeHostFunctionComponent(
+            tx,
+            operation as Operation.InvokeHostFunction,
+            funcParameters[0]!,
+            funcTitle,
+            contractID,
+        );
+
+        return operationComponent;
+    }
+}

src/lib/components/transaction/operations/Operation.svelte

@@ -79,6 +79,7 @@
     }
 
     .break-key {
+        white-space: pre-wrap;
         word-break: break-word;
         letter-spacing: 0.14px;
         line-height: 21px;

src/lib/components/transaction/operations/invokeHostFunction/InvokeHostFunctionComponent.ts

@@ -1,23 +1,45 @@
-import type { Operation, Transaction } from 'stellar-sdk';
-import { xdr } from 'stellar-sdk';
+import { Operation, Transaction, xdr } from '@stellar/stellar-sdk';
 
-import { InvokeHostFunction } from '../../../../../lib/stellar/InvokeHostFunction';
+import type { ContractFunctionInfo } from '../../../../soroban/ContractFunctionInfo.interface';
+import { getMethodValue } from '../../getMethodValue';
 import AbstractOperationComponent from '../AbstractOperationComponent';
 import type IOperationComponent from '../IOperationComponent';
 
 export default class InvokeHostFunctionComponent extends AbstractOperationComponent implements IOperationComponent {
-    constructor(tx: Transaction, operation: Operation.InvokeHostFunction) {
-        const funcValue = operation.func.value();
-        let functionType = InvokeHostFunction.UploadWasm;
+    constructor(
+        tx: Transaction,
+        operation: Operation.InvokeHostFunction,
+        funcParameter: ContractFunctionInfo,
+        funcTitle: string,
+        contractID: string,
+    ) {
+        const values = operation.func
+            .invokeContract()
+            .args()
+            .map((arg) => {
+                const methodValue = getMethodValue(arg, arg.switch().name);
 
-        if (funcValue instanceof xdr.InvokeContractArgs) functionType = InvokeHostFunction.InvokeContract;
-        if (funcValue instanceof xdr.CreateContractArgs) functionType = InvokeHostFunction.CreateContract;
+                if (methodValue instanceof xdr.ScVal) return methodValue.value();
+
+                return methodValue;
+            });
 
         super({
             title: 'OPERATION_INVOKE_HOST_FUNCTION',
             operationItems: [
                 { title: 'SOURCE_ACCOUNT', value: operation.source || tx.source, translatedValue: 'YOUR_ACCOUNT' },
-                { title: 'FUNCTION_TYPE', value: functionType },
+                { title: 'CONTRACT_ID', value: contractID },
+                { title: 'FUNCTION_TYPE', value: funcTitle },
+                (funcParameter.description ? true : undefined) && {
+                    title: 'DESCRIPTION',
+                    value: [funcParameter.description!],
+                },
+                (funcParameter.inputs.length >= 1 ? true : undefined) && {
+                    title: 'PARAMETERS',
+                    value: funcParameter?.inputs.map((arg, index) => {
+                        return `${arg.name} : ${values[index]!.toString().split(' ,')} `;
+                    }),
+                },
             ],
         });
     }

src/lib/i18n/ITranslation.ts

@@ -20,6 +20,7 @@ export interface ITranslation {
     CLOSE: string;
     CONFIRM: string;
     CONNECT_WITH_PRIVATE_KEY: string;
+    CONTRACT_ID: string;
     DATA: string;
     DESCRIPTION: string;
     DESTINATION_ASSET: string;
@@ -113,6 +114,7 @@ export interface ITranslation {
     OPERATIONS_LIST: string;
     PATH: string;
     PAY: string;
+    PARAMETERS: string;
     PREAUTH_TX: string;
     PRICE: string;
     PRIVATE_KEY: string;

src/lib/i18n/languages/english.json

@@ -20,6 +20,7 @@
     "CLOSE": "Close",
     "CONFIRM": "Confirm",
     "CONNECT_WITH_PRIVATE_KEY": "Connect",
+    "CONTRACT_ID": "Contract ID:",
     "DATA": "Data:",
     "DESCRIPTION": "Description:",
     "DESTINATION_ASSET": "Destination Asset:",
@@ -113,6 +114,7 @@
     "OPERATIONS_LIST": "Operations list",
     "PATH": "Path:",
     "PAY": "Pay",
+    "PARAMETERS": "Parameters:",
     "PREAUTH_TX": "preAuthTx:",
     "PRICE": "Price:",
     "PRIVATE_KEY": "Private Key",

src/lib/i18n/languages/spanish.json

@@ -20,6 +20,7 @@
     "CLOSE": "Cerrar",
     "CONFIRM": "Confirmar",
     "CONNECT_WITH_PRIVATE_KEY": "Conectar",
+    "CONTRACT_ID": "ID de Contrato:",
     "DATA": "Data:",
     "DESCRIPTION": "Descripción:",
     "DESTINATION_ASSET": "Activo que recibe la cuenta de destino:",
@@ -113,6 +114,7 @@
     "OPERATIONS_LIST": "Lista de operaciones",
     "PATH": "Ruta:",
     "PAY": "Pagar",
+    "PARAMETERS": "Parametros:",
     "PREAUTH_TX": "preAuthTx:",
     "PRICE": "Precio:",
     "PRIVATE_KEY": "Llave Privada",