Adds a ENS address selector to the Profile page

[ramirotw]

Summary

Close #190

This adds a new AddressSelector component to the Profile page with all the ENS addresses the user has. It uses the official ENS subgraph

[github-actions]

CLA Assistant Lite:
Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

---

I have read the CLA Document and I hereby sign the CLA

---

_{You can retrigger the CLA Action by commenting recheckcla in this Pull Request}

[elena-zh]

Hey @ramirotw , could you please provide me the PR preview link please?

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[ramirotw]

@elena-zh the build is finally fixed.

Btw, the CLA check fails because of the prettier bot that commited Fix code style issues with Prettier

{
  id: 'MDQ6VXNlcjU5MjgzODYy',
  databaseId: 59283862,
  login: 'lint-action'
}

[ramirotw]

I introduced this change to force the CI script to run the postinstall npm script which runs the yarn graphql:generate script which generates the graphql TS types in src/state/data/generated.ts that is needed to import the EnsNamesQuery type.

[elena-zh]

Hey @ramirotw !
Nice changes!
Unfortunately, I can't finish testing until the issue cowprotocol/explorer#63 is fixed.

Some tiny notes from the UI side:

1. Maybe we should not show an 'expandable' dropdown when a connected wallet does not have an ENS name for an account? WDYT?
   
2. Once connected to an account with ENS name, maybe we should show the an affiliate link with ENS name by default instead of the address, as the account info shows ENS name?
   
3. Can we align link nicer in a mobile view?
   

Thanks!

[ramirotw]

3. Can we align link nicer in a mobile view?

@alongoni any idea on how we could improve this on mobile?

[ramirotw]

1. Maybe we should not show an 'expandable' dropdown when a connected wallet does not have an ENS name for an account? WDYT?
   

done

2. Once connected to an account with ENS name, maybe we should show the an affiliate link with ENS name by default instead of the address, as the account info shows ENS name?

I have already done this 0bc1579#diff-091719e9c8faa4dd8e97d8f607ee1f288ba02bb4f6be40589de8de2411e589baL36 but there were a few issues while switching accounts and maintaining state so to keep things simple I removed it. Maybe we can add that feature after this gets merged.

[elena-zh]

Hey @ramirotw , seems that the last commit has failed, as i do not see any changes relates to the case 1.
As for the case 2, I have created a separate issue for this case #404 .
@alongoni , could you please take a look at the case 3?

[ramirotw]

Hey @ramirotw , seems that the last commit has failed, as i do not see any changes relates to the case 1.

@elena-zh aren't you seeing this?

[elena-zh]

Hey @ramirotw , seems that the last commit has failed, as i do not see any changes relates to the case 1.

@elena-zh aren't you seeing this?

@ramirotw , I see this.. However, I thought that the fix should disable the dropdown when a user does not have an ENS name, so I thought that there were issues with the last commit.
By disabling the dropdown I mean this:

[ramirotw]

@elena-zh sorry for the misunderstanding. Now the dropdown should be disabled when there are no ens names

[elena-zh]

@ramirotw , great, thank you!
But could we please remove this hovered' and 'clicked' effects from the dropdown now?

I still see the arrow that should expand the dropdown, so it seems that it is still enabled.

[ramirotw]

I still see the arrow that should expand the dropdown, so it seems that it is still enabled.

that is the disabled state of the dropdown, or you mean to remove entirely the dropdown as we do for Rinkeby/GC?

[alfetopito]

Awesome! I bet Vitalik would like that =P

And I do agree with Elena's comment of not showing the dropdown at all when there's a single option (no ENS).
Feels like it gives the false impression it's clickable, even though it's disabled.

[alongoni]

3. Can we align link nicer in a mobile view?
   

@alongoni any idea on how we could improve this on mobile?

Maybe we can use a shorter version of the address e.g: 0x3d2a...1b21

[elena-zh]

I still see the arrow that should expand the dropdown, so it seems that it is still enabled.

that is the disabled state of the dropdown, or you mean to remove entirely the dropdown as we do for Rinkeby/GC?

Yes, I would remove it at all when an account does not have a ENS name

[elena-zh]

3. Can we align link nicer in a mobile view?
   

@alongoni any idea on how we could improve this on mobile?

Maybe we can use a shorter version of the address e.g: 0x3d2a...1b21

that works for me!

[elena-zh]

Hey @ramirotw , great changes!
I was also able to check that the trade was recorded to the correct referrer (my previous tests) despite of the fact that the issue cowprotocol/explorer#63 is still here.

However, sometimes I face this issue: when I share a referral link with an ENS name, the app shows me 'invalid' banner for a couple of seconds.
More often I can face it when I paste the link to a new browser/1st time opening the link. Then, the issue becomes not reproducible.
See the video: https://watch.screencastify.com/v/qvteh2AKFxhzxxUwUAMz

Could you please take a look into this issue?

Thanks!

[ramirotw]

Hey @ramirotw , great changes! I was also able to check that the trade was recorded to the correct referrer (my previous tests) despite of the fact that the issue cowprotocol/explorer#63 is still here.

However, sometimes I face this issue: when I share a referral link with an ENS name, the app shows me 'invalid' banner for a couple of seconds. More often I can face it when I paste the link to a new browser/1st time opening the link. Then, the issue becomes not reproducible. See the video: https://watch.screencastify.com/v/qvteh2AKFxhzxxUwUAMz

Could you please take a look into this issue?

Thanks!

hey @elena-zh, I fixed both issues. Please run a few affiliate workflows to be sure nothing broke because I did some changes to fix the first invalid state

[elena-zh]

Hey @ramirotw , changes look great!

The only issue I can mention is that due to Explorer issue cowprotocol/explorer#63 Cowswap app does not receive a successful transaction pp-up, so a referral URL is not removed from the local storage after a successful trade and remains to be displayed.
But this issue is not related to your changes, so the PR is approved.

Thanks