Merge pull request #1685 from OpenQDev/chris

Chris
OpenQDev · Mar 20, 2023 · bdcdc4d · bdcdc4d
2 parents f478683 + ee77381
commit bdcdc4d
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 28 deletions.
diff --git a/__tests__/Layout/__snapshots__/FirstTimeBanner.test.js.snap b/__tests__/Layout/__snapshots__/FirstTimeBanner.test.js.snap
@@ -1,6 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FirstTimeBanner should show nothing 1`] = `null`;
+exports[`FirstTimeBanner should show nothing 1`] = `
+<div
+  className="w-full bg-[#21262d] border-gray-700 border-b grid grid-cols-[1fr_1fr_1fr_1fr] py-4 items-center px-4"
+>
+  <div
+    className="col-start-2 col-end-4 text-center text-sm min-w-[240px]"
+  >
+    Welcome to 
+    <span
+      className="font-bold"
+    >
+      OpenQ!
+    </span>
+    <br />
+    <br />
+    <div>
+      You
+      '
+      re early to the party - most EthDenver 2023 bounties will be minted on March 20.
+    </div>
+    <br />
+    <div>
+      Some will be minted later as sponsors finalize decisions.
+    </div>
+    <br />
+    <div>
+      Keep an eye on your inbox for updates.
+    </div>
+  </div>
+  <div
+    className="flex justify-self-end"
+  >
+    <button
+      className="px-4"
+      onClick={[Function]}
+    >
+      <svg
+        className="fill-muted hover:fill-blue-400 w-4 h-4"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
 
 exports[`FirstTimeBanner should show the Banner and match DOM Snapshot 1`] = `
 <div
@@ -15,19 +66,21 @@ exports[`FirstTimeBanner should show the Banner and match DOM Snapshot 1`] = `
     >
       OpenQ!
     </span>
-     Since it
-    '
-    s your first time with us, check out our
-     
-    <a
-      className="text-blue-400 hover:underline"
-      href="https://www.youtube.com/watch?v=HixkRY2v_pA&ab_channel=OpenQ"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      demo
-    </a>
-    .
+    <br />
+    <br />
+    <div>
+      You
+      '
+      re early to the party - most EthDenver 2023 bounties will be minted on March 20.
+    </div>
+    <br />
+    <div>
+      Some will be minted later as sponsors finalize decisions.
+    </div>
+    <br />
+    <div>
+      Keep an eye on your inbox for updates.
+    </div>
   </div>
   <div
     className="flex justify-self-end"

diff --git a/components/BountyCard/BountyCardDetailsModal/index.js b/components/BountyCard/BountyCardDetailsModal/index.js
@@ -11,6 +11,7 @@ import TotalValue from '../../Bounty/TotalValue';
 import LabelsList from '../../Bounty/LabelsList';
 import ModalLarge from '../../Utils/ModalLarge';
 import useGetTokenValues from '../../../hooks/useGetTokenValues';
+import GithubHtmlRenderer from '../../Utils/HtmlReneder';
 
 const BountyCardDetailsModal = ({ bounty, closeModal, showModal, watchingState, setStatefulWatched }) => {
   const modal = useRef();
@@ -152,7 +153,7 @@ const BountyCardDetailsModal = ({ bounty, closeModal, showModal, watchingState,
             <div className='flex text-lg text-muted px-8 pb-4'>
               <div className='flex flex-col w-full mt-2 p-4 border-web-gray border rounded-sm bg-dark-mode gap-2'>
                 Issue content:
-                <section className='markdown-body' dangerouslySetInnerHTML={{ __html: bounty.bodyHTML }}></section>
+                <GithubHtmlRenderer className={'markdown-body'} html={bounty.bodyHTML} />
               </div>
             </div>
           )}

diff --git a/components/Requests/RequestPage/__snapshots__/RequestPage.test.js.snap b/components/Requests/RequestPage/__snapshots__/RequestPage.test.js.snap
@@ -13,7 +13,7 @@ exports[`RequestPage should match initial DOM Snapshot 1`] = `
     <div
       class="border-web-gray border flex justify-center content-center h-24 rounded-sm items-center"
     >
-      You have received 0 new requests.
+      You have received 0 requests.
     </div>
   </div>
   <div

diff --git a/components/Requests/RequestPage/index.js b/components/Requests/RequestPage/index.js
@@ -53,7 +53,7 @@ const RequestPage = () => {
       <div className='my-6'>
         <h2 className='text-2xl font-semibold pb-4 border-b border-web-gray my-4'>Manage your bounties</h2>
         <div className='border-web-gray border flex justify-center content-center h-24 rounded-sm items-center'>
-          You have received {requestsLength} new request{getPlural(requestsLength)}.
+          You have received {requestsLength} request{getPlural(requestsLength)}.
         </div>
       </div>
       <div className='my-6'>

diff --git a/components/Utils/ActionBubble/index.js b/components/Utils/ActionBubble/index.js
@@ -8,6 +8,7 @@ import { ethers } from 'ethers';
 import Jazzicon from './../Jazzicon';
 import useWeb3 from '../../../hooks/useWeb3';
 import ToolTipNew from './../ToolTipNew';
+import GithubHtmlRenderer from '../HtmlReneder';
 
 const ActionBubble = ({ bounty, action }) => {
   const [appState] = useContext(StoreContext);
@@ -208,12 +209,7 @@ const ActionBubble = ({ bounty, action }) => {
           )}
         </div>
         {!action && bodyHTML && (
-          <div
-            className='w-full p-8 p-4 border-web-gray border-t markdown-body'
-            dangerouslySetInnerHTML={{
-              __html: bodyHTML,
-            }}
-          ></div>
+          <GithubHtmlRenderer className={'w-full p-8 p-4 border-web-gray border-t markdown-body'} html={bodyHTML} />
         )}
       </div>
     </div>

diff --git a/components/Utils/HtmlReneder.js b/components/Utils/HtmlReneder.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import DOMPurify from 'dompurify';
+const GithubHtmlRenderer = ({ html, className }) => {
+  const purified = DOMPurify.sanitize(html);
+  return <div className={className} dangerouslySetInnerHTML={{ __html: purified }} />;
+};
+export default GithubHtmlRenderer;
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@ethersproject/experimental": "5.7.0",
     "@ethersproject/providers": "5.1.2",
     "@ethersproject/units": "5.7.0",
+    "@knocklabs/react-notification-feed": "^0.8.4",
     "@kycdao/widget": "0.5.10",
     "@magic-ext/oauth": "7.6.0",
     "@metamask/jazzicon": "2.0.0",
@@ -39,8 +40,8 @@
     "@testing-library/user-event": "14.4.3",
     "@types/uuid": "9.0.1",
     "@walletconnect/ethereum-provider": "2.4.7",
-    "@walletconnect/web3-provider": "1.8.0",
     "@walletconnect/utils": "1.8.0",
+    "@walletconnect/web3-provider": "1.8.0",
     "@web3-react/core": "8.1.2-beta.0",
     "@web3-react/metamask": "8.1.2-beta.0",
     "@web3-react/walletconnect-v2": "8.1.2-beta.0",
@@ -55,6 +56,7 @@
     "canvas-confetti": "1.6.0",
     "chai": "4.3.7",
     "cross-fetch": "3.1.5",
+    "dompurify": "^3.0.1",
     "eslint-config-prettier": "8.7.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-unused-imports": "2.0.0",
@@ -83,8 +85,7 @@
     "styled-components": "^5.3.8",
     "tiny-invariant": "1.3.1",
     "uuid": "9.0.0",
-    "web3": "1.8.2",
-    "@knocklabs/react-notification-feed": "^0.8.4"
+    "web3": "1.8.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.19.1",

diff --git a/pages/contract/[id]/[address].js b/pages/contract/[id]/[address].js
@@ -120,9 +120,18 @@ const address = ({ address, mergedBounty, renderError }) => {
   };
 
   useEffect(() => {
+    let cancel;
     if (internalMenu) {
-      sessionStorage.setItem(address, internalMenu);
+      setTimeout(() => {
+        if (!cancel) {
+          sessionStorage.setItem(address, internalMenu);
+        }
+      }, 1000);
+      console.log(internalMenu);
     }
+    return () => {
+      cancel = true;
+    };
   }, [internalMenu]);
 
   useEffect(() => {
@@ -183,7 +192,6 @@ const address = ({ address, mergedBounty, renderError }) => {
     // set route and populate
     if (address) {
       const route = sessionStorage.getItem(address);
-
       if (route !== internalMenu) {
         setInternalMenu(route || 'View');
       }

diff --git a/yarn.lock b/yarn.lock
@@ -8292,6 +8292,11 @@ dompurify@^2.2.0:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.4.tgz#c17803931dd524e1b68e0e940a84567f9498f4bd"
   integrity sha512-1e2SpqHiRx4DPvmRuXU5J0di3iQACwJM+mFGE2HAkkK7Tbnfk9WcghcAmyWc9CRrjyRRUpmuhPUH6LphQQR3EQ==
 
+dompurify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.1.tgz#a0933f38931b3238934dd632043b727e53004289"
+  integrity sha512-60tsgvPKwItxZZdfLmamp0MTcecCta3avOhsLgPZ0qcWt96OasFfhkeIRbJ6br5i0fQawT1/RBGB5L58/Jpwuw==
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"