Add referral address caching to Landing component

[mystic-mango]

This pull request implements a new feature in the Landing component that allows the caching of a referral address from the URL to the local storage. This is achieved by parsing the route parameters and storing any address found in the local storage.

Related Issue

This PR initiates the start of issue #154, it does not close it.

Changes:

This pull request implements a new feature that allows caching of a referral address from the URL to the local storage. This is achieved by adding a dynamic route in the Vue Router and implementing local storage handling in the Landing.vue component.

Below are the detailed changes:

1. Vue Router Modification:

Added a dynamic route parameter to handle referral addresses in the src/router/index.js file:

{
  path: "/ref/:address",
  name: "Referral",
  component: Landing,
}

2. Landing.vue Modification:

Added code to the mounted() lifecycle hook in the Landing.vue component to parse the referral address from the route parameters and store it in the local storage:

async mounted() {
    this.setupTvl();
    if (!this.isMobile()) {
      this.setupApy();
      this.getValidatorInfo();
    }

    // add the referral address check
    const referralAddress = this.$route.params.address;
    if (referralAddress) {
      // Saving in the local storage
      localStorage.setItem('referralAddress', referralAddress);
    }
}

Testing:

Testing method:

Navigating to the site with a referral address in the URL (i.e., https://sharedstake.org/ref/<address>). Checking the console for any errors. Retrieving the referral address from the local storage through the console with window.localStorage.getItem('referralAddress'). Verifying that the retrieved address matches the address passed in the URL. You should repeat these steps when reviewing the PR.

Integration with other components:

Other components can retrieve the referral address from the local storage by calling localStorage.getItem('referralAddress'). This allows for easy access to the referral address throughout the site, whenever it is needed. Please make sure that the code is properly adapted if there are any special conditions or considerations for using the referral address in other components.

[chimera-defi]

Oh wow this is actually really good. lgtm. we just need to forward it to a contract on call.

couple quick qs:

1. is the address available in other pages? e.g. we want to pull it on the stake page and call the contract with the 1 extra param

2. Can you add a link to this commit OR info / howto you added in the description into the docs in the README.md on this repo so it doesnt get lost? And we can merge it in

cc @WJakub for review; but seems pretty straightforward to me

[chimera-defi]

left a comment outlining a future PR for this feature on #155 https://github.com/SharedStake/SharedStake-ui/issues/155#issuecomment-1637218040

[mystic-mango]

is the address available in other pages? e.g. we want to pull it on the stake page and call the contract with the 1 extra param

The address is available across the whole site as it is stored locally upon reaching the landing page. The caveat being the user would have to enter the site through the landing page. Now, this may not be an issue, even preferred perhaps. The referral link would just have to look like https://sharedstake.org/ref/<address> instead of something like https://sharedstake.org/stake/ref/<address>. I don't think the latter would be required at all, but if it was, we can add infrastructure to handle that.

Can you add a link to this commit OR info / howto you added in the description into the docs in the README.md on this repo so it doesnt get lost? And we can merge it in

Yes I will add a referral link overview to the README.md. I will add a commit to this PR for this when I get a chance.

[mystic-mango]

Added implementation overview to the README.md. Once @WJakub is happy with review, I think we can proceed with the merge and then start to flesh out the outstanding parts of feature as outlined in #155.

[chimera-defi]

Hey, v2-dev has shipped. we will need to revisit this.

shits on fire bruh, plz take a look at discord and see if you hotfix the gas issues https://discord.com/channels/779046626236563487/779046626236563491/1131386252264996935 dapp-tx-btn needs the gas fixed but i dunno how

[mystic-mango]

will take a look. 2am here in Dublin but will try...

[chimera-defi]

25 nov -

lets work out a spec first for the whole feature alongside the board of directors election. we can modify and rebase the code after brance is many commits more outdated now

hey @t-e-blake can you rebase this plz? and take a look? going to look into deploying the referral contracts soon this was the first prototype https://github.com/chimera-defi/SharedDeposit/blob/main/contracts/v2/periphery/UserDepositHelper.sol altho i just realized i didnt publish my changes yet. lmk if you need anything or have any suggestions on the api thanks!