-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
79 lines (74 loc) · 2.76 KB
/
index.tsx
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
import { Principal } from "@dfinity/principal";
import { Txn, getTransactionHistory } from "../../backend";
import {
CloseIcon,
TxnHistoryEmpty,
TxnHistoryModalContent,
TxnHistoryModalHeader,
TxnHistoryModalWrapper,
} from "./style";
import { Text } from "../../ui-kit/typography";
import { COLOR_GRAY_140, COLOR_GRAY_190, COLOR_WHITE, FONT_WEIGHT_MEDIUM, FONT_WEIGHT_REGULAR } from "../../ui-kit";
import { For, Match, Switch, createSignal, onMount } from "solid-js";
import { TxnHistoryEntry } from "../txn-history-entry";
import { Button, EButtonKind } from "../../ui-kit/button";
import { eventHandler } from "../../utils";
import { Modal } from "../modal";
import { EIconKind, Icon } from "../../ui-kit/icon";
export interface ITxnHistoryModalProps {
tokenId: string;
accountPrincipalId: string | Principal;
decimals: number;
symbol: string;
onShowMore: () => void;
onClose: () => void;
}
export function TxnHistoryModal(props: ITxnHistoryModalProps) {
const [history, setHistory] = createSignal<Txn[] | undefined>(undefined);
onMount(() => {
getTransactionHistory({ tokenId: props.tokenId, accountPrincipalId: props.accountPrincipalId, take: 2 }).then(
setHistory,
);
});
return (
<Modal>
<TxnHistoryModalWrapper onClick={eventHandler((e) => e.stopPropagation())}>
<Icon kind={EIconKind.Close} onClick={props.onClose} classList={{ [CloseIcon]: true }} />
<TxnHistoryModalHeader>
<Text size={36} weight={FONT_WEIGHT_MEDIUM} color={COLOR_WHITE} letterSpacing={-1}>
Transaction History
</Text>
<Text size={16} weight={FONT_WEIGHT_REGULAR} color={COLOR_GRAY_140}>
{typeof props.accountPrincipalId === "string"
? props.accountPrincipalId
: props.accountPrincipalId.toText()}
</Text>
</TxnHistoryModalHeader>
<Switch>
<Match when={!history()}>
<TxnHistoryEmpty>
<Icon kind={EIconKind.Loader} />
</TxnHistoryEmpty>
</Match>
<Match when={history()!.length === 0}>
<TxnHistoryEmpty>
<Text size={16} color={COLOR_GRAY_190}>
Empty
</Text>
</TxnHistoryEmpty>
</Match>
<Match when={history()!.length > 0}>
<TxnHistoryModalContent>
<For each={history()}>
{(txn) => (
<TxnHistoryEntry txn={txn} decimals={props.decimals} symbol={props.symbol} defaultCollapsed />
)}
</For>
</TxnHistoryModalContent>
<Button kind={EButtonKind.Primary} label="Show All" text="Show All" onClick={props.onShowMore} />
</Match>
</Switch>
</TxnHistoryModalWrapper>
</Modal>
);
}