More polish tweaks + bump version number

kewbish · Jan 13, 2023 · fece6e6 · fece6e6
1 parent d77c8c3
commit fece6e6
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -12,19 +12,19 @@ See [documentation here](https://github.com/kewbish/cobweb/wiki) for an installa
 
 --- 
 
-Cobweb is a [Web Monetization](https://webmonetization.org/)-inspired tool to make supporting other teen creators and getting paid for your content easier.
+Cobweb is a tool to make supporting other teen creators and getting paid for your content easier. Learn and interact directly with the blockchain, all while earning real tokens.
 
-Cobweb lets you stream micropayments from your browser to your favourite teen creators. For creators, this means you can add a single tag on your content to get paid. For fans, this means you can automatically support other teen creators by streaming tips in the background.
+Cobweb lets you stream micropayments from your browser to your favourite creators. For creators, this means you can add a single tag on your content to earn Ethereum tokens. For fans, this means you can automatically support others by streaming tips in the background. It's a fun, supportive community to learn and earn with.
 
 ---
 
-Teens today have grown up in a world of endless content and possibility. We've witnessed the rise of the Internet, and have experienced first-hand how passive and addictive scrolling down social media can be. Cobweb aims to incentivize teens to create more content and to be compensated for their creativity.
+Teens today have grown up in a world of endless content and possibility. We've witnessed the rise of the Internet, and have experienced first-hand how passive and addictive scrolling down social media can be. Cobweb aims to incentivize teens to create more content and to be compensated for their hard work and creativity.
 
-As well, teens looking to explore the vast world of decentralized technology like blockchain or Web3 DApps are often limited because of age or geographical restrictions. Cobweb helps teens get jump-started with the blockchain by granting them a base amount of crypto and empowering them to earn real tokens in real time.
+As well, teens looking to explore the vast world of decentralized technology like blockchain or Web3 DApps are often limited because of age or geographical restrictions. Cobweb helps teens get jump-started with the blockchain by granting them a base amount of crypto and empowering them to earn real tokens in real time. Unlike other platforms that simulate the blockchain or only provide text tutorials, Cobweb lets teens have skin in the game by directly earning tokens and interacting with the blockchain.
 
 ---
 
-Cobweb is MIT-licensed and fully open source. It's available as a free [Chrome extension](https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg), and can be packed as an extension from this source code should you wish to do so.
+Cobweb is MIT-licensed and fully open source. It's available as a free [Chrome extension](https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg), and can be packed as an extension from this source code should you wish to do so. View the [privacy policy here](https://kewbi.sh/cobweb/privacy).
 
 ---
 

diff --git a/build.crx b/build.crx
diff --git a/landing/index.html b/landing/index.html
@@ -19,7 +19,7 @@
     <meta name="twitter:image" content="./og.png">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Cobweb - A new way for teens to learn and earn on the blockchain">
-    <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
+    <meta name="twitter:description" content="Cobweb is a tool to make supporting other teen creators and getting paid for your content easier. Based on the Ethereum blockchain, Cobweb allows teens to explore the blockchain and earn their first tokens.">
   </head>
   <body>
     <nav class="card navbar fixed-top">
@@ -29,16 +29,17 @@ <h2 class="display mb-0">Cobweb</h1>
         <a href="#why">why Cobweb?</a>
         <a href="#how">how it works</a>
         <a href="https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg">download</a>
-        <a href="#differences">differences</a>
+        <!--<a href="#differences">differences</a>-->
+        <a href="https://kewbi.sh/cobweb/privacy">privacy policy</a>
         <a href="https://github.com/kewbish/cobweb/wiki" target="_blank" rel="noopener noreferrer">docs</a>
       </div>
     </nav>
     <div class="hero">
         <h1 class="display display-extra-big">Cobweb</h1>
-        <p class="p-20">is a <a href="https://webmonetization.org/">Web Monetization-inspired</a>, <a href="https://ethereum.org/">Ethereum-based</a> tool to make supporting other teen creators and getting paid for your content easier.</p>
+        <p class="p-20">is an <a href="https://ethereum.org/">Ethereum-based</a> tool to make learning and earning on the blockchain easier. Support other teen creators and get paid for your projects and work.</p>
         <div>
             <a href="https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg" class="btn glassy-cw-btn" role="button">download here</a>
-            <a href="https://github.com/kewbish/cobweb/wiki/Cobweb-Tags-&-Account-Page" target="_blank" rel="noopener noreferrer" class="btn glassy-cw-btn ms-1" role="button">...or learn how to add Cobweb to your content</a>
+            <a href="https://github.com/kewbish/cobweb/wiki/Cobweb-Tags-&-Account-Page" target="_blank" rel="noopener noreferrer" class="btn glassy-cw-btn ms-1" role="button">...or learn how to add Cobweb to your work</a>
         </div>
     </div>
     <div class="container" id="about">
@@ -57,7 +58,7 @@ <h3 class="display mb-0" id="simulator-header">Cobweb</h1>
                 </div>
             </div>
             <div class="col">
-                <p>Cobweb lets you stream micropayments from your browser to your favourite teen creators. For creators, this means you can add a single tag on your content to get paid. For fans, this means you can automatically support other teen creators by streaming tips in the background.</p><p>
+                <p>Cobweb lets you stream micropayments from your browser to your favourite teen creators. For creators, this means you can add a single tag on your work to get paid. For fans, this means you can automatically support other teen creators by streaming tips in the background.</p><p>
                 Cobweb is affordable and user-controlled too, unlike pricy direct subscriptions. Users can choose to allow web monetization for one visit to unlock exclusive content just once. Cobweb helps shift from a passive web browsing experience to a creative, community-focused one.
                 </p><p>As a plus, you'll earn your first Ethereum tokens, and learn to interact directly with the blockchain.</p>
                 <a href="https://github.com/kewbish/cobweb/releases/latest" target="_blank" rel="noopener noreferrer" class="btn glassy-cw-btn mt-1" role="button">get started now</a>
@@ -72,7 +73,7 @@ <h2 class="display mx-auto text-center mb-3">get started</h2>
                 <a href="https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg" class="btn glassy-cw-btn mt-1" role="button">download</a>
 </div>
 <div class="col">
-    <p>Cobweb is MIT-licensed and fully open source - the source is <a href="https://github.com/kewbish/cobweb">available on GitHub</a> should you wish to build from source. The checksum of the current version is <code style="word-break:break-all;">09fafee7dac469e2fd4ba75057d69c4ca166089a410015342d39d15a282323c6</code>.
+    <p>Cobweb is MIT-licensed and fully open source - the source is <a href="https://github.com/kewbish/cobweb">available on GitHub</a> should you wish to build from source. The checksum of the current version is <code style="word-break:break-all;">06dbfed9459bd77675389d82408efbe91ce3d4f2506dc94e2bacfee224cfbcca</code>.
 </p>
                 <a href="https://github.com/kewbish/cobweb" class="btn glassy-cw-btn mt-1" role="button">view source</a>
 </div>
@@ -87,7 +88,7 @@ <h2 class="display mx-auto text-center mb-3">get started</h2>
     <h2 class="display mx-auto text-center mb-3">why cobweb?</h2>
         <div class="row">
 <div class="col">
-    <p class="text-end">Teens today have grown up in a world of endless content and possibility. We've witnessed the rise of the Internet, and have experienced first-hand how passive and addictive scrolling down social media can be. Cobweb aims to incentivize teens to create more content and to be compensated for their creativity.</p>
+    <p class="text-end">Teens today have grown up in a world of endless content and possibility. We've witnessed the rise of the Internet, and have experienced first-hand how passive and addictive scrolling down social media can be. Cobweb aims to incentivize teens to create more and to allow teens to be compensated for their creativity.</p>
     <p class="text-end">As well, teens looking to explore the vast world of decentralized technology like blockchain or Web3 DApps are often limited because of age or geographical restrictions. Cobweb helps teens get jump-started with the blockchain by granting them a base amount of crypto and empowering them to earn real tokens in real time.</p>
 </p><p class="text-end">
 For more technical differences, see <a href="https://github.com/kewbish/cobweb/wiki">Cobweb's docs</a>.
@@ -130,7 +131,7 @@ <h2 class="display mx-auto text-center mb-3">how it works</h2>
 
         </div>
     </div>
-<div class="container pt-3" id="differences">
+    <!--<div class="container pt-3" id="differences">
     <h2 class="display mx-auto text-center mb-3">differences</h2>
         <div class="row">
 <div class="col">
@@ -175,13 +176,13 @@ <h2 class="display mx-auto text-center mb-3">differences</h2>
     </div>
 </div>
         </div>
-    </div>
+    </div>-->
 
     <div id="footer">
         <p class="text-center">made by <a href="https://kewbi.sh">kewbish</a> · <a href="https://github.com/kewbish/cobweb">open source on GitHub</a></p>
     </div>
   </body>
-  <script>
+  <!--<script>
       const hideAll = () => {
         document.getElementById("differences-content-purpose").style.display = "none";
         document.getElementById("differences-content-crypto").style.display = "none";
@@ -204,5 +205,5 @@ <h2 class="display mx-auto text-center mb-3">differences</h2>
         hideAll();
         document.getElementById("differences-content-javascript").style.display = "block";
       }
-  </script>
+  </script>-->
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Cobweb",
-  "version": "0.0.4",
-  "description": "A Web3-based Web Monetization tool enabling one-click content monetization for creative teens.",
+  "version": "0.0.5",
+  "description": "A Web3-based tool enabling creative teens to learn and earn on the blockchain.",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/manifest.json b/src/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Cobweb",
-  "description": "A Web3-based Web Monetization tool enabling one-click content monetization for creative teens.",
-  "version": "0.0.4",
+  "description": "A Web3-based tool enabling creative teens to learn and earn on the blockchain.",
+  "version": "0.0.5",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",

diff --git a/src/pages/Popup/DefaultSettings.tsx b/src/pages/Popup/DefaultSettings.tsx
@@ -28,10 +28,12 @@ const DefaultSettings = () => {
     const weeks = new bootstrap.Popover(document.getElementById("eth-weeks"));
     const months = new bootstrap.Popover(document.getElementById("eth-months"));
     return () => {
-      hours.dispose();
-      days.dispose();
-      weeks.dispose();
-      months.dispose();
+      try {
+        hours.dispose();
+        days.dispose();
+        weeks.dispose();
+        months.dispose();
+      } catch {}
     };
   }, []);
 
@@ -59,6 +61,7 @@ const DefaultSettings = () => {
             text={
               "This is the amount of ETHx streamed per second when no site-specific settings are found."
             }
+            darker
           />
           <div className="d-flex flex-row gap-1">
             <Link to="/settings/list">
@@ -95,7 +98,7 @@ const DefaultSettings = () => {
               </label>
               <p
                 className="mb-0"
-                style={{ fontSize: 18 }}
+                style={{ fontSize: 16 }}
                 id="eth-hours"
                 data-bs-toggle="popover"
                 data-bs-trigger="hover focus"
@@ -124,7 +127,7 @@ const DefaultSettings = () => {
               </p>
               <p
                 className="mb-0"
-                style={{ fontSize: 18 }}
+                style={{ fontSize: 16 }}
                 id="eth-days"
                 data-bs-toggle="popover"
                 data-bs-trigger="hover focus"
@@ -153,7 +156,7 @@ const DefaultSettings = () => {
               </p>
               <p
                 className="mb-0"
-                style={{ fontSize: 18 }}
+                style={{ fontSize: 16 }}
                 id="eth-weeks"
                 data-bs-toggle="popover"
                 data-bs-trigger="hover focus"
@@ -182,7 +185,7 @@ const DefaultSettings = () => {
               </p>
               <p
                 className="mb-0"
-                style={{ fontSize: 18 }}
+                style={{ fontSize: 16 }}
                 id="eth-months"
                 data-bs-toggle="popover"
                 data-bs-trigger="hover focus"
@@ -209,7 +212,7 @@ const DefaultSettings = () => {
                 )).toFixed(4)}{" "}
                 ETHx per month
               </p>
-              <p className="mb-0" style={{ fontSize: 18 }}>
+              <p className="mb-0" style={{ fontSize: 16 }}>
                 to the site.
               </p>
             </div>

diff --git a/src/pages/Popup/ManageBalances.tsx b/src/pages/Popup/ManageBalances.tsx
@@ -20,7 +20,9 @@ const ManageBalances = () => {
   useEffect(() => {
     const balance = new bootstrap.Popover(document.getElementById("balance"));
     return () => {
-      balance.dispose();
+      try {
+        balance.dispose();
+      } catch {}
     };
   }, []);
 
@@ -44,7 +46,9 @@ const ManageBalances = () => {
       updatedPopover = bootstrap.Popover.getOrCreateInstance(popover);
     }
     return () => {
-      updatedPopover?.dispose();
+      try {
+        updatedPopover?.dispose();
+      } catch {}
     };
   }, [balanceRes]);
 

diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx
@@ -19,6 +19,7 @@ import Onboarding from "./components/OnboardingCarousel";
 import ToastHandler from "./components/ToastHandler";
 import BalanceDisplay from "./components/BalanceDisplay";
 import fallbackRate from "../shared/fallbackRate";
+import InfoPopover from "./components/InfoPopover";
 
 import "bootstrap-icons/font/bootstrap-icons.css";
 // @ts-expect-error
@@ -70,7 +71,9 @@ const Popup = () => {
         setSearchParams([]);
       });
     return () => {
-      welcomeModal.dispose();
+      try {
+        welcomeModal.dispose();
+      } catch {}
     };
   }, [searchParams]);
 
@@ -119,7 +122,9 @@ const Popup = () => {
       updatedPopover = bootstrap.Popover.getOrCreateInstance(popover);
     }
     return () => {
-      updatedPopover?.dispose();
+      try {
+        updatedPopover?.dispose();
+      } catch {}
     };
   }, [currentStream]);
 
@@ -130,26 +135,12 @@ const Popup = () => {
       newCollapse = new bootstrap.Collapse(collapse);
     }
     return () => {
-      newCollapse?.dispose();
+      try {
+        newCollapse?.dispose();
+      } catch {}
     };
   }, [currentStream]);
 
-  useEffect(() => {
-    const noETHx = document.getElementById("no-ethx");
-    let popover: bootstrap.Popover | null = null;
-    if (
-      searchParams.get("onboarding") &&
-      balanceRes &&
-      BigNumber.from(balanceRes).eq(constants.Zero)
-    ) {
-      popover = new bootstrap.Popover(noETHx);
-      popover.show();
-    }
-    return () => {
-      popover?.dispose();
-    };
-  }, [balanceRes]);
-
   const editStream = async ({
     oldKey,
     newKey,
@@ -315,22 +306,7 @@ const Popup = () => {
                 <div id="collapse" className="collapse" data-bs-toggle="false">
                   <div className="d-flex justify-content-evenly gap-2 mt-2">
                     <Link to="balance">
-                      <button
-                        className="btn p-1 glassy-cw-btn"
-                        data-bs-toggle="popover"
-                        title={
-                          balanceRes &&
-                          BigNumber.from(balanceRes).eq(constants.Zero)
-                            ? "You don't have any ETHx. Click here to upgrade more!"
-                            : undefined
-                        }
-                        id="no-ethx"
-                        data-bs-template={
-                          '<div class="popover popover-squarer" role="tooltip"><div class="popover-arrow popover-arrow-override"></div><p class="popover-header text-small"></p><div class="popover-body"></div></div>'
-                        }
-                        data-bs-placement="bottom"
-                        data-bs-container="body"
-                      >
+                      <button className="btn p-1 glassy-cw-btn">
                         Manage balances
                       </button>
                     </Link>
@@ -352,7 +328,10 @@ const Popup = () => {
                 <h2 style={{ fontWeight: 400, marginBottom: 0 }}>
                   Not Streaming
                 </h2>
-                <p className="mb-0" style={{ fontSize: 16, color: "#c6dcef" }}>
+                <p
+                  className="mb-1 d-inline"
+                  style={{ fontSize: 16, color: "#c6dcef" }}
+                >
                   Create a stream by going to any page with a{" "}
                   <a
                     href="https://github.com/kewbish/cobweb/wiki/Cobweb-Tags-&-Account-Page"
@@ -364,20 +343,23 @@ const Popup = () => {
                   </a>{" "}
                   on it!
                 </p>
+                <InfoPopover
+                  text="Please click confirm on any MetaMask popups - these allow Cobweb to create streams."
+                  moreSquare
+                />
+                {balanceRes && BigNumber.from(balanceRes).eq(constants.Zero) ? (
+                  <p
+                    className="mb-0 mt-1"
+                    style={{ fontSize: 16, color: "#c6dcef" }}
+                  >
+                    You also don't have any ETHx, so you can't make any streams.
+                    Click 'Manage balances' to upgrade some ETH into ETHx!
+                  </p>
+                ) : null}
                 <hr className="my-1 mb-2" />
                 <div className="d-flex justify-content-evenly gap-2">
                   <Link to="balance">
-                    <button
-                      className="btn p-1 glassy-cw-btn"
-                      data-bs-toggle="popover"
-                      title="You don't have any ETHx. Click here to upgrade more!"
-                      id="no-ethx"
-                      data-bs-template={
-                        '<div class="popover popover-squarer" role="tooltip"><div class="popover-arrow"></div><p class="popover-header text-small"></p><div class="popover-body"></div></div>'
-                      }
-                      data-bs-container="body"
-                      data-bs-placement="bottom"
-                    >
+                    <button className="btn p-1 glassy-cw-btn">
                       Manage balances
                     </button>
                   </Link>

diff --git a/src/pages/Popup/Welcome.tsx b/src/pages/Popup/Welcome.tsx
@@ -60,8 +60,8 @@ const Welcome = () => {
               Cobweb
             </h1>
             <p>
-              An Ethereum-based Web Monetization tool, enabling creation like
-              never before.
+              An Ethereum-based tool making learning and earning on the
+              blockchain easier for teens.
             </p>
             <p style={{ fontSize: 16 }} className="text-muted mb-1">
               Switch accounts in Metamask, or proceed: