Skip to content

Commit 6d75baa

Browse files
xnylxnyl
committedDec 9, 2020
feat(fe) tx deletion logic done
·
3.3.0-rc10.0.1-test
1 parent e30c925 commit 6d75baa

File tree

5 files changed

+134
-37
lines changed

5 files changed

+134
-37
lines changed
 

‎src/components/icons/IconHelpers.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const useCircleIconStyles = makeStyles((theme) => ({
6363
backgroundColor: theme.customColors.grayLight,
6464
},
6565
outlined: {
66-
border: `1px solid ${theme.palette.grey["300"]}`,
66+
border: `1px solid ${theme.palette.grey["700"]}`,
6767
},
6868
}));
6969

‎src/features/mint/steps/MintProcessStep.tsx

+23-6
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@ import {
3535
import { Debug } from "../../../components/utils/Debug";
3636
import { WalletStatus } from "../../../components/utils/types";
3737
import { WalletConnectionProgress } from "../../../components/wallet/WalletHelpers";
38-
import { usePageTitle } from "../../../providers/TitleProviders";
3938
import { paths } from "../../../pages/routes";
4039
import { useSelectedChainWallet } from "../../../providers/multiwallet/multiwalletHooks";
41-
import { usePaperTitle } from "../../../providers/TitleProviders";
40+
import { useNotifications } from "../../../providers/Notifications";
41+
import { usePageTitle, usePaperTitle } from "../../../providers/TitleProviders";
42+
import { db } from "../../../services/database/database";
4243
import {
4344
getChainConfigByRentxName,
4445
getCurrencyConfigByRentxName,
@@ -49,6 +50,7 @@ import {
4950
BookmarkPageWarning,
5051
ProgressStatus,
5152
} from "../../transactions/components/TransactionsHelpers";
53+
import { removeTransaction } from "../../transactions/transactionsSlice";
5254
import {
5355
createTxQueryString,
5456
getTxPageTitle,
@@ -75,6 +77,7 @@ export const MintProcessStep: FunctionComponent<RouteComponentProps> = ({
7577
location,
7678
}) => {
7779
const dispatch = useDispatch();
80+
const { showNotification } = useNotifications();
7881
const chain = useSelector($chain);
7982
const { status } = useSelectedChainWallet();
8083
const walletConnected = status === WalletStatus.CONNECTED;
@@ -94,13 +97,22 @@ export const MintProcessStep: FunctionComponent<RouteComponentProps> = ({
9497
history.goBack();
9598
}, [history]);
9699

97-
const [menuOpened, setMenuOpened] = useState(true); //TODO: CRIT: false
100+
const [menuOpened, setMenuOpened] = useState(false);
98101
const handleMenuClose = useCallback(() => {
99102
setMenuOpened(false);
100103
}, []);
101104
const handleMenuOpen = useCallback(() => {
102-
setMenuOpened(true);
103-
}, []);
105+
if (walletConnected) {
106+
setMenuOpened(true);
107+
}
108+
}, [walletConnected]);
109+
const handleDeleteTx = useCallback(() => {
110+
db.deleteTx(tx).then(() => {
111+
dispatch(removeTransaction(tx));
112+
showNotification(`Transaction ${tx.id} deleted.`);
113+
history.push(paths.MINT);
114+
});
115+
}, [dispatch, history, showNotification, tx]);
104116

105117
useEffect(() => {
106118
if (txState?.reloadTx) {
@@ -191,7 +203,12 @@ export const MintProcessStep: FunctionComponent<RouteComponentProps> = ({
191203
{txState?.newTx && (
192204
<BookmarkPageWarning onClosed={onBookmarkWarningClosed} />
193205
)}
194-
<TransactionMenu open={menuOpened} onClose={handleMenuClose} />
206+
<TransactionMenu
207+
tx={tx}
208+
open={menuOpened}
209+
onClose={handleMenuClose}
210+
onDeleteTx={handleDeleteTx}
211+
/>
195212
</>
196213
);
197214
};

‎src/features/release/steps/ReleaseProcessStep.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ export const ReleaseProcessStep: FunctionComponent<RouteComponentProps> = (
8585
</PaperNav>
8686
<PaperTitle>{paperTitle}</PaperTitle>
8787
<PaperActions>
88-
<ToggleIconButton variant="settings" />
8988
<ToggleIconButton variant="notifications" />
89+
<ToggleIconButton variant="settings" />
9090
</PaperActions>
9191
</PaperHeader>
9292
<PaperContent bottomPadding>

‎src/features/transactions/components/TransactionMenu.tsx

+107-26
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@ import {
66
MenuItem,
77
MenuItemProps,
88
Typography,
9+
withStyles,
910
} from "@material-ui/core";
10-
import classNames from 'classnames'
11-
import React, { FunctionComponent, useCallback } from "react";
11+
import { GatewaySession } from "@renproject/ren-tx";
12+
import classNames from "classnames";
13+
import React, { FunctionComponent, useCallback, useState } from "react";
14+
import {
15+
ActionButton,
16+
ActionButtonWrapper,
17+
} from "../../../components/buttons/Buttons";
1218
import { CircleIcon } from "../../../components/icons/IconHelpers";
1319
import {
1420
AddIcon,
15-
BitcoinIcon,
1621
CustomSvgIconComponent,
1722
DeleteIcon,
1823
TxSettingsIcon,
@@ -83,44 +88,120 @@ const useTransactionMenuStyles = makeStyles((theme) => ({
8388
type TransactionMenuProps = {
8489
open: boolean;
8590
onClose: () => void;
91+
onDeleteTx: () => void;
92+
tx: GatewaySession;
8693
};
8794

8895
export const TransactionMenu: FunctionComponent<TransactionMenuProps> = ({
8996
open,
9097
onClose,
98+
onDeleteTx,
99+
tx,
91100
}) => {
92101
const styles = useTransactionMenuStyles();
93102
const handleClose = useCallback(() => {
94103
if (onClose) {
95104
onClose();
96105
}
97106
}, [onClose]);
107+
const [confirmOpen, setConfirmOpen] = useState(false);
108+
const handleConfirmClose = useCallback(() => {
109+
setConfirmOpen(false);
110+
}, []);
111+
const handleDeleteWithConfirm = useCallback(() => {
112+
setConfirmOpen(true);
113+
}, []);
114+
98115
return (
99-
<NestedDrawer open={open} onClose={handleClose} className={styles.root}>
100-
<BridgeModalTitle className={styles.modalTitle} onClose={handleClose}>
101-
<ListItemIcon className={styles.titleIconWrapper}>
102-
<CircleIcon Icon={TxSettingsIcon} fontSize="small" variant="solid" />
103-
</ListItemIcon>
104-
<Typography variant="inherit">Transaction Menu</Typography>
105-
</BridgeModalTitle>
106-
<div className={styles.menuItems}>
107-
<TransactionMenuItem Icon={AddIcon} disabled>
108-
Insert/update transaction
109-
</TransactionMenuItem>
110-
<TransactionMenuItem Icon={DeleteIcon}>
111-
Delete transaction
112-
</TransactionMenuItem>
113-
</div>
114-
<PaperContent paddingVariant="medium" className={styles.transferId}>
115-
<Typography variant="inherit">
116-
Transfer ID: TODO: CRIT: add here
116+
<>
117+
<NestedDrawer open={open} onClose={handleClose} className={styles.root}>
118+
<BridgeModalTitle className={styles.modalTitle} onClose={handleClose}>
119+
<ListItemIcon className={styles.titleIconWrapper}>
120+
<CircleIcon
121+
Icon={TxSettingsIcon}
122+
fontSize="small"
123+
variant="solid"
124+
/>
125+
</ListItemIcon>
126+
<Typography variant="inherit">Transaction Menu</Typography>
127+
</BridgeModalTitle>
128+
<div className={styles.menuItems}>
129+
<TransactionMenuItem Icon={AddIcon} disabled>
130+
Insert/update transaction
131+
</TransactionMenuItem>
132+
<TransactionMenuItem
133+
Icon={DeleteIcon}
134+
onClick={handleDeleteWithConfirm}
135+
>
136+
Delete transaction
137+
</TransactionMenuItem>
138+
</div>
139+
<PaperContent paddingVariant="medium" className={styles.transferId}>
140+
<Typography variant="inherit">Transfer ID: {tx.id}</Typography>
141+
</PaperContent>
142+
<Divider />
143+
<PaperContent bottomPadding topPadding paddingVariant="medium">
144+
<Button variant="outlined" size="small" disabled>
145+
Report an Issue
146+
</Button>
147+
</PaperContent>
148+
</NestedDrawer>
149+
<ConfirmTransactionDeletion
150+
open={confirmOpen}
151+
onClose={handleConfirmClose}
152+
onDeleteTx={onDeleteTx}
153+
/>
154+
</>
155+
);
156+
};
157+
158+
type ConfirmTransactionDeletionProps = {
159+
open: boolean;
160+
onClose: () => void;
161+
onDeleteTx: () => void;
162+
};
163+
164+
const RedButton = withStyles((theme) => ({
165+
root: {
166+
color: theme.palette.error.main,
167+
},
168+
}))(Button);
169+
170+
export const ConfirmTransactionDeletion: FunctionComponent<ConfirmTransactionDeletionProps> = ({
171+
open,
172+
onClose,
173+
onDeleteTx,
174+
}) => {
175+
return (
176+
<NestedDrawer title="Delete a Transaction" open={open} onClose={onClose}>
177+
<PaperContent topPadding>
178+
<Typography variant="h5" align="center" gutterBottom>
179+
Are you sure?
180+
</Typography>
181+
<Typography
182+
variant="body2"
183+
align="center"
184+
color="textSecondary"
185+
gutterBottom
186+
>
187+
If you have already sent your assets you will lose them forever if you
188+
remove the transaction.
117189
</Typography>
118190
</PaperContent>
119-
<Divider />
120-
<PaperContent bottomPadding topPadding paddingVariant="medium">
121-
<Button variant="outlined" size="small">
122-
Report an Issue
123-
</Button>
191+
<PaperContent bottomPadding>
192+
<ActionButtonWrapper>
193+
<RedButton
194+
variant="text"
195+
color="inherit"
196+
startIcon={<DeleteIcon />}
197+
onClick={onDeleteTx}
198+
>
199+
Remove Transaction
200+
</RedButton>
201+
</ActionButtonWrapper>
202+
<ActionButtonWrapper>
203+
<ActionButton onClick={onClose}>Cancel</ActionButton>
204+
</ActionButtonWrapper>
124205
</PaperContent>
125206
</NestedDrawer>
126207
);

‎src/theme/palette.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import createPalette, { Palette } from "@material-ui/core/styles/createPalette";
1+
import createPalette, { Palette } from '@material-ui/core/styles/createPalette'
22
import {
33
blue,
44
blueDark,
55
blueLight,
66
graphite,
77
graphiteDark,
88
graphiteLight,
9-
grayLight,
109
strokeDefault,
1110
textDark,
1211
textDisabled,
1312
textLighter,
1413
white,
15-
} from "./colors";
14+
} from './colors'
1615

1716
const basePalette = {
1817
primary: {

0 commit comments

Comments
 (0)
Please sign in to comment.