(null)
+ if (!editor) return null
+
+ const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
+ name: "Multiple",
+ }
+
+ return (
+
+
+ onOpenChange(false)}
+ anchorEl={anchorRef.current}
+ sx={{
+ marginTop: 2,
+ borderRadius: 8,
+ boxShadow: "none",
+ background: "none",
+ "& .MuiPaper-root": {
+ boxShadow: "none !important",
+ background: "none !important",
+ overflow: "visible",
+ },
+ "&:hover": {
+ border: "none !important",
+ },
+ }}
+ anchorOrigin={{
+ vertical: "bottom",
+ horizontal: "left",
+ }}
+ transformOrigin={{
+ vertical: "top",
+ horizontal: "left",
+ }}
+ >
+
+ {items.map((item, index) => (
+ {
+ item.command(editor)
+ onOpenChange(false)
+ }}
+ >
+ {item.icon}
+
+ {item.name}
+
+
+ {activeItem.name === item.name && }
+
+ ))}
+
+
+
+ )
+}
+
+export default NodeSelector
diff --git a/packages/app/src/components/commons/Editor/selector/TextButtons.tsx b/packages/app/src/components/commons/Editor/selector/TextButtons.tsx
new file mode 100644
index 00000000..090c5d10
--- /dev/null
+++ b/packages/app/src/components/commons/Editor/selector/TextButtons.tsx
@@ -0,0 +1,77 @@
+import React from "react"
+import { useEditor, EditorInstance } from "novel"
+import IconButton from "@mui/material/IconButton"
+import { SvgIconComponent } from "@mui/icons-material"
+import { ReactComponent as BoldIcon } from "@/assets/images/boldIcon.svg"
+import { ReactComponent as ItalicIcon } from "@/assets/images/italicIcon.svg"
+import { ReactComponent as UnderlineIcon } from "@/assets/images/underlineIcon.svg"
+import { ReactComponent as StrikethroughIcon } from "@/assets/images/strikethroughIcon.svg"
+import { ReactComponent as CodeIcon } from "@/assets/images/codeIcon.svg"
+
+interface SelectorItem {
+ name: string
+ icon: SvgIconComponent
+ command: (editor: EditorInstance) => void
+ isActive: (editor: EditorInstance) => boolean
+}
+
+export const TextButtons: React.FC = () => {
+ const { editor } = useEditor()
+ if (!editor) return null
+
+ const items: SelectorItem[] = [
+ {
+ name: "bold",
+ isActive: (editor) => editor.isActive("bold"),
+ command: (editor) => editor.chain().focus().toggleBold().run(),
+ icon: BoldIcon,
+ },
+ {
+ name: "italic",
+ isActive: (editor) => editor.isActive("italic"),
+ command: (editor) => editor.chain().focus().toggleItalic().run(),
+ icon: ItalicIcon,
+ },
+ {
+ name: "underline",
+ isActive: (editor) => editor.isActive("underline"),
+ command: (editor) => editor.chain().focus().toggleUnderline().run(),
+ icon: UnderlineIcon,
+ },
+ {
+ name: "strike",
+ isActive: (editor) => editor.isActive("strike"),
+ command: (editor) => editor.chain().focus().toggleStrike().run(),
+ icon: StrikethroughIcon,
+ },
+ {
+ name: "code",
+ isActive: (editor) => editor.isActive("code"),
+ command: (editor) => editor.chain().focus().toggleCode().run(),
+ icon: CodeIcon,
+ },
+ ]
+
+ return (
+
+ {items.map((item, index) => (
+ item.command(editor)}
+ sx={{
+ backgroundColor: item.isActive(editor) ? "rgba(75, 74, 70, 0.2)" : "rgba(75, 74, 70, 0.05)",
+ "&:hover": {
+ backgroundColor: "rgba(75, 74, 70, 0.1)",
+ },
+ borderRadius: "8px",
+ }}
+ size="large"
+ >
+
+
+ ))}
+
+ )
+}
+
+export default TextButtons
diff --git a/packages/app/src/components/commons/HtmlRender.tsx b/packages/app/src/components/commons/HtmlRender.tsx
new file mode 100644
index 00000000..a6971f33
--- /dev/null
+++ b/packages/app/src/components/commons/HtmlRender.tsx
@@ -0,0 +1,8 @@
+import React from "react"
+import DOMPurify from "dompurify"
+
+export const HtmlRenderer: React.FC<{ htmlContent: string }> = ({ htmlContent }) => {
+ const cleanHtmlContent = DOMPurify.sanitize(htmlContent)
+
+ return
+}
diff --git a/packages/app/src/components/commons/Markdown.tsx b/packages/app/src/components/commons/Markdown.tsx
index 99cb2fcb..bca54303 100644
--- a/packages/app/src/components/commons/Markdown.tsx
+++ b/packages/app/src/components/commons/Markdown.tsx
@@ -1,148 +1,125 @@
import ReactMarkdown from "markdown-to-jsx"
-import { Box, List, ListItem, Typography } from "@mui/material"
-import Link from "@mui/material/Link"
+// import { Box, List, ListItem, Typography } from "@mui/material"
+// import Link from "@mui/material/Link"
-type NodeType = {
- type: string
- props: {
- children?: React.ReactNode | React.ReactNode[]
- }
-}
-
-const convert = (node: NodeType) => {
- const { children } = node.props
-
- if (!children) return null
- const content = Array.isArray(children) ? children[0] : children
-
- if (node.type === "em") {
- return {content}
- }
- if (node.type === "strong") {
- return {content}
- }
- if (node.type === "del") {
- return {content}
- }
-}
const options = {
disableParsingRawHTML: false,
forceBlock: true,
forceWrapper: true,
- overrides: {
- h1: {
- component: Typography,
- props: {
- gutterBottom: true,
- fontWeight: 600,
- variant: "h1",
- },
- },
- h2: {
- component: Typography,
- props: {
- gutterBottom: true,
- fontWeight: 600,
- variant: "h3",
- component: "h2",
- },
- },
- h3: {
- component: Typography,
- props: {
- gutterBottom: true,
- fontWeight: 600,
- variant: "h4",
- component: "h3",
- },
- },
+ // overrides: {
+ // h1: {
+ // component: Typography,
+ // props: {
+ // gutterBottom: true,
+ // fontWeight: 600,
+ // variant: "h1",
+ // },
+ // },
+ // h2: {
+ // component: Typography,
+ // props: {
+ // gutterBottom: true,
+ // fontWeight: 600,
+ // variant: "h3",
+ // component: "h2",
+ // },
+ // },
+ // h3: {
+ // component: Typography,
+ // props: {
+ // gutterBottom: true,
+ // fontWeight: 600,
+ // variant: "h4",
+ // component: "h3",
+ // },
+ // },
- h4: {
- component: Typography,
- props: {
- gutterBottom: true,
- fontWeight: 600,
- variant: "h5",
- component: "h4",
- },
- },
- h5: {
- component: Typography,
- props: { gutterBottom: true, fontWeight: 600, variant: "h5" },
- },
- h6: {
- component: Typography,
- props: { gutterBottom: true, fontWeight: 600, variant: "h6" },
- },
- p: {
- component: Typography,
- props: { gutterBottom: true, paragraph: true, fontSize: "1.175rem" },
- },
- code: {
- component: Box,
- props: {
- component: "code",
- padding: "0.25rem",
- ml: "0.125rem",
- mr: "0.125rem",
- fontSize: 13,
- },
- },
- a: { component: Link, props: { target: "_blank" } },
- u: {
- props: {
- style: {
- textDecoration: "underline",
- },
- },
- component: ({ children, ...props }: { children?: React.ReactNode }) => {
- return (
-
- {Array.isArray(children)
- ? children.map((child, index) => (typeof child === "string" ? child : convert(child)))
- : children}
-
- )
- },
- },
- ol: {
- component: List,
- dense: true,
- props: {
- sx: {
- mb: 2,
- pl: 2,
- "& li": {
- listStyleType: "decimal",
- },
- },
- },
- },
- ul: {
- component: List,
- dense: true,
- props: {
- sx: {
- mb: 2,
- pl: 2,
- },
- },
- },
- li: {
- component: ListItem,
- props: {
- sx: {
- display: "list-item",
- listStylePosition: "outside",
- listStyleType: "circle",
- pl: 0,
- py: "0.25rem",
- },
- },
- },
- },
+ // h4: {
+ // component: Typography,
+ // props: {
+ // gutterBottom: true,
+ // fontWeight: 600,
+ // variant: "h5",
+ // component: "h4",
+ // },
+ // },
+ // h5: {
+ // component: Typography,
+ // props: { gutterBottom: true, fontWeight: 600, variant: "h5" },
+ // },
+ // h6: {
+ // component: Typography,
+ // props: { gutterBottom: true, fontWeight: 600, variant: "h6" },
+ // },
+ // // p: {
+ // // component: Typography,
+ // // props: { gutterBottom: true, paragraph: true, fontSize: "1.175rem", sx: { mb: 0 } },
+ // // },
+ // code: {
+ // component: Box,
+ // props: {
+ // component: "code",
+ // padding: "0.25rem",
+ // ml: "0.125rem",
+ // mr: "0.125rem",
+ // fontSize: 13,
+ // },
+ // },
+ // a: { component: Link, props: { target: "_blank" } },
+ // u: {
+ // props: {
+ // style: {
+ // textDecoration: "underline",
+ // },
+ // },
+ // component: ({ children, ...props }: { children?: React.ReactNode }) => {
+ // return (
+ //
+ // {Array.isArray(children)
+ // ? children.map((child, index) => (typeof child === "string" ? child : convert(child)))
+ // : children}
+ //
+ // )
+ // },
+ // },
+ // ol: {
+ // component: List,
+ // dense: true,
+ // props: {
+ // sx: {
+ // mb: 2,
+ // pl: 2,
+ // "& li": {
+ // listStyleType: "decimal",
+ // },
+ // },
+ // },
+ // },
+ // ul: {
+ // component: List,
+ // dense: true,
+ // props: {
+ // sx: {
+ // mb: 2,
+ // pl: 2,
+ // },
+ // },
+ // },
+ // li: {
+ // component: ListItem,
+ // props: {
+ // sx: {
+ // display: "list-item",
+ // listStylePosition: "outside",
+ // listStyleType: "circle",
+ // pl: 0,
+ // py: "0.25rem",
+ // },
+ // },
+ // },
+ // },
}
export const Markdown: React.FC<{
diff --git a/packages/app/src/components/commons/NetworkModal.tsx b/packages/app/src/components/commons/NetworkModal.tsx
deleted file mode 100644
index 66612f80..00000000
--- a/packages/app/src/components/commons/NetworkModal.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Button, CircularProgress, Grid, Modal, ModalProps, Typography, styled } from "@mui/material"
-import React, { useRef, useState } from "react"
-import { palette, typography } from "../../theme"
-import { ViewContainer } from "./ViewContainer"
-import CloseIcon from "@mui/icons-material/Close"
-import { useWeb3React } from "@web3-react/core"
-import { useNotification } from "../../hooks/useNotification"
-
-type NetworkError = {
- code: number
- message: string
- stack: string
-}
-
-interface NetworkModalProps extends Omit {}
-const ModalContainer = styled(ViewContainer)({
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- borderRadius: 8,
- width: 648,
- background: palette.whites[1000],
- padding: 24,
-})
-
-const NetworkModal: React.FC = ({ open, onClose }) => {
- const ref = useRef(null)
- const openNotification = useNotification()
- const { library } = useWeb3React()
- const [loading, setLoading] = useState(false)
-
- const handleSwitch = async () => {
- if (library) {
- try {
- setLoading(true)
- await library.send("wallet_switchEthereumChain", [{ chainId: "0x1" }])
- onClose && onClose({}, "escapeKeyDown")
- } catch (switchError: unknown) {
- const error = switchError as NetworkError
- setLoading(false)
- openNotification({
- message: error.message,
- variant: "error",
- })
- if (error && error.code === 4902) {
- setLoading(false)
- try {
- await library.send("wallet_addEthereumChain", [
- {
- chainId: "0x1",
- },
- ])
- } catch (addError) {
- console.error(addError)
- setLoading(false)
- }
- }
- }
- }
- }
- return (
-
-
-
-
-
-
-
- Network Switch Required
-
-
-
- {
- !loading && onClose && onClose({}, "escapeKeyDown")
- }}
- />
-
-
-
-
-
-
-
-
- You are currently connected to a network other than mainnet. To proceed with transactions involving
- ENS domains, please switch to mainnet.
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default NetworkModal
diff --git a/packages/app/src/components/commons/PermissionItem.tsx b/packages/app/src/components/commons/PermissionItem.tsx
index a52f2de2..5a83c1da 100644
--- a/packages/app/src/components/commons/PermissionItem.tsx
+++ b/packages/app/src/components/commons/PermissionItem.tsx
@@ -1,15 +1,15 @@
import React, { useEffect, useState } from "react"
-import { Box, Grid, Stack } from "@mui/material"
+import { Box, CircularProgress, Grid, Stack } from "@mui/material"
import { styled } from "@mui/styles"
-import { palette } from "../../theme"
-import { Permission, Publication } from "../../models/publication"
+import { palette } from "@/theme"
+import { Permission, Publication } from "@/models/publication"
import EditIcon from "@mui/icons-material/Edit"
import CloseIcon from "@mui/icons-material/Close"
import { UserBadge } from "./UserBadge"
-import usePublication from "../../services/publications/hooks/usePublication"
-import { PermissionFormType } from "../views/publication/PermissionView"
-import usePoster from "../../services/poster/hooks/usePoster"
-import { useNavigate, useParams } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
+import usePublications from "@/services/publications/hooks/usePublications"
+import { TransactionStatus } from "@/hooks/useContract"
+import { usePublicationContext } from "@/services/publications/contexts"
const PermissionItemContainer = styled(Box)({
alignItems: "center",
@@ -40,60 +40,31 @@ type PermissionItemProps = {
onClick: (id: string) => void
}
const PermissionItem: React.FC = ({ publication, permission, canEdit, showRemove, onClick }) => {
- const { publicationSlug } = useParams<{ publicationSlug: string }>()
const { address, id } = permission
const navigate = useNavigate()
const [deleteLoading, setDeleteLoading] = useState(false)
- const {
- indexing: deleteIndexing,
- setExecutePollInterval: deleteInterval,
- transactionCompleted: deleteTransaction,
- setCurrentUserPermission,
- } = usePublication(publicationSlug || "")
- const { givePermission } = usePoster()
- const handlePermission = async (data: PermissionFormType) => {
- if (publication) {
- await givePermission({
- action: "publication/permissions",
- id: publication.id,
- account: permission?.address || "",
- permissions: {
- "article/create": data.articleCreate,
- "article/update": data.articleUpdate,
- "article/delete": data.articleDelete,
- "publication/delete": data.publicationDelete,
- "publication/update": data.publicationUpdate,
- "publication/permissions": data.publicationPermissions,
- },
- }).then((res) => {
- if (res && res.error) {
- setDeleteLoading(false)
- } else {
- deleteInterval(true)
- }
- })
- }
- }
+ const { givePermission, status, txLoading } = usePublications()
+ const { savePermission } = usePublicationContext()
useEffect(() => {
- if (deleteTransaction) {
+ if (status === TransactionStatus.Success) {
+ savePermission(undefined)
navigate(-1)
}
- }, [deleteTransaction, navigate])
+ }, [navigate, savePermission, status])
- const handleDeletePermission = () => {
- if (publication && publication.permissions) {
+ const handleDeletePermission = async () => {
+ if (publication?.id && permission) {
setDeleteLoading(true)
- setCurrentUserPermission(publication.permissions)
- handlePermission({
+ await givePermission(publication.id, {
articleCreate: false,
articleDelete: false,
articleUpdate: false,
publicationDelete: false,
publicationPermissions: false,
publicationUpdate: false,
- account: "",
+ account: permission?.address,
})
}
}
@@ -105,7 +76,7 @@ const PermissionItem: React.FC = ({ publication, permission
{canEdit && (
{
- if (!deleteLoading || !deleteIndexing) {
+ if (!deleteLoading) {
canEdit && onClick(id ? id : "")
}
}}
@@ -129,11 +100,13 @@ const PermissionItem: React.FC = ({ publication, permission
},
}}
onClick={() => {
- if (!deleteLoading || !deleteIndexing) {
+ if (!deleteLoading) {
handleDeletePermission()
}
}}
>
+ {" "}
+ {txLoading.update || (deleteLoading && )}
diff --git a/packages/app/src/components/commons/Pinning/PinningConfiguration.tsx b/packages/app/src/components/commons/Pinning/PinningConfiguration.tsx
index 3ee703f0..67372e15 100644
--- a/packages/app/src/components/commons/Pinning/PinningConfiguration.tsx
+++ b/packages/app/src/components/commons/Pinning/PinningConfiguration.tsx
@@ -1,19 +1,16 @@
-import { Box, Grid, Typography, FormHelperText, TextField, Divider, Button, styled } from "@mui/material"
+import { Box, Grid, Typography, TextField, Divider, Button, styled } from "@mui/material"
import React, { useState } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { PINNING_OPTIONS } from "../../../constants/pinning"
-import { Pinning, PinningService, PinningServiceEndpoint } from "../../../models/pinning"
-import { typography, palette } from "../../../theme"
-import { Dropdown } from "../Dropdown"
-import { ExternalLink } from "../ExternalLink"
-import * as yup from "yup"
-import { yupResolver } from "@hookform/resolvers/yup"
-import useLocalStorage from "../../../hooks/useLocalStorage"
-import { useIpfs } from "../../../hooks/useIpfs"
-import { useNotification } from "../../../hooks/useNotification"
-const AlertContainer = styled(Box)({
+import { Pinning, PinningService, PinningServiceEndpoint } from "@/models/pinning"
+import { typography, palette } from "@/theme"
+
+import { ExternalLink } from "@/components/commons/ExternalLink"
+import useLocalStorage from "@/hooks/useLocalStorage"
+import { useNotification } from "@/hooks/useNotification"
+import { useIPFSContext } from "@/services/ipfs/context"
+
+export const AlertContainer = styled(Box)({
background: palette.secondary[200],
borderRadius: 4,
padding: 24,
@@ -28,52 +25,28 @@ const BackButton = styled(Button)({
},
})
-const setupIpfsSchema = yup.object().shape({
- service: yup.string().required(),
- endpoint: yup.string().when("service", {
- is: (service: PinningService) => ![PinningService.NONE, PinningService.PUBLIC].includes(service),
- then: yup.string().required("API Endpoint Is A Required Field"),
- otherwise: yup.string().notRequired(),
- }),
- accessToken: yup.string().when("service", {
- is: (service: PinningService) => ![PinningService.NONE, PinningService.PUBLIC].includes(service),
- then: yup.string().required("Secret Access Token Is A Required Field"),
- otherwise: yup.string().notRequired(),
- }),
-})
-
type PinningConfigurationProps = {
onBack: () => void
onClose: () => void
}
const PinningConfiguration: React.FC = ({ onBack, onClose }) => {
- const [currentSelection, setCurrentSelection] = useState(undefined)
- const [pinning, setPinning] = useLocalStorage("pinning", undefined)
- const {
- control,
- handleSubmit,
- formState: { errors },
- setValue,
- } = useForm({
- defaultValues: pinning,
- resolver: yupResolver(setupIpfsSchema),
- })
- const { isValidIpfsService } = useIpfs()
+ const currentSelection: PinningService = PinningService.PINATA
+ // const [currentSelection, setCurrentSelection] = useState(PinningService.PINATA)
+ const [, setPinning] = useLocalStorage("pinning", undefined)
+ const [token, setToken] = useState("")
+
+ // const { isValidIpfsService } = useIpfs()
+ const { isValidIpfsService } = useIPFSContext()
const openNotification = useNotification()
- const handleSelected = (selected: PinningService) => {
- setCurrentSelection(selected)
- setValue("service", selected)
- if (![PinningService.NONE, PinningService.PUBLIC].includes(selected)) {
- if (selected === PinningService.CUSTOM) {
- setValue("endpoint", pinning?.endpoint ?? "")
- } else {
- setValue("endpoint", PinningServiceEndpoint[selected])
- }
- }
- }
- const onSubmitHandler = async (data: Pinning) => {
+ const onSubmitHandler = async () => {
+ if (!token && token === "") return
+ const data: Pinning = {
+ service: PinningService.PINATA,
+ endpoint: PinningServiceEndpoint.PINATA,
+ accessToken: token,
+ }
const isValid = await isValidIpfsService(data)
if (!isValid) {
openNotification({
@@ -93,144 +66,88 @@ const PinningConfiguration: React.FC = ({ onBack, onC
}
return (
-
+
+
+
+
+
+
+ Back
+
+
+
+
+