84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
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 Revenue 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-700">
|
|
<label
|
|
className="w-full h-full text-white bg-gray-600 hover:bg-gray-700 rounded 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>
|
|
)
|
|
}
|