diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index d477cdd1..6a5a1775 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -60,18 +60,18 @@ const App: React.FC = () => {
} />
} />
{/* } />
- } />
- } />
- } />
- } />
- } />
-
- } />
- } />
- } />
- } />
- } />
- */}
+ } />
+ } />
+ } />
+ } />
+ } /> */}
+
+ } />
+ {/* } />
+ } />
+ } />
+ } /> */}
+
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/WalletBadge.tsx b/packages/app/src/components/commons/WalletBadge.tsx
index 4d2f459c..7b635855 100644
--- a/packages/app/src/components/commons/WalletBadge.tsx
+++ b/packages/app/src/components/commons/WalletBadge.tsx
@@ -1,7 +1,9 @@
import React from "react"
-import { Avatar } from "@mui/material"
+import { Avatar, Box, Typography } from "@mui/material"
import * as blockies from "blockies-ts"
import { useNotification } from "@/hooks/useNotification"
+import { typography } from "@/theme"
+import { shortAddress } from "@/utils/string-handler"
type WalletBadgeProps = {
copyable?: boolean
@@ -25,17 +27,23 @@ export const WalletBadge: React.FC = ({ address, copyable }) =
}
}
return (
-
+
+
+
+ {shortAddress(address).toLowerCase()}
+
+
)
}
diff --git a/packages/app/src/components/views/publication/PermissionView.tsx b/packages/app/src/components/views/publication/PermissionView.tsx
index 34bdb742..b692b29b 100644
--- a/packages/app/src/components/views/publication/PermissionView.tsx
+++ b/packages/app/src/components/views/publication/PermissionView.tsx
@@ -1,27 +1,17 @@
import React, { useEffect, useState } from "react"
-import {
- Grid,
- Box,
- Typography,
- styled,
- TextField,
- Divider,
- Button,
- FormHelperText,
- CircularProgress,
- InputLabel,
-} from "@mui/material"
+import { Grid, Box, Typography, styled, TextField, Divider, Button, CircularProgress, InputLabel } from "@mui/material"
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline"
-import { palette, typography } from "../../../theme"
+import { palette, typography } from "@/theme"
import CloseIcon from "@mui/icons-material/Close"
import { useNavigate, useParams } from "react-router-dom"
-import { CustomCheckbox } from "../../commons/Checkbox"
+import { CustomCheckbox } from "@/components/commons/Checkbox"
import { Controller, useForm } from "react-hook-form"
-import { ethers } from "ethers"
-import usePoster from "../../../services/poster/hooks/usePoster"
-import { usePublicationContext } from "../../../services/publications/contexts"
-import usePublication from "../../../services/publications/hooks/usePublication"
-import { WalletBadge } from "../../commons/WalletBadge"
+import { usePublicationContext } from "@/services/publications/contexts"
+import { WalletBadge } from "@/components/commons/WalletBadge"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { PermissionFormSchema, permissionsSchema } from "@/schemas/permission.schema"
+import usePublications from "@/services/publications/hooks/usePublications"
+import { TransactionStatus } from "@/hooks/useContract"
type OptionsType = {
label: string
@@ -34,16 +24,6 @@ type OptionsType = {
| "publicationPermissions"
}
-export type PermissionFormType = {
- articleCreate: boolean
- articleDelete: boolean
- articleUpdate: boolean
- publicationDelete: boolean
- publicationPermissions: boolean
- publicationUpdate: boolean
- account: string
-}
-
const PermissionContainer = styled(Grid)({
justifyContent: "center",
alignItems: "center",
@@ -91,162 +71,60 @@ const PUBLICATIONS_OPTIONS: OptionsType[] = [
},
]
-const INITIAL_VALUE = {
- articleCreate: false,
- articleDelete: false,
- articleUpdate: false,
- publicationDelete: false,
- publicationPermissions: false,
- publicationUpdate: false,
- account: "",
-}
-
export const PermissionView: React.FC = () => {
const navigate = useNavigate()
- const { givePermission } = usePoster()
- const { type, publicationSlug } = useParams<{ type: "edit" | "new"; publicationSlug: string }>()
- const { publication, permission } = usePublicationContext()
- const {
- indexing: deleteIndexing,
- setExecutePollInterval: deleteInterval,
- transactionCompleted: deleteTransaction,
- setCurrentUserPermission,
- } = usePublication(publicationSlug || "")
- const {
- indexing: newPermissionIndexing,
- setExecutePollInterval: newPermissionInterval,
- transactionCompleted: permissionTransaction,
- setAccountPermission,
- } = usePublication(publicationSlug || "")
- const {
- indexing: updateIndexing,
- setExecutePollInterval: updateInterval,
- transactionCompleted: updateTransaction,
- setCurrentUserPermission: updateCurrentUser,
- } = usePublication(publicationSlug || "")
- const [loading, setLoading] = useState(false)
- const [deleteLoading, setDeleteLoading] = useState(false)
+ // const { givePermission } = usePoster()
+ const { type } = useParams<{ type: "edit" | "new"; publicationSlug: string }>()
+ const { publication, permission, savePermission } = usePublicationContext()
+ const { txLoading, givePermission, status } = usePublications()
+ const [deleteLoading, setDeleteloading] = useState(false)
const {
control,
handleSubmit,
- watch,
- clearErrors,
- setError,
- setValue,
formState: { errors },
} = useForm({
- defaultValues: INITIAL_VALUE,
+ defaultValues: {
+ articleCreate: permission?.articleCreate ?? false,
+ articleDelete: permission?.articleDelete ?? false,
+ articleUpdate: permission?.articleUpdate ?? false,
+ publicationDelete: permission?.publicationDelete ?? false,
+ publicationPermissions: permission?.publicationPermissions ?? false,
+ publicationUpdate: permission?.publicationUpdate ?? false,
+ account: permission?.address ?? "",
+ },
+ resolver: yupResolver(permissionsSchema),
})
- const account = watch("account")
useEffect(() => {
- if (type === "edit" && permission) {
- const {
- articleCreate,
- articleDelete,
- articleUpdate,
- publicationDelete,
- publicationPermissions,
- publicationUpdate,
- } = permission
- setValue("articleCreate", articleCreate)
- setValue("articleDelete", articleDelete)
- setValue("articleUpdate", articleUpdate)
- setValue("publicationDelete", publicationDelete)
- setValue("publicationPermissions", publicationPermissions)
- setValue("publicationUpdate", publicationUpdate)
- }
- }, [type, setValue, permission])
-
- useEffect(() => {
- if (account) {
- const isValid = ethers.utils.isAddress(account)
- if (!isValid) {
- setError("account", {
- type: "manual",
- message: "Please provide a valid address",
- })
- } else {
- clearErrors("account")
- }
- }
- }, [account, setError, clearErrors])
-
- useEffect(() => {
- if (deleteTransaction || updateTransaction || permissionTransaction) {
+ if (status === TransactionStatus.Success) {
+ setDeleteloading(false)
+ savePermission(undefined)
navigate(-1)
}
- }, [deleteTransaction, navigate, permissionTransaction, updateTransaction])
+ }, [navigate, savePermission, status])
- const onSubmitHandler = (data: PermissionFormType) => {
- if (type === "new") {
- setAccountPermission(data.account)
- handlePermission(data, "new")
- }
- if (type === "edit") {
- handlePermission(data, "edit")
+ const onSubmitHandler = async (data: PermissionFormSchema) => {
+ if (publication?.id) {
+ await givePermission(publication.id, data)
}
}
- const handlePermission = async (data: PermissionFormType, type: "new" | "edit" | "delete") => {
- if (publication) {
- if (["new", "edit"].includes(type)) {
- setLoading(true)
- }
- await givePermission({
- action: "publication/permissions",
- id: publication.id,
- account: type === "new" ? data.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)
- setLoading(false)
- } else {
- if (type === "delete") {
- deleteInterval(true)
- }
- if (type === "new") {
- newPermissionInterval(true)
- }
- if (type === "edit") {
- updateInterval(true)
- if (publication && publication.permissions) {
- updateCurrentUser(publication.permissions)
- }
- }
- }
+ const handleDeletePermission = async () => {
+ if (publication?.id && permission) {
+ setDeleteloading(true)
+ await givePermission(publication.id, {
+ articleCreate: false,
+ articleDelete: false,
+ articleUpdate: false,
+ publicationDelete: false,
+ publicationPermissions: false,
+ publicationUpdate: false,
+ account: permission?.address,
})
}
}
- const handleDeletePermission = () => {
- if (publication && publication.permissions) {
- setDeleteLoading(true)
- setCurrentUserPermission(publication.permissions)
- handlePermission(
- {
- articleCreate: false,
- articleDelete: false,
- articleUpdate: false,
- publicationDelete: false,
- publicationPermissions: false,
- publicationUpdate: false,
- account: "",
- },
- "delete",
- )
- }
- }
-
return (
@@ -259,7 +137,7 @@ export const PermissionView: React.FC = () => {
-