Improved UX for Pinning Configuration and Transaction Alerts

packages/app/src/components/commons/PinningAlert.tsx

@@ -4,6 +4,7 @@ import { palette, typography } from "../../theme"
 import WarningAmberIcon from "@mui/icons-material/WarningAmber"
 import { useLocation, useNavigate } from "react-router-dom"
 import { usePublicationContext } from "../../services/publications/contexts"
+import useLocalStorage from "../../hooks/useLocalStorage"
 
 const PinningAlertContainer = styled(Box)({
   background: palette.secondary[200],
@@ -26,7 +27,9 @@ export const PinningAlert: React.FC = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const { setCurrentPath } = usePublicationContext()
-  return (
+  const [pinningRisk] = useLocalStorage<boolean | undefined>("pinningRisk", undefined)
+
+  return pinningRisk ? (
     <PinningAlertContainer>
       <Grid container gap={2} flexDirection="column">
         <Grid item sx={{ display: "flex", alignItems: "center" }}>
@@ -65,5 +68,5 @@ export const PinningAlert: React.FC = () => {
         </Grid>
       </Grid>
     </PinningAlertContainer>
-  )
+  ) : null
 }

packages/app/src/components/views/pinning/SetupIpfsView.tsx

@@ -63,6 +63,7 @@ const SetupIpfsView: React.FC = () => {
   const { isValidIpfsService } = useIpfs()
   const { currentPath, setCurrentPath } = usePublicationContext()
   const [pinning, setPinning] = useLocalStorage<Pinning | undefined>("pinning", undefined)
+  const [, setPinningRisk] = useLocalStorage<boolean | undefined>("pinningRisk", undefined)
   const {
     control,
     handleSubmit,
@@ -96,6 +97,7 @@ const SetupIpfsView: React.FC = () => {
       return
     }
     setPinning(data)
+    setPinningRisk(false)
     openNotification({
       message: "Successfully set up the pinning service!",
       variant: "success",
@@ -300,6 +302,7 @@ const SetupIpfsView: React.FC = () => {
             <Grid item>
               <StyledLinkButton
                 onClick={() => {
+                  setPinningRisk(true)
                   setPinning(undefined)
                   handleClose()
                 }}

packages/app/src/components/views/publication/CreateArticleView.tsx

@@ -7,6 +7,7 @@ import CreateArticlePage from "../../layout/CreateArticlePage"
 import { ArticleContentSection } from "./components/ArticleContentSection"
 import { palette } from "../../../theme"
 import useDebouncedState from "../../../hooks/useDebouncedState"
+import { PinningAlert } from "../../commons/PinningAlert"
 
 interface CreateArticleViewProps {
   type: "new" | "edit"
@@ -32,6 +33,9 @@ export const CreateArticleView: React.FC<CreateArticleViewProps> = React.memo(({
       >
         <Container maxWidth="md" sx={{ px: [8] }}>
           <Grid container gap={4} flexDirection="column" my={12.5}>
+            <Grid>
+              <PinningAlert />
+            </Grid>
             <Grid item xs={12}>
               <Stack spacing={1}>
                 <InputLabel>

packages/app/src/components/views/publication/PublicationsView.tsx

@@ -20,6 +20,8 @@ import { CreateSelectOption } from "../../../models/dropdown"
 import { usePosterContext } from "../../../services/poster/context"
 import { useDynamicFavIcon } from "../../../hooks/useDynamicFavIco"
 import { usePublicationContext } from "../../../services/publications/contexts"
+import usePinning from "../../../hooks/usePinning"
+import { PinningAlert } from "../../commons/PinningAlert"
 
 const PublicationsAvatarContainer = styled(Grid)(({ theme }) => ({
   display: "flex",
@@ -76,6 +78,7 @@ export const PublicationsView: React.FC<PublicationsViewProps> = ({ updateChainI
   const { account, chainId } = useWeb3React()
   const { executePublication } = usePoster()
   const { setLastPathWithChainName } = usePosterContext()
+  const { checkPinningSetup } = usePinning()
   useDynamicFavIcon(undefined)
   const [loading, setLoading] = useState<boolean>(false)
   const {
@@ -134,8 +137,12 @@ export const PublicationsView: React.FC<PublicationsViewProps> = ({ updateChainI
   }, [lastPublicationId, navigate, redirect])
 
   const onSubmitHandler = (data: Post) => {
-    setLastPublicationTitle(data.title)
-    handlePublication(data)
+    const isSetup = checkPinningSetup()
+    if (isSetup) {
+      setLastPublicationTitle(data.title)
+      handlePublication(data)
+    }
+    return
   }
 
   const handlePublicationsToShow = (publications: Publication[], address: string) => {
@@ -208,6 +215,9 @@ export const PublicationsView: React.FC<PublicationsViewProps> = ({ updateChainI
               </Grid>
             </Grid>
           )}
+          <Grid mt={2}>
+            <PinningAlert />
+          </Grid>
           <Grid>
             <Typography color={palette.grays[1000]} variant="h5" fontFamily={typography.fontFamilies.sans}>
               Create a publication

packages/app/src/components/views/publication/components/SettingSection.tsx

@@ -22,6 +22,7 @@ import usePublications from "../../../../services/publications/hooks/usePublicat
 import { useNavigate, useParams } from "react-router-dom"
 import { CreatableSelect } from "../../../commons/CreatableSelect"
 import { CreateSelectOption } from "../../../../models/dropdown"
+import { PinningAlert } from "../../../commons/PinningAlert"
 
 type Post = {
   title: string
@@ -173,6 +174,9 @@ export const SettingSection: React.FC<SettingsSectionProps> = ({ couldDelete, co
   return (
     <Container maxWidth="sm">
       <Box mt={4}>
+        <Grid mb={4}>
+          <PinningAlert />
+        </Grid>
         <form onSubmit={handleSubmit((data) => onSubmitHandler(data as Post))}>
           <Grid container gap={4} flexDirection="column">
             <Grid item>

packages/app/src/components/views/wallet/WalletView.tsx

@@ -9,7 +9,6 @@ import { SUPPORTED_WALLETS } from "../../../constants/wallet"
 import { AbstractConnector } from "@web3-react/abstract-connector"
 import { usePublicationContext } from "../../../services/publications/contexts"
 import useLocalStorage from "../../../hooks/useLocalStorage"
-import { Pinning } from "../../../models/pinning"
 import { ViewContainer } from "../../commons/ViewContainer"
 import { ALL_SUPPORTED_CHAIN_IDS, chainIdToChainName, chainToString, switchChain } from "../../../constants/chain"
 import WarningAmberIcon from "@mui/icons-material/WarningAmber"
@@ -39,8 +38,8 @@ const ModalContentContainer = styled(Box)({
 })
 export const WalletView: React.FC = () => {
   const navigate = useNavigate()
+
   const { currentPath } = usePublicationContext()
-  const [pinning] = useLocalStorage<Pinning | undefined>("pinning", undefined)
   const [walletAutoConnect, setWalletAutoConnect] = useLocalStorage<boolean | undefined>("walletAutoConnect", undefined)
   const { activate, active } = useWeb3React()
   const search = useLocation().search
@@ -55,13 +54,7 @@ export const WalletView: React.FC = () => {
     if (active) {
       const doNavigation = async () => {
         if (connector != null) {
-          if (currentPath && !pinning) {
-            navigate(`/pinning`)
-          }
-          if (!currentPath && !pinning) {
-            navigate(`/pinning`)
-          }
-          if (!currentPath && pinning) {
+          if (!currentPath) {
             navigate(`/publications`)
           }
         }
@@ -72,7 +65,7 @@ export const WalletView: React.FC = () => {
         doNavigation()
       }
     }
-  }, [active, currentPath, navigate, pinning, connector])
+  }, [active, currentPath, navigate, connector])
 
   const handleConnector = async (connector: AbstractConnector) => {
     setConnector(connector)

packages/app/src/hooks/usePinning.ts

@@ -0,0 +1,21 @@
+import useLocalStorage from "./useLocalStorage"
+import { Pinning } from "../models/pinning"
+import { useNavigate } from "react-router-dom"
+
+function usePinning() {
+  const navigate = useNavigate()
+  const [pinning] = useLocalStorage<Pinning | undefined>("pinning", undefined)
+  const [pinningRisk] = useLocalStorage<boolean | undefined>("pinningRisk", undefined)
+
+  const checkPinningSetup = () => {
+    if (!pinning && !pinningRisk) {
+      navigate(`/pinning`)
+      return false
+    }
+    return true
+  }
+
+  return { checkPinningSetup }
+}
+
+export default usePinning