<div class="d-block my-4 btn btn-lg bgdarkandwhite border p-2">
    <div class="tfs mt-0 row m-0 p-0">
        <div class="col-6 darkandgray my-2" align="left">Transaction ID</div>

        <div class="col-6 my-2 tfss" align="right">
            {{ $transaction->short_hash }} <x-widgets.copy :text="$transaction->hash" />
        </div>

        <div class="col-4 darkandgray my-2" align="left">From</div>
        <div class="col-8 my-2 maxtotal tfss" align="right">{{ $transaction->details->from }}</div>
        
        <div class="col-4 darkandgray my-2" align="left">To</div>
        <div class="col-8 my-2 maxtotal tfss" align="right">{{ $transaction->details->to }}</div>

        <div class="col-4 darkandgray my-2" align="left">Amount Swapped</div>
        <div class="col-8 my-2 maxtotal tfss" align="right">
            {{ number_format($transaction->details->from_coin_amount, 4) }} {{ $transaction->from_coin->symbol }}
        </div>

        <div class="col-4 darkandgray my-2" align="left">Amount Received</div>
        <div class="col-8 my-2 maxtotal tfss" align="right">
            {{ number_format($transaction->details->to_coin_amount, 4) }} {{ $transaction->to_coin->symbol }}
        </div>

        <div class="col-4 darkandgray my-2" align="left">Slippage</div>
        <div class="col-8 my-2 maxtotal tfss" align="right">0</div>
    </div>
</div>