/
App.tsx
105 lines (95 loc) · 3.68 KB
/
App.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
import { BaseTransaction } from "@gnosis.pm/safe-apps-sdk";
import { Button, Card, Divider, Loader, Text } from "@gnosis.pm/safe-react-components";
import { setUseWhatChange } from "@simbathesailor/use-what-changed";
import React, { useCallback, useState } from "react";
import styled from "styled-components";
import { FAQModal } from "./components/FAQModal";
import { Header } from "./components/Header";
import { Summary } from "./components/Summary";
import { CSVForm } from "./components/assets/CSVForm";
import { useTokenList, networkMap } from "./hooks/token";
import { AssetTransfer, CollectibleTransfer, Transfer } from "./parser/csvParser";
import { buildAssetTransfers, buildCollectibleTransfers } from "./transfers/transfers";
setUseWhatChange(process.env.NODE_ENV === "development");
const App: React.FC = () => {
const { isLoading } = useTokenList();
const { safe } = useSafeAppsSDK();
const [tokenTransfers, setTokenTransfers] = useState<Transfer[]>([]);
const [submitting, setSubmitting] = useState(false);
const [parsing, setParsing] = useState(false);
const { sdk } = useSafeAppsSDK();
const assetTransfers = tokenTransfers.filter(
(transfer) => transfer.token_type === "erc20" || transfer.token_type === "native",
) as AssetTransfer[];
const collectibleTransfers = tokenTransfers.filter(
(transfer) => transfer.token_type === "erc1155" || transfer.token_type === "erc721",
) as CollectibleTransfer[];
const submitTx = useCallback(async () => {
setSubmitting(true);
try {
const txs: BaseTransaction[] = [];
txs.push(...buildAssetTransfers(assetTransfers));
txs.push(...buildCollectibleTransfers(collectibleTransfers));
console.log(`Encoded ${txs.length} transfers.`);
const sendTxResponse = await sdk.txs.send({ txs });
const safeTx = await sdk.txs.getBySafeTxHash(sendTxResponse.safeTxHash);
console.log({ safeTx });
} catch (e) {
console.error(e);
}
setSubmitting(false);
}, [assetTransfers, collectibleTransfers, sdk.txs]);
return (
<Container>
<Header />
{networkMap.has(safe.chainId) ? (
<>
{isLoading ? (
<>
<Loader size={"lg"} />
<Text size={"lg"}>Loading Tokenlist...</Text>
</>
) : (
<Card className="cardWithCustomShadow">
<CSVForm updateTransferTable={setTokenTransfers} setParsing={setParsing} />
<Divider />
<Summary assetTransfers={assetTransfers} collectibleTransfers={collectibleTransfers} />
{submitting ? (
<>
<Loader size="md" />
<br />
<Button size="lg" color="secondary" onClick={() => setSubmitting(false)}>
Cancel
</Button>
</>
) : (
<Button
style={{ alignSelf: "flex-start", marginTop: 16, marginBottom: 16 }}
size="lg"
color="primary"
onClick={submitTx}
disabled={parsing || tokenTransfers.length + collectibleTransfers.length === 0}
>
{parsing ? <Loader size="sm" color="primaryLight" /> : "Submit"}
</Button>
)}
</Card>
)}
</>
) : (
<Text size={"xl"}>Network with chainId {safe.chainId} not yet supported.</Text>
)}
<FAQModal />
</Container>
);
};
const Container = styled.div`
margin-left: 16px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: left;
width: 100%;
`;
export default App;