Congratulations
@@ -341,12 +346,66 @@ const CustomEnvironment = () => {
return null;
};
+//INTRO TO CUSTOMIZER TOUR
+const steps = [
+ {
+ selector: '.first-step',
+ content: () => {
+ return (
+
+
Give your Cryptobot some muscles!
+
Choose different body parts for your cryptobot.
+
+ );
+ },
+ style: {
+ backgroundColor: '#061B2F',
+ color: 'white',
+ },
+ },
+ {
+ selector: '.second-step',
+ content: () => {
+ return (
+
+
+ Give your Cryptobot a Unique Style!
+
+
+ Select a body part to give it a color from the palette below or
+ choose a custom color.
+
+
+ );
+ },
+ style: {
+ backgroundColor: '#061B2F',
+ color: 'white',
+ },
+ },
+ {
+ selector: '.third-step',
+ content: () => {
+ return (
+
+
Claim your Unique Cryptobot!
+
After you are done customizing claim your cryptobot🤖
+
+ );
+ },
+ style: {
+ backgroundColor: '#061B2F',
+ color: 'white',
+ },
+ },
+];
+
const Customizer = ({ location }) => {
const [selectPart, setselectPart] = useState(1);
- const [headCount, setHeadCount] = useState(0);
- const [armCount, setArmCount] = useState(0);
- const [bodyCount, setBodyCount] = useState(0);
- const [legCount, setLegCount] = useState(0);
+ const [headCount, setHeadCount] = useState(getRandomNumber(0, 4));
+ const [armCount, setArmCount] = useState(getRandomNumber(0, 4));
+ const [bodyCount, setBodyCount] = useState(getRandomNumber(0, 4));
+ const [legCount, setLegCount] = useState(getRandomNumber(0, 4));
const beacon = useContext(BeaconContext);
const [isModalOpen, setIsModalOpen] = useState(true);
@@ -419,6 +478,24 @@ const Customizer = ({ location }) => {
);
}
+ const [isTourOpen, setIsTourOpen] = useState(true);
+
+ //persist tour to local storage
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ let tour = localStorage.getItem('isTourOpen');
+ if (tour !== null) {
+ setIsTourOpen(JSON.parse(tour));
+ } else {
+ setIsTourOpen(true);
+ }
+ }
+ }, [isModalOpen]);
+
+ useEffect(() => {
+ localStorage.setItem('isTourOpen', JSON.stringify(isTourOpen));
+ }, [isTourOpen]);
+
const [isUser] = useAtom(isUserAtom);
const [user, setUser] = useAtom(userAtom);
@@ -609,11 +686,39 @@ const Customizer = ({ location }) => {
+ {!isModalOpen ? (
+
setIsTourOpen(false)}
+ accentColor="#2563EB"
+ lastStepNextButton={
+ Let's get started!
+ }
+ className="text-white"
+ prevButton={
+
+ }
+ nextButton={
+
+ }
+ />
+ ) : (
+ ''
+ )}
+