Merge pull request #107 from public-awesome/develop

Sync development>main

components/IncomeDashboardDisclaimer.tsx

@@ -0,0 +1,83 @@
+import { useRef, useState } from 'react'
+
+import { Button } from './Button'
+
+export interface IncomeDashboardDisclaimerProps {
+  creatorAddress: string
+}
+export const IncomeDashboardDisclaimer = (props: IncomeDashboardDisclaimerProps) => {
+  const [isChecked, setIsChecked] = useState(false)
+  const checkBoxRef = useRef<HTMLInputElement>(null)
+
+  const handleCheckBox = () => {
+    checkBoxRef.current?.click()
+  }
+
+  return (
+    <div>
+      <input className="modal-toggle" defaultChecked={false} id="my-modal-1" ref={checkBoxRef} type="checkbox" />
+      <label className="cursor-pointer modal" htmlFor="my-modal-1">
+        <label
+          className="absolute top-[25%] bottom-5 left-1/3 max-w-[600px] max-h-[450px] border-2 no-scrollbar modal-box"
+          htmlFor="temp"
+        >
+          {/* <Alert type="warning"></Alert> */}
+          <div className="text-xl font-bold">
+            <div className="text-sm font-thin">
+              The tool provided on this website is for informational purposes only and does not constitute tax, legal or
+              financial advice. The information provided by the tool is not intended to be used for tax planning, tax
+              avoidance, promoting, marketing or related purposes. Users should consult their own tax, legal or
+              financial advisors prior to acting on any information provided by the tool. By clicking accept below, you
+              agree that neither Stargaze Foundation or Public Awesome, LLC or any of its directors, officers,
+              employees, or advisors shall be responsible for any errors, omissions, or inaccuracies in the information
+              provided by the tool, and shall not be liable for any damages, losses, or expenses arising out of or in
+              connection with the use of the tool. Furthermore, you agree to indemnify Stargaze Foundation, Public
+              Awesome, LLC and any of its directors, officers, employees and advisors against any claims, suits, or
+              actions related to your use of the tool.
+            </div>
+            <br />
+            <div className="flex flex-row pb-4">
+              <label className="flex flex-col space-y-1" htmlFor="terms">
+                <span className="text-sm font-light text-white">I agree with the terms above.</span>
+              </label>
+              <input
+                checked={isChecked}
+                className="p-2 mb-1 ml-2"
+                id="terms"
+                name="terms"
+                onClick={() => setIsChecked(!isChecked)}
+                type="checkbox"
+              />
+            </div>
+            <br />
+            Are you sure to proceed to the Creator Income Dashboard?
+          </div>
+          <div className="flex justify-end w-full">
+            <Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-600">
+              <label
+                className="w-full h-full text-white bg-gray-600 hover:bg-gray-500 border-0 btn modal-button"
+                htmlFor="my-modal-1"
+              >
+                Go Back
+              </label>
+            </Button>
+            <a
+              className="my-4"
+              href={
+                isChecked
+                  ? `https://metabase.constellations.zone/public/dashboard/4d751721-51ab-46ff-ad27-075ec8d47a17?creator_address=${props.creatorAddress}&chart_granularity_(day%252Fweek%252Fmonth)=week`
+                  : undefined
+              }
+              rel="noopener"
+              target="_blank"
+            >
+              <Button className="px-5 w-full h-full" isDisabled={!isChecked} onClick={() => handleCheckBox()}>
+                Confirm
+              </Button>
+            </a>
+          </div>
+        </label>
+      </label>
+    </div>
+  )
+}

components/Sidebar.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
 import clsx from 'clsx'
 import { Anchor } from 'components/Anchor'
 import { useWallet } from 'contexts/wallet'
@@ -5,7 +7,8 @@ import { useRouter } from 'next/router'
 // import BrandText from 'public/brand/brand-text.svg'
 import { footerLinks, socialsLinks } from 'utils/links'
 
-import { BASE_FACTORY_ADDRESS } from '../utils/constants'
+import { BASE_FACTORY_ADDRESS, NETWORK } from '../utils/constants'
+import { IncomeDashboardDisclaimer } from './IncomeDashboardDisclaimer'
 import { SidebarLayout } from './SidebarLayout'
 import { WalletLoader } from './WalletLoader'
 
@@ -14,6 +17,7 @@ const routes = [
   { text: 'Create a Collection', href: `/collections/create/`, isChild: true },
   { text: 'My Collections', href: `/collections/myCollections/`, isChild: true },
   { text: 'Collection Actions', href: `/collections/actions/`, isChild: true },
+  { text: 'Creator Income Dashboard', href: `/`, isChild: true },
   { text: 'Contract Dashboards', href: `/contracts/`, isChild: false },
   { text: 'Base Minter Contract', href: `/contracts/baseMinter/`, isChild: true },
   { text: 'Vending Minter Contract', href: `/contracts/vendingMinter/`, isChild: true },
@@ -40,7 +44,8 @@ export const Sidebar = () => {
       {/* wallet button */}
       <WalletLoader />
       {/* main navigation routes */}
-      {tempRoutes.map(({ text, href, isChild }) => (
+      {tempRoutes.map(({ text, href, isChild }) =>
+        text !== 'Creator Income Dashboard' ? (
           <Anchor
             key={href}
             className={clsx(
@@ -52,7 +57,8 @@ export const Sidebar = () => {
                   !router.asPath.substring(0, router.asPath.lastIndexOf('/') + 1).includes(href) && isChild,
               },
               {
-              'text-stargaze': router.asPath.substring(0, router.asPath.lastIndexOf('/') + 1).includes(href) && isChild,
+                'text-stargaze':
+                  router.asPath.substring(0, router.asPath.lastIndexOf('/') + 1).includes(href) && isChild,
               }, // active route styling
               // { 'text-gray-500 pointer-events-none': disabled }, // disabled route styling
             )}
@@ -60,7 +66,26 @@ export const Sidebar = () => {
           >
             {text}
           </Anchor>
-      ))}
+        ) : NETWORK === 'mainnet' ? (
+          <button
+            className={clsx(
+              'font-extrabold uppercase bg-clip-text border-none', // styling
+              'text-gray hover:text-white hover:bg-white/5 transition-colors', // hover styling
+              'py-0 -mt-3 -ml-11 text-sm font-bold',
+            )}
+            type="button"
+          >
+            <label
+              className="w-full h-full text-gray hover:text-white bg-clip-text bg-transparent hover:bg-white/5 border-none btn modal-button"
+              htmlFor="my-modal-1"
+            >
+              Income Dashboard
+            </label>
+          </button>
+        ) : null,
+      )}
+
+      <IncomeDashboardDisclaimer creatorAddress={wallet.address ? wallet.address : ''} />
 
       <div className="flex-grow" />