chore: use monorepo organization

packages/admin-ui/src/pages/Blacklist/BlacklistTable.jsx

@@ -0,0 +1,78 @@
+import IconButton from '@mui/material/IconButton'
+import SvgIcon from '@mui/material/SvgIcon'
+import * as R from 'ramda'
+import React, { useState } from 'react'
+import { DeleteDialog } from 'src/components/DeleteDialog'
+import DataTable from 'src/components/tables/DataTable'
+import CopyToClipboard from 'src/components/CopyToClipboard.jsx'
+import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
+
+const BlacklistTable = ({
+  data,
+  handleDeleteEntry,
+  errorMessage,
+  setErrorMessage,
+  deleteDialog,
+  setDeleteDialog
+}) => {
+  const [toBeDeleted, setToBeDeleted] = useState()
+
+  const elements = [
+    {
+      name: 'address',
+      header: 'Address',
+      width: 1070,
+      textAlign: 'left',
+      size: 'sm',
+      view: it => (
+        <div className="ml-2">
+          <CopyToClipboard>{R.path(['address'], it)}</CopyToClipboard>
+        </div>
+      )
+    },
+    {
+      name: 'deleteButton',
+      header: 'Delete',
+      width: 130,
+      textAlign: 'center',
+      size: 'sm',
+      view: it => (
+        <IconButton
+          className="pl-3"
+          onClick={() => {
+            setDeleteDialog(true)
+            setToBeDeleted(it)
+          }}>
+          <SvgIcon>
+            <DeleteIcon />
+          </SvgIcon>
+        </IconButton>
+      )
+    }
+  ]
+
+  return (
+    <>
+      <DataTable
+        data={data}
+        elements={elements}
+        emptyText="No blacklisted addresses so far"
+        name="blacklistTable"
+      />
+      <DeleteDialog
+        open={deleteDialog}
+        onDismissed={() => {
+          setDeleteDialog(false)
+          setErrorMessage(null)
+        }}
+        onConfirmed={() => {
+          setErrorMessage(null)
+          handleDeleteEntry(R.path(['address'], toBeDeleted))
+        }}
+        errorMessage={errorMessage}
+      />
+    </>
+  )
+}
+
+export default BlacklistTable