diff --git a/new-lamassu-admin/src/components/DeleteDialog.js b/new-lamassu-admin/src/components/DeleteDialog.js
new file mode 100644
index 00000000..3a659dd2
--- /dev/null
+++ b/new-lamassu-admin/src/components/DeleteDialog.js
@@ -0,0 +1,76 @@
+import {
+ Dialog,
+ DialogActions,
+ DialogContent,
+ makeStyles
+} from '@material-ui/core'
+import React from 'react'
+
+import { Button, IconButton } from 'src/components/buttons'
+import { H4, P } from 'src/components/typography'
+import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+import { spacer } from 'src/styling/variables'
+
+const useStyles = makeStyles({
+ dialogContent: {
+ width: 434,
+ padding: spacer * 2,
+ paddingRight: spacer * 3.5
+ },
+ dialogTitle: {
+ padding: spacer * 2,
+ paddingRight: spacer * 1.5,
+ display: 'flex',
+ 'justify-content': 'space-between',
+ '& > h4': {
+ margin: 0
+ },
+ '& > button': {
+ padding: 0,
+ marginTop: -(spacer / 2)
+ }
+ },
+ dialogActions: {
+ padding: spacer * 4,
+ paddingTop: spacer * 2
+ }
+})
+
+export const DialogTitle = ({ children, close }) => {
+ const classes = useStyles()
+ return (
+
+ {children}
+ {
+
+
+
+ }
+
+ )
+}
+
+export const DeleteDialog = ({
+ title = 'Confirm Delete',
+ open = false,
+ setDeleteDialog,
+ onConfirmed,
+ item = 'item',
+ confirmationMessage = `Are you sure you want to delete this ${item}?`
+}) => {
+ const classes = useStyles()
+
+ return (
+
+ )
+}
diff --git a/new-lamassu-admin/src/components/editableTable/Row.js b/new-lamassu-admin/src/components/editableTable/Row.js
index 4bcbece3..730f617c 100644
--- a/new-lamassu-admin/src/components/editableTable/Row.js
+++ b/new-lamassu-admin/src/components/editableTable/Row.js
@@ -2,8 +2,9 @@ import { makeStyles } from '@material-ui/core'
import classnames from 'classnames'
import { Field, useFormikContext } from 'formik'
import * as R from 'ramda'
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
+import { DeleteDialog } from 'src/components/DeleteDialog'
import { Link, IconButton } from 'src/components/buttons'
import { Td, Tr } from 'src/components/fake-table/Table'
import { Switch } from 'src/components/inputs'
@@ -44,6 +45,13 @@ const ActionCol = ({ disabled, editing }) => {
resetForm()
}
+ const [deleteDialog, setDeleteDialog] = useState(false)
+
+ const onConfirmed = () => {
+ onDelete(values.id)
+ setDeleteDialog(false)
+ }
+
return (
<>
{editing && (
@@ -74,9 +82,20 @@ const ActionCol = ({ disabled, editing }) => {
)}
{!editing && enableDelete && (
- onDelete(values.id)}>
+ {
+ setDeleteDialog(true)
+ }}>
{disabled ? : }
+ {
+
+ }
|
)}
{!editing && enableToggle && (
diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js
index f5f9dd6d..9fe3ff97 100644
--- a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js
+++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js
@@ -1,7 +1,8 @@
import { makeStyles } from '@material-ui/core/styles'
import * as R from 'ramda'
-import React from 'react'
+import React, { useState } from 'react'
+import { DeleteDialog } from 'src/components/DeleteDialog'
import { IconButton } from 'src/components/buttons'
import DataTable from 'src/components/tables/DataTable'
import { Label1 } from 'src/components/typography'
@@ -15,6 +16,17 @@ const useStyles = makeStyles(styles)
const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
const classes = useStyles()
+ const [deleteDialog, setDeleteDialog] = useState(false)
+ const [toBeDeleted, setToBeDeleted] = useState()
+
+ const onConfirmed = () => {
+ handleDeleteEntry(
+ R.path(['cryptoCode'], toBeDeleted),
+ R.path(['address'], toBeDeleted)
+ )
+ setDeleteDialog(false)
+ }
+
const elements = [
{
name: 'address',
@@ -37,12 +49,10 @@ const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
view: it => (
- handleDeleteEntry(
- R.path(['cryptoCode'], it),
- R.path(['address'], it)
- )
- }>
+ onClick={() => {
+ setDeleteDialog(true)
+ setToBeDeleted(it)
+ }}>
)
@@ -53,12 +63,19 @@ const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
: data[R.keys(data)[0]]
return (
-
+ <>
+
+
+ >
)
}