Add claim vesting iframe hook

[JeanNeiverth]

Summary

• Create the Claim Vesting Hook in the dapps folder as an IFrame linked to Bleu vercel deployed app
• Add Claim Vesting Hook in the hookStore, as both pre and post hook, in all chains the LlamaPay vesting factory is implemented (Mainnet, Gnosis and Arbitrum)
• Edit IFrameContainer min-height to 300px for aesthetic reasons

Errors cases:

• Insert a valid Ethereum address
• Please connect your wallet first
• Address is not a valid vesting contract
• You are not the contract recipient

Example:

Success case:

How to test:

1. Access /#/100/swap/hooks/WXDAI

2. Connect your wallet and switch to Gnosis chain

3. In Hooks > Add Pre-Hook Action, the Claim Vesting Hook should appear in the "All hooks" section

4. Insert a valid vesting contract. Here is a mapping of addresses to vesting contracts that should work:

Address:
0x9FA3c00a92Ec5f96B1Ad2527ab41B3932EFEDa58
Vesting Contract:
0x77e62665422fc216ca278b7655b3329dc5ba173c

Address:
0xFF714b8b0e2700303eC912BD40496C3997ceEa2b
Vesting Contract:
0xf078d4ADBa99BaC7Ab4a64ea3F24b6307107198d

Address:
0x8FAb71C0d4272698A3B2d1F3Ed5FC3c1B9b3E531
Vesting Contract:
0xac7CBD5DD1D64bF6C9cdCceCf0cb7c909C3AF4A6

[vercel]

@JeanNeiverth is attempting to deploy a commit to the cow Team on Vercel.

A member of the Team first needs to authorize it.

[JeanNeiverth]

Just letting a note here: if you change the CoW light/dark mode during the hook app execution, you will see it does not change the hook theme, although it will set the theme correctly if you quit and reopen the hook.

The hook is implemented in a way it should respond to context.isDarkMode changes, so I think what is causing the issue is the @cowprotocol/hook-dapp-lib needs to be updated to trigger this theme change.

@alexdorsch @alfetopito can you check this?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
swap-dev	✅ Ready (Inspect)	Visit Preview	Sep 30, 2024 9:16am

[elena-zh]

Hey @JeanNeiverth , great job! Thank you for building this hook, and for the great PR description.

Still, I have some issues found:

1. General styling: I think, all elements should look more or less the same across all available hooks in the app. So, it would be great to:

• change 'Add hook' button to 'Add Pre-hook' and 'Add Post-hook' (accordingly) like we do for 'Claim GNO from validators' and other hooks
  

• same for 'edit hook' button: It would be nice to name it 'Update Pre-hook' and 'Update Post-hook' (accordingly)

• hide the 'available amount' field to a not connected user
  

• hide the 'available amount' field when it is 0

• show a validation message in the same manner as we do for other hooks. Examples:
  
  

• truncate trailing and preceding spaces in the address field
  

2. There are also some style issues like:

• it would be great to improve the 'Total Available' field in a mobile view
  

• I think, it would be nice to remove 'Ethereum' word from the 'Insert a valid Ethereum address' validation message as it does not conform to Gnosis chain
  

• Fix an issue with the fields color on a network change: when this hook details is open, switch the there from light to dark (or vice versa):
  

3. Hooks execution/validation:

• Is this OK that I have some dust left to claim after a hook execution?
  
• Is this OK to see available to claim amount for another wallet?
• When I'm connected to an unsupported chain, I'm still able to add a hook. Is this OK for now?
  
• I see different validation messages for the same vesting address on Ethereum and Arbitrum. Could you please clarify why?
  
  

4. (I'd be very thankful): could you please deploy a vesting contract for SC this 0x349C217d5E4F41a1d1C9a2189d040110dea93659 address on Gnosis chain so I can test it there?

[JeanNeiverth]

Hi @elena-zh, thanks for the review!

I could handle most of the points, but others I believe will need other actions by the CoW team side

Fixed issues:

• change 'Add hook' button to 'Add Pre-hook' and 'Add Post-hook' (same for edit)
• change "Edit" to "Update"
• hide the 'available amount' field to a not connected user
• hide the 'available amount' field when it is 0
• add clean UI with "connect your wallet" message when wallet isn't connected
• general errors passed to inside the main button
• address input now doesn't accept spaces
• add shorter message and formatting in "Claimable amount" output, turning it better to mobile users
• remove "Ethereum" in the invalid 'Ethereum' address error
• Is this OK that I have some dust left to claim after a hook execution? Yep, it's the expected behavior of the vesting contract, as it releases money with time
• I see different validation messages for the same vesting address on Ethereum and Arbitrum. Could you please clarify why? Sure! Each network is a different environment, so a contract created in an Arbitrum address will not appear in the Ethereum network, unless the same contract is created there too. In this case, probably the address in the Ethereum net is an empty one.
• Deployed a contract in Gnosis for 0x349C217d5E4F41a1d1C9a2189d040110dea93659. Contract address is 0x349C217d5E4F41a1d1C9a2189d040110dea93659

Note: as this hook is an IFrame, you no longer have to wait a new deploy on your side (as it is deployed in Bleu side), so you can already check these changes in the same app you ran before. The only changes that will require a deploy on CoW side are the ones below.

Pending

• Dark / Light mode switching while executing hook
• Is this OK to see available to claim amount for another wallet? I can't see any problem, since the data is already public. But we can ping @alfetopito and @alexdorsch to confirm that
• When I'm connected to an unsupported chain, I'm still able to add a hook. Is this OK for now? This is not expected, but we are working on a solution

When these pending topics get resolved, I will ping you again here. Feel free to add other comments / issues in the mean time if you like :)

[elena-zh]

Hey @JeanNeiverth , thank you!
Almost all issues were fixed. I've been able to find some nitpicks only:

1. It would be nice to show a full amount in a title when hover a mouse on a claimable amount (like we do everywhere in the app):
   
2. (uber-nitpick) but I see that fonts in the 'Claim GNO' and 'Claim vesting' hooks differ from each other a bit. Could you please double check this?
   
3. Could you please share with me a vesting contract link for my Safe address?

Deployed a contract in Gnosis for 0x349C217d5E4F41a1d1C9a2189d040110dea93659. Contract address is 0x349C217d5E4F41a1d1C9a2189d040110dea93659

Thanks!