Tabula v.2.1

.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

.github/workflows/dev-cd.yaml

@@ -6,7 +6,9 @@ on:
 
 env:
   REACT_APP_POSTER_CONTRACT: ${{ secrets.REACT_APP_POSTER_CONTRACT }}
-  REACT_APP_INFURA_KEY: ${{ secrets.REACT_APP_INFURA_KEY }}
+  REACT_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.REACT_APP_INFURA_NETWORK_ACCESS_KEY }}
+  REACT_APP_INFURA_IPFS_API_KEY: ${{ secrets.REACT_APP_INFURA_IPFS_API_KEY }}
+  REACT_APP_INFURA_IPFS_API_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_API_SECRET }}
   REACT_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
   REACT_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
   REACT_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet

.github/workflows/prod-release-deploy.yaml

@@ -6,7 +6,9 @@ on:
 
 env:
   REACT_APP_POSTER_CONTRACT: ${{ secrets.REACT_APP_POSTER_CONTRACT }}
-  REACT_APP_INFURA_KEY: ${{ secrets.REACT_APP_INFURA_KEY }}
+  REACT_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.REACT_APP_INFURA_NETWORK_ACCESS_KEY }}
+  REACT_APP_INFURA_IPFS_API_KEY: ${{ secrets.REACT_APP_INFURA_IPFS_API_KEY }}
+  REACT_APP_INFURA_IPFS_API_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_API_SECRET }}
   REACT_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
   REACT_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
   REACT_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet

packages/app/.env.example

@@ -1,4 +1,4 @@
-REACT_APP_INFURA_KEY=
+REACT_APP_INFURA_NETWORK_ACCESS_KEY=
 REACT_APP_POSTER_CONTRACT=0x000000000000cd17345801aa8147b8D3950260FF
 REACT_APP_SUBGRAPH_BASE_URL=https://api.thegraph.com/subgraphs/name/
 REACT_APP_SUBGRAPH_GNOSIS_CHAIN=auryn-macmillan/tabula-gnosis-chain
@@ -8,5 +8,10 @@ REACT_APP_SUBGRAPH_SEPOLIA=auryn-macmillan/tabula-sepolia
 REACT_APP_SUBGRAPH_POLYGON=auryn-macmillan/tabula-polygon
 REACT_APP_SUBGRAPH_ARBITRUM=auryn-macmillan/tabula-arbitrum
 REACT_APP_SUBGRAPH_OPTIMISM=auryn-macmillan/tabula-optimism
+REACT_APP_ENS_SUBGRAPH_MAINNET=ensdomains/ens
+REACT_APP_ENS_SUBGRAPH_GOERLI=ensdomains/ensgoerli
 REACT_APP_IPFS_GATEWAY=https://ipfs.io/ipfs
 REACT_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN=auryn-macmillan/tabula-optimism-on-gnosis-chain
+REACT_APP_INFURA_IPFS_API_KEY=
+REACT_APP_INFURA_IPFS_API_SECRET=
+

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabula",
-  "version": "0.1.0",
+  "version": "2.1.0",
   "private": true,
   "license": "LGPL-2.1",
   "homepage": "https://onposter.github.io",
@@ -17,14 +17,18 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.9",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/walletconnect-connector": "^6.2.13",
     "@web3-react/walletlink-connector": "^6.2.13",
     "axios": "^0.26.1",
     "blockies-ts": "^1.0.0",
+    "draft-convert": "^2.1.13",
+    "draft-js": "^0.11.7",
+    "draft-js-export-html": "^1.4.1",
+    "draft-js-import-html": "^1.4.1",
     "ethers": "^5.7.2",
     "gh-pages": "^3.2.3",
     "graphql": "^16.3.0",
@@ -33,6 +37,7 @@
     "is-ipfs": "^6.0.2",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.1.7",
+    "marked": "^5.1.2",
     "moment": "^2.29.2",
     "notistack": "^2.0.8",
     "react": "^17.0.2",
@@ -44,14 +49,17 @@
     "react-router-dom": "^6.2.2",
     "react-scripts": "4.0.3",
     "react-select": "^5.3.2",
+    "turndown": "^7.1.1",
     "typescript": "^4.4.2",
+    "uid": "^2.0.1",
     "urql": "^2.2.0",
     "web-vitals": "^2.1.0",
     "webpack": "4.44.2",
     "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",
@@ -64,23 +72,20 @@
       "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
   },
   "devDependencies": {
+    "@types/draft-convert": "^2.1.4",
+    "@types/draft-js": "^0.11.10",
     "@types/lodash": "^4.14.180",
+    "@types/marked": "^5.0.1",
+    "@types/turndown": "^5.0.1",
     "prettier": "^2.5.1"
   },
   "resolutions": {

packages/app/src/App.tsx

@@ -7,18 +7,18 @@ import { Provider as UrqlProvider } from "urql"
 import { LandingView } from "./components/views/home/LandingView"
 import { WalletView } from "./components/views/wallet/WalletView"
 import { PublicationsView } from "./components/views/publication/PublicationsView"
-import { PublicationProvider } from "./services/publications/contexts"
+import { ArticleProvider, PublicationProvider } from "./services/publications/contexts"
 import { CreateArticleView } from "./components/views/publication/CreateArticleView"
-import { CreateArticleView2 } from "./components/views/publication/CreateArticleView2"
 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"
 import { RedirectOldRoute } from "./components/commons/RedicrectOldRoute"
+import PreviewArticleView from "./components/views/publication/PreviewArticleView"
+import { EnsProvider } from "./services/ens/context"
 
 const App: React.FC = () => {
   // the chainId should be from the publication if its present
@@ -45,38 +45,41 @@ const App: React.FC = () => {
     <SnackbarProvider maxSnack={1}>
       <UrqlProvider value={currentSubgraphClient}>
         <WalletProvider>
-          <PublicationProvider>
-            <PosterProvider>
-              <ScrollToTop />
-              <Routes>
-                {" "}
-                <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 */}
-                <Route path="/goerli/*" element={<RedirectOldRoute />} />
-                <Route path="/mainnet/*" element={<RedirectOldRoute />} />
-                <Route path="/gnosis_chain/*" element={<RedirectOldRoute />} />
-                <Route path="/polygon/*" element={<RedirectOldRoute />} />
-                <Route path="/arbitrum/*" element={<RedirectOldRoute />} />
-                <Route path="/optimism/*" element={<RedirectOldRoute />} />
-                {/* New routes */}
-                <Route path=":publicationSlug">
-                  <Route path="permissions/:type" element={<PermissionView />} />
+          <EnsProvider>
+            <PublicationProvider>
+              <ArticleProvider>
+                <PosterProvider>
+                  <ScrollToTop />
+                  <Routes>
+                    {" "}
+                    <Route path="/" element={<LandingView />} />
+                    <Route path="/wallet" element={<WalletView />} />
+                    <Route path="/publications" element={<PublicationsView updateChainId={updateChainId} />} />
+                    <Route path=":publicationSlug" element={<PublicationView updateChainId={updateChainId} />} />
+                    {/* Redirect old routes to new routes */}
+                    <Route path="/goerli/*" element={<RedirectOldRoute />} />
+                    <Route path="/mainnet/*" element={<RedirectOldRoute />} />
+                    <Route path="/gnosis_chain/*" element={<RedirectOldRoute />} />
+                    <Route path="/polygon/*" element={<RedirectOldRoute />} />
+                    <Route path="/arbitrum/*" element={<RedirectOldRoute />} />
+                    <Route path="/optimism/*" element={<RedirectOldRoute />} />
+                    {/* New routes */}
+                    <Route path=":publicationSlug">
+                      <Route path="permissions/:type" element={<PermissionView />} />
 
-                  <Route path="new" element={<CreateArticleView type="new" />} />
-                  <Route path="new/2" element={<CreateArticleView2 type="new" />} />
+                      <Route path="new" element={<CreateArticleView type="new" />} />
 
-                  <Route path=":articleId" element={<ArticleView updateChainId={updateChainId} />} />
+                      <Route path=":type/preview" element={<PreviewArticleView />} />
 
-                  <Route path=":articleId/edit" element={<CreateArticleView type="edit" />} />
-                  <Route path=":articleId/edit/2" element={<CreateArticleView2 type="edit" />} />
-                </Route>
-              </Routes>
-            </PosterProvider>
-          </PublicationProvider>
+                      <Route path=":articleId" element={<ArticleView updateChainId={updateChainId} />} />
+
+                      <Route path=":articleId/edit" element={<CreateArticleView type="edit" />} />
+                    </Route>
+                  </Routes>
+                </PosterProvider>
+              </ArticleProvider>
+            </PublicationProvider>
+          </EnsProvider>
         </WalletProvider>
       </UrqlProvider>
     </SnackbarProvider>

packages/app/src/assets/images/icons/link.tsx

@@ -0,0 +1,28 @@
+import { Box, BoxProps } from "@mui/material"
+
+const LinkIcon = ({ ...props }: BoxProps) => {
+  return (
+    <Box width={24} height={24} {...props}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M11.4656 6.69381L13.3219 4.83756C14.1078 4.12124 15.1395 3.73529 16.2026 3.7599C17.2657 3.78451 18.2784 4.2178 19.0303 4.96972C19.7823 5.72164 20.2156 6.73438 20.2402 7.79748C20.2648 8.86057 19.8788 9.89227 19.1625 10.6782L16.5094 13.3219C16.127 13.7057 15.6726 14.0103 15.1723 14.2181C14.672 14.4259 14.1355 14.5328 13.5938 14.5328C13.052 14.5328 12.5156 14.4259 12.0152 14.2181C11.5149 14.0103 11.0605 13.7057 10.6781 13.3219"
+          stroke="currentColor"
+          strokeOpacity="0.8"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.5344 17.3063L10.6781 19.1625C9.89221 19.8789 8.86051 20.2648 7.79741 20.2402C6.73432 20.2156 5.72158 19.7823 4.96966 19.0304C4.21774 18.2785 3.78445 17.2657 3.75984 16.2026C3.73522 15.1395 4.12118 14.1078 4.8375 13.3219L7.49063 10.6782C7.873 10.2944 8.32738 9.98984 8.82771 9.78204C9.32805 9.57425 9.86449 9.46729 10.4063 9.46729C10.948 9.46729 11.4845 9.57425 11.9848 9.78204C12.4851 9.98984 12.9395 10.2944 13.3219 10.6782"
+          stroke="currentColor"
+          strokeOpacity="0.8"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </Box>
+  )
+}
+
+export default LinkIcon

packages/app/src/assets/images/icons/node.tsx

@@ -0,0 +1,21 @@
+import { Box, BoxProps } from "@mui/material"
+
+const NodeIcon = ({ ...props }: BoxProps) => {
+  return (
+    <Box width={24} height={24} {...props}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="24" height="24" rx="12" fill="currentColor" fillOpacity="0.1" />
+        <path
+          d="M8.5 15C8.5 15.9665 7.7165 16.75 6.75 16.75C5.7835 16.75 5 15.9665 5 15C5 14.0335 5.7835 13.25 6.75 13.25C7.7165 13.25 8.5 14.0335 8.5 15ZM8.5 15H9C9.79565 15 10.5587 14.6839 11.1213 14.1213C11.6839 13.5587 12 12.7956 12 12C12 11.2044 12.3161 10.4413 12.8787 9.87868C13.4413 9.31607 14.2044 9 15 9H19M16.5 6.5L19 9M19 9L16.5 11.5"
+          stroke="currentColor"
+          strokeOpacity="0.8"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </Box>
+  )
+}
+
+export default NodeIcon

packages/app/src/assets/images/icons/settings.tsx

@@ -0,0 +1,26 @@
+import { Box, BoxProps } from "@mui/material"
+
+const SettingsIcon = ({ ...props }: BoxProps) => {
+  return (
+    <Box width={24} height={24} {...props}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%" }}>
+        <path
+          d="M12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5 9.51472 14.4853 7.5 12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5Z"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M17.2218 6.10303C17.4593 6.32178 17.6843 6.54678 17.8968 6.77803L20.4562 7.14365C20.8732 7.86788 21.1947 8.64308 21.4125 9.4499L19.8562 11.5218C19.8562 11.5218 19.8843 12.1593 19.8562 12.478L21.4125 14.5499C21.1957 15.3571 20.8742 16.1324 20.4562 16.8562L17.8968 17.2218C17.8968 17.2218 17.4562 17.6812 17.2218 17.8968L16.8562 20.4562C16.132 20.8732 15.3568 21.1946 14.55 21.4124L12.4781 19.8562C12.16 19.8843 11.84 19.8843 11.5218 19.8562L9.44996 21.4124C8.6428 21.1956 7.86747 20.8741 7.14371 20.4562L6.77809 17.8968C6.54684 17.678 6.32184 17.453 6.10309 17.2218L3.54371 16.8562C3.1267 16.1319 2.80527 15.3567 2.58746 14.5499L4.14371 12.478C4.14371 12.478 4.11559 11.8405 4.14371 11.5218L2.58746 9.4499C2.80426 8.64274 3.12574 7.8674 3.54371 7.14365L6.10309 6.77803C6.32184 6.54678 6.54684 6.32178 6.77809 6.10303L7.14371 3.54365C7.86794 3.12664 8.64314 2.80521 9.44996 2.5874L11.5218 4.14365C11.84 4.11552 12.16 4.11552 12.4781 4.14365L14.55 2.5874C15.3571 2.8042 16.1325 3.12568 16.8562 3.54365L17.2218 6.10303Z"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </Box>
+  )
+}
+
+export default SettingsIcon