Transactions

Template Structure

Transaction Filtering Form

• <form action="transactions">: The form action directs to the "transactions" URL, where the filtered results will be submitted.

  • <div class="row mb-2">: Bootstrap row with margin-bottom.

    • <div class="col-md-5">: Column for transaction type and currency filters.

      • <label> Select Transaction Type </label>: Label for the transaction type dropdown.

      • <select name="type" class="form-select" onchange="if (this.value) window.location.href=this.value">: Dropdown to select transaction type. On change, it redirects to the selected URL.

        • <option value="transactions">All transactions</option>: Option to view all transactions.

        • {foreach from=$options item=label key=key}: Loops through available options to populate the dropdown.

          • <option value="{$label.link}" {if $key == $type}selected{/if}>{$label.name}</option>: Sets the option value and marks it as selected if it matches the current type.

      • <label> Select Currency</label>: Label for the currency dropdown.

      • <select name="cid" class="form-select">: Dropdown to select currency.

        • <option value="-1">All eCurrencies</option>: Option to view all eCurrencies.

        • {section name=p loop=$ps}: Loops through available currencies to populate the dropdown.

          • <option value={$ps[p].id} >{$ps[p].name}</option>: Sets the option value and name for each currency.

    • <div class="col-md-5">: Column for date range filters.

      • <label>From Date </label>: Label for the start date input.

      • <input type="date" name="from" value="{$startdate}" class="form-control" />: Input for selecting the start date with a default value.

      • <label> To Date </label>: Label for the end date input.

      • <input type="date" name="to" value="{$enddate}" class="form-control" />: Input for selecting the end date with a default value.

    • <div class="col-md-2 d-flex align-items-center">: Column for the submit button.

      • <button type="submit" class="btn btn-primary">Submit</button>: Submit button for the form.

Transaction Table

• <div class="table-responsive">: Container for a responsive table.

  • <table class="table table-hover table-sm mb-0 table-bordered table-striped">: Table with hover effect, small size, borders, and striped rows.

    • <thead class="bg-primary text-white">: Table header with a primary background color and white text.

      • <tr>: Table row for headers.

        • <th>Type</th>: Column header for transaction type.

        • <th>Amount</th>: Column header for transaction amount.

        • <th>Date</th>: Column header for transaction date.

        • <th>Status</th>: Column header for transaction status.

    • <tbody>: Table body with transaction rows.

      • {foreach from=$rows key=key item=value}: Loops through the transactions to populate the table rows.

        • <tr>: Table row for each transaction.

          • <td>{$value.type}</td>: Displays the transaction type.

          • <td>{$value.amount|fiat:$value.cid} ~ ${$value.amount|currencytousd:$value.symbol}</td>: Displays the amount in both fiat and USD.

          • <td>{$value.datetime}</td>: Displays the transaction date and time.

          • <td>: Displays the status of the transaction with different badges and potentially a countdown timer if applicable.

            • {if ($settings.withdraw.delay_instant_withdraw || $settings.withdraw.delay_auto_withdraw) && $value.status == '0'}: Checks if the transaction is pending and has a delay.

              • <span class="badge bg-warning" id="time{$value.id}"></span>: Displays a warning badge with a countdown timer.

              • <script>: JavaScript to handle the countdown timer.

                • var countDown{$value.id} = new Date("{$value.delay_time}").getTime();: Sets the countdown timer based on the delay time.

                • var time{$value.id}a = setInterval(function() { ... }, 1000);: Updates the timer every second.

            • {elseif $value.status == '0'}: Displays a pending status if the transaction is still processing.

              • <span class="badge bg-primary">pending</span>: Displays a primary badge for pending transactions.

            • {if $value.status == '1'}: Displays a completed status if the transaction is successful.

              • <span class="badge bg-success">Completed</span>: Displays a success badge for completed transactions.

            • {if $value.status == '2'}: Displays a cancelled status if the transaction is cancelled.

              • <span class="badge bg-secondary">Cancelled</span>: Displays a secondary badge for cancelled transactions.

            • {if $settings.withdraw.cancel_withdraw && $value.status == '0'}: Displays a cancel link if the cancellation option is enabled and the transaction is pending.

              • <a class="badge bg-danger" href="{$settings.link.cancel_withdraw|default:'cancel_withdraw'}?id={$value.id}">Cancel</a>: Provides a link to cancel the transaction.

          • </td>: Closes the status column.

        • </tr>: Closes the transaction row.

        • <tr>: Table row for additional details.

          • <td colspan="4">{$value.detail}</td>: Displays additional transaction details spanning all columns.

      • {foreachelse}: Handles the case when no transactions are available.

        • <tr>: Table row for "No transactions found" message.

          • <td colspan=4 align=center>No transactions found</td>: Displays a message indicating no transactions are found.

    • </tbody>: Closes the table body.

  • {$paginator}: Includes pagination controls if available.