feat: add new landing page with separate sections and guidelines

[kaushik-rishi]

Addresses akash-network/console#100

• tested by deploying an instance of sql using custom SDL flow directly from the landing page.
• design according to figma
  • responsiveness
• Check code flow

[anilmurty]

@kaushik-rishi - please confirm that you tested at least a basic tetris deployment with these changes.

@jtary - this PR addresses akash-network/console#100

[jtary]

Hey @kaushik-rishi,

This PR has some conflicts with some other changes that were recently merged. Can you updated to resolve those conflicts? Also, please append the title of the PR with conventional commit keyword. Something like:

feat: add new landing page with separate sections and guidelines

Thanks 👋

[kaushik-rishi]

@anilmurty ignore the merge conflicts as of now.

• design according to figma
  • responsiveness
• tested by deploying an instance of sql using custom SDL flow directly from the landing page.
• Check the flow and error message dialogs again
• Take review on duplication of React Formik into the landing page custom sdl tile

This is just to let you track progress.
Will attach screencap post completion.
The functionality is done, but i'm not confident about the custom sdl flow from the home page tile on the code side. I'll tag @jtary where i need the review, i hope i could get some help.

[anilmurty]

Thanks for the update @kaushik-rishi - great progress! 🚀

[kaushik-rishi]

@jtary - need help with the file https://github.com/akash-network/console/blob/68647d6769ee69b4f88464e8e90660262456435b/web/src/components/NewLanding/CategoryCardsContainer.tsx

As, we needed the Import SDL functionality directly on the home page as well along with /landing/node-deployment, i had to clone the Formik component and all the methods associated with the deployment flow into the above file from previous file (https://github.com/akash-network/console/blob/main/web/src/components/DeploymentStepper/index.tsx)

Any better way to do it ? (Sorry, i'm new to using Formik)

[anilmurty]

@jtary - can you please review/ respond to @kaushik-rishi so he can move forward with this?

[jtary]

Hey @kaushik-rishi

Sorry for the delay. I'll look into this and see what solutions I can come up with.

[jtary]

Hey @kaushik-rishi

I'm working on a bit of refactor to move the deployment business logic out of the stepper so that you'll be able to re-use it as part of the new flow easier. Hopefully have something up tomorrow you can use.

Cheers.

[kaushik-rishi]

Hey @jtary
Thanks for that. LMK once you're done. I'll accordingly make changes in the PR and we can merge it in.

[jtary]

Hey @kaushik-rishi

The changes I was working on a going to take a while longer to complete. I'm going to be OOO for next week, but I found a simpler solution that should work to unblock you.

If you are inside the formik component, you can use the userFormikContext hook to get functions to access and set the SDL manually:

const form = useFormikContext();

const sdl = form.values?.sdl;
form.setFieldValue('sdl', sdlValue);

Otherwise, if you aren't inside the formik component, there are a series of mutations that you can use for the doing the deployment steps. You should only need one for what you're doing, as the once you have the deployment created, you can navigate to the configure-deployment page to handle the rest. Should look something like this:

const result = mxCreateDeployment({ sdl: value.sdl, depositor: value.depositor },
              {
                onSuccess: async (result) => {
                  if (result && result.deploymentId) {
                    // set deployment to localStorage object using Atom
                    const _deployment = await myDeploymentFormat(result, value);
                    localStorage.setItem(_deployment.key, JSON.stringify(_deployment.data));

                    setTimeout(() => {
                      navigate(`/configure-deployment/${result.deploymentId.dseq}`);
                    }, 2000);
                  }
                }
              }
            );

[kaushik-rishi]

Hey @kaushik-rishi

The changes I was working on a going to take a while longer to complete. I'm going to be OOO for next week, but I found a simpler solution that should work to unblock you.

If you are inside the formik component, you can use the userFormikContext hook to get functions to access and set the SDL manually:

const form = useFormikContext();

const sdl = form.values?.sdl;
form.setFieldValue('sdl', sdlValue);

Otherwise, if you aren't inside the formik component, there are a series of mutations that you can use for the doing the deployment steps. You should only need one for what you're doing, as the once you have the deployment created, you can navigate to the configure-deployment page to handle the rest. Should look something like this:

const result = mxCreateDeployment({ sdl: value.sdl, depositor: value.depositor },
              {
                onSuccess: async (result) => {
                  if (result && result.deploymentId) {
                    // set deployment to localStorage object using Atom
                    const _deployment = await myDeploymentFormat(result, value);
                    localStorage.setItem(_deployment.key, JSON.stringify(_deployment.data));

                    setTimeout(() => {
                      navigate(`/configure-deployment/${result.deploymentId.dseq}`);
                    }, 2000);
                  }
                }
              }
            );

Thanks @jtary . Acknowledged.
Having exams till today late evening. Will try to change accordingly

[anilmurty]

Hey @kaushik-rishi just checking in here. Hope your exams went well. Are you able to work on this, this week?