Enhance UI for User-Configured Pinning Service in Tabula

.github/workflows/ci.yaml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/cache@v2
         with:
           path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
       - run: yarn install
       - run: yarn build
       - name: Generate subgraph.yaml for Goerli

packages/app/package.json

@@ -58,7 +58,8 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "old-start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -71,18 +72,11 @@
       "react-app/jest"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
   "browser": {
     "crypto": false
   },

packages/app/src/App.tsx

@@ -13,7 +13,6 @@ import { ArticleView } from "./components/views/publication/ArticleView"
 import ScrollToTop from "./components/commons/ScrollToTop"
 import { subgraphClient } from "./services/graphql"
 import { PermissionView } from "./components/views/publication/PermissionView"
-import SetupIpfsView from "./components/views/pinning/SetupIpfsView"
 import { useWeb3React } from "@web3-react/core"
 import { PosterProvider } from "./services/poster/context"
 import { WalletProvider } from "./connectors/WalletProvider"
@@ -53,7 +52,6 @@ const App: React.FC = () => {
                   {" "}
                   <Route path="/" element={<LandingView />} />
                   <Route path="/wallet" element={<WalletView />} />
-                  <Route path="/pinning" element={<SetupIpfsView />} />
                   <Route path="/publications" element={<PublicationsView updateChainId={updateChainId} />} />
                   <Route path=":publicationSlug" element={<PublicationView updateChainId={updateChainId} />} />
                   {/* Redirect old routes to new routes */}

packages/app/src/components/commons/Editor/EditorInlineText.tsx

@@ -151,7 +151,6 @@ const EditorInlineText: React.FC<InlineRichTextProps> = ({
       return
     }
     setShowInvalidUrl(true)
-    console.log("The user press enter")
   }
 
   return (

packages/app/src/components/commons/Editor/EditorRichText.tsx

@@ -15,6 +15,8 @@ import { DragIndicator } from "@mui/icons-material"
 import { palette, typography } from "../../../theme"
 import { useOnClickOutside } from "../../../hooks/useOnClickOutside"
 import { useArticleContext } from "../../../services/publications/contexts"
+import useLocalStorage from "../../../hooks/useLocalStorage"
+import { Pinning, PinningService } from "../../../models/pinning"
 
 const RichTextButton = styled(Box)({
   position: "relative",
@@ -75,6 +77,7 @@ type RichTextItemProps = {
   color?: string
   icon: React.ReactNode
   selected?: boolean
+  disabled?: boolean
 }
 
 type RichTextProps = {
@@ -190,7 +193,7 @@ const DragTooltipContent = () => {
   )
 }
 
-const RichTextItem: React.FC<RichTextItemProps> = ({ label, icon, color, selected }) => {
+const RichTextItem: React.FC<RichTextItemProps> = ({ label, icon, color, selected, disabled }) => {
   return (
     <Grid
       container
@@ -199,7 +202,10 @@ const RichTextItem: React.FC<RichTextItemProps> = ({ label, icon, color, selecte
       alignItems="center"
       sx={{
         cursor: "pointer",
-        "& .rich-text-icon": { backgroundColor: selected ? palette.grays[100] : palette.grays[50] },
+        "& .rich-text-icon": {
+          backgroundColor: selected ? palette.grays[100] : palette.grays[50],
+          opacity: disabled ? 0.5 : "initial",
+        },
         "&:hover": {
           "& .rich-text-icon": { backgroundColor: palette.grays[100] },
         },
@@ -211,7 +217,7 @@ const RichTextItem: React.FC<RichTextItemProps> = ({ label, icon, color, selecte
       {label && (
         <Grid item>
           <Typography
-            color={color}
+            color={disabled ? palette.grays[400] : color}
             variant="body2"
             fontWeight={600}
             fontSize={11}
@@ -227,7 +233,8 @@ const RichTextItem: React.FC<RichTextItemProps> = ({ label, icon, color, selecte
 
 const EditorRichText: React.FC<RichTextProps> = ({ onRichTextSelected, showCommand, onDelete, onAdd }) => {
   const { setShowBlockTypePopup } = useArticleContext()
-
+  const [pinning] = useLocalStorage<Pinning | undefined>("pinning", undefined)
+  const isDirectlyOnChain = pinning && pinning.service === PinningService.NONE
   const containerRef = useRef<Element | (() => Element | null) | null>(null)
   const richTextRef = useRef<HTMLDivElement | null>(null)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -283,7 +290,6 @@ const EditorRichText: React.FC<RichTextProps> = ({ onRichTextSelected, showComma
         case "Enter":
           event.preventDefault()
           setSelectedIndex((currentIndex) => {
-            console.log("currentIndex", currentIndex)
             const selectedOption = richTextOption[currentIndex]
             if (selectedOption) {
               handleSelection(selectedOption.value)
@@ -348,6 +354,9 @@ const EditorRichText: React.FC<RichTextProps> = ({ onRichTextSelected, showComma
   }, [topOffset])
 
   const handleSelection = (value: RICH_TEXT_ELEMENTS) => {
+    if (value === RICH_TEXT_ELEMENTS.IMAGE && isDirectlyOnChain) {
+      return
+    }
     if (onRichTextSelected) {
       onRichTextSelected(value)
       setShow(false)
@@ -423,7 +432,12 @@ const EditorRichText: React.FC<RichTextProps> = ({ onRichTextSelected, showComma
                 {OPTIONS.map(({ label, icon, value }, index) => (
                   <Grid item key={`${label}-${index}`} ref={optionRefs[index]}>
                     <div onClick={() => value && handleSelection(value)} tabIndex={0}>
-                      <RichTextItem label={label} icon={icon} selected={index + 6 === selectedIndex} />
+                      <RichTextItem
+                        label={label}
+                        icon={icon}
+                        disabled={isDirectlyOnChain && value === RICH_TEXT_ELEMENTS.IMAGE ? true : false}
+                        selected={index + HEADER_OPTIONS.length === selectedIndex}
+                      />
                     </div>
                   </Grid>
                 ))}

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

@@ -13,12 +13,13 @@ interface ExternalLinkProps {
   link: string
   children: React.ReactNode
   // pass className to allowlocal style overrides
+  style?: React.CSSProperties
   className?: string
 }
 
-export const ExternalLink = ({ link, children, className }: ExternalLinkProps): JSX.Element => {
+export const ExternalLink = ({ link, children, style }: ExternalLinkProps): JSX.Element => {
   return (
-    <Link className={className} href={link} rel="noreferrer noopener" target="_blank">
+    <Link style={style} href={link} rel="noreferrer noopener" target="_blank">
       {children}
     </Link>
   )