explorer/app/components/account/ConcurrentMerkleTreeCard.tsx at a3b1135248d2079c921960795905ee7d64c4aa44 · hoodieshq/explorer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { ConcurrentMerkleTreeAccount } from '@solana/spl-account-compression';
import { PublicKey } from '@solana/web3.js';

import { toBuffer } from '@/app/shared/lib/bytes';

import { Address } from '../common/Address';
import { Slot } from '../common/Slot';
import { TableCardBody } from '../common/TableCardBody';

export function ConcurrentMerkleTreeCard({ data }: { data: Uint8Array }) {
    const cmt = ConcurrentMerkleTreeAccount.fromBuffer(toBuffer(data));
    const authority = cmt.getAuthority();
    const root = cmt.getCurrentRoot();
    const seq = cmt.getCurrentSeq();
    const canopyDepth = cmt.getCanopyDepth();
    const maxBufferSize = cmt.getMaxBufferSize();
    const treeHeight = cmt.getMaxDepth();
    const creationSlot = cmt.getCreationSlot();
    const rightMostIndex = cmt.tree.rightMostPath.index;
    return (
        <>
            <div className="card">
                <div className="card-header">
                    <div className="row align-items-center">
                        <div className="col">
                            <h3 className="card-header-title">Concurrent Merkle Tree</h3>
                        </div>
                    </div>
                </div>

                <TableCardBody>
                    <tr>
                        <td>Authority</td>
                        <td className="text-lg-end">
                            <Address pubkey={authority} alignRight raw />
                        </td>
                    </tr>
                    <tr>
                        <td>Creation Slot</td>
                        <td className="text-lg-end">
                            <Slot slot={creationSlot.toNumber()} link />
                        </td>
                    </tr>
                    <tr>
                        <td>Max Depth</td>
                        <td className="text-lg-end">
                            <span className="text-monospace">{treeHeight}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Max Buffer Size</td>
                        <td className="text-lg-end">
                            <span className="text-monospace">{maxBufferSize}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Canopy Depth</td>
                        <td className="text-lg-end">
                            <span className="text-monospace">{canopyDepth}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Current Sequence Number</td>
                        <td className="text-lg-end">
                            <span className="text-monospace">{seq.toString()}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Current Root</td>
                        <td className="text-lg-end">
                            <Address pubkey={new PublicKey(root)} alignRight raw />
                        </td>
                    </tr>
                    <tr>
                        <td>Current Number of Leaves</td>
                        <td className="text-lg-end">
                            <span className="text-monospace">{rightMostIndex}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Remaining Leaves</td>
                        <td className="text-lg-end">
                            <span className="text-monospace">{Math.pow(2, treeHeight) - rightMostIndex}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Max Possible Leaves</td>
                        <td className="text-lg-end">
                            <span className="text-monospace">{Math.pow(2, treeHeight)}</span>
                        </td>
                    </tr>
                </TableCardBody>
            </div>
        </>
    );
}