diff --git a/src/components/BatchTx/BatchCsv.tsx b/src/components/BatchTx/BatchCsv.tsx
index c42afb6..15b1851 100644
--- a/src/components/BatchTx/BatchCsv.tsx
+++ b/src/components/BatchTx/BatchCsv.tsx
@@ -3,11 +3,13 @@ import { Input, Typography } from 'antd';
import styled from 'styled-components';
import { useBatchParser } from './useBatchParser';
+import { useBatchConfig } from './useBatchConfig';
const { TextArea } = Input;
function BatchCsv() {
const { rawInput, setRawInput } = useBatchParser();
+ const { selectedDelimiter } = useBatchConfig();
const handleChange = useCallback(
(e) => {
@@ -18,7 +20,7 @@ function BatchCsv() {
return (
- Paste CSV data
+ Paste {selectedDelimiter?.fileType || ''} data
);
diff --git a/src/components/BatchTx/BatchPreview.tsx b/src/components/BatchTx/BatchPreview.tsx
index d8f0569..6ab3966 100644
--- a/src/components/BatchTx/BatchPreview.tsx
+++ b/src/components/BatchTx/BatchPreview.tsx
@@ -10,17 +10,27 @@ function BatchPreview() {
const { parsedTxs } = useBatchParser();
const tableColumns = useMemo(() => {
- return selectedColumns.map((col) => ({
+ const dynamicCols = selectedColumns.map((col) => ({
title: col.label,
key: col.name,
dataIndex: col.name,
render: (field: IParsedColumn) => {field?.formattedValue},
}));
+ const allCols = [
+ {
+ title: 'ID',
+ key: 'id',
+ dataIndex: 'id',
+ },
+ ...dynamicCols,
+ ];
+ return allCols;
}, [selectedColumns]);
const rowsWithKey = useMemo(() => {
return parsedTxs.map((row, index) => ({
key: index,
+ id: index + 1,
...row,
}));
}, [parsedTxs]);
diff --git a/src/components/BatchTx/BatchTotalAmount.tsx b/src/components/BatchTx/BatchTotalAmount.tsx
index cbe1006..00b1ebd 100644
--- a/src/components/BatchTx/BatchTotalAmount.tsx
+++ b/src/components/BatchTx/BatchTotalAmount.tsx
@@ -28,13 +28,22 @@ function BatchTotalAmount() {
return (
-
- Total Amount: {utils.formatUnits(totalAmount, decimals)} {assetType}
+
+ Total{' '}
+
+ {utils.formatUnits(totalAmount, decimals)} {assetType}
+ {' '}
+ in {parsedTxs.length} txs
);
}
-const Container = styled.div``;
+const Container = styled.div`
+ .title {
+ font-weight: normal;
+ text-align: left;
+ }
+`;
export default BatchTotalAmount;
diff --git a/src/components/BatchTx/useBatchConfig.tsx b/src/components/BatchTx/useBatchConfig.tsx
index b14724d..3d09913 100644
--- a/src/components/BatchTx/useBatchConfig.tsx
+++ b/src/components/BatchTx/useBatchConfig.tsx
@@ -30,6 +30,7 @@ interface IBatchDelimiterConfig {
name: BatchDelimiter;
label: string;
symbol: string;
+ fileType: string;
}
const batchNetworks: {
@@ -92,11 +93,13 @@ const batchDelimiters: {
name: 'tab',
label: 'Tab',
symbol: '\t',
+ fileType: 'TSV',
},
comma: {
name: 'comma',
label: 'Comma',
symbol: ',',
+ fileType: 'CSV',
},
};
diff --git a/src/components/BatchTx/useBatchParser.ts b/src/components/BatchTx/useBatchParser.ts
index bb40bca..cfad109 100644
--- a/src/components/BatchTx/useBatchParser.ts
+++ b/src/components/BatchTx/useBatchParser.ts
@@ -44,7 +44,14 @@ const useBatchParser = (): IBatchParserHook => {
const state = useBatchParserStore();
const { columns, selectedColumns, selectedDelimiter, selectedAsset, isValidConfig } = useBatchConfig();
- const setRawInput = useCallback((rawInput: string) => useBatchParserStore.setState({ rawInput }), []);
+ const setRawInput = useCallback((input: string) => {
+ const rawInput = input
+ .split('\n')
+ .map((row) => row.trim())
+ .filter(Boolean)
+ .join('\n');
+ useBatchParserStore.setState({ rawInput });
+ }, []);
useEffect(() => {
if (!isValidConfig || !state.rawInput) {