Add Onramp Kit and Stripe Integration to allow users to fund their wallet

[ademidun]

Add an option in Wallet Management (previously Transaction Management) that allows users to fund their wallet using fiat payment rails via the Safe {Core} Onramp Kit and Stripe.

Related: safe-global/safe-docs#192

stripe-onramp-kit-demo.mp4

[yagopv]

Hey!!, I left some comments and suggestions.

As a general comment, I'm not sure if adding the example in the context of a bigger app is better than have it isolated as you can find in the example folder of the onramp-kit. For me the examples should be pretty straightforward and here you have to setup several things (env vars) for reaching the stripe example.

Another things is about code styling as I can see different indentations or blank lines (>1) between instructions sometimes.

As a last comment, we use a lot material UI with custom theming. Is very easy to use and make all our UI demos look and feel the same. Would be great to use it here as well as a future enhancement

[yagopv]

The video in the readme is too short? it does not finish the token purchase

[yagopv]

⚠️ @ademidun after the hackaton we are going to merge some docs regarding some API change so the way these examples work should be updated

[ademidun]

The video in the readme is too short? it does not finish the token purchase

The goal of the video is not to show the full product flow due to file size. That can already be seen by the screenshots in Onramp Kit.

⚠️ @ademidun after the hackaton we are going to safe-global/safe-docs#190 regarding some API change so the way these examples work should be updated

Thanks for the heads up, we can update when necessary.

[ademidun]

Hey!!, I left some comments and suggestions.
As a general comment, I'm not sure if adding the example in the context of a bigger app is better than have it isolated as you can find in the example folder of the onramp-kit. For me the examples should be pretty straightforward and here you have to setup several things (env vars) for reaching the stripe example.

The relevant examples are straightforward as they can be isolated to the specific component as seen here where the tutorial shows how to use it in a specific component. Having it in the context of the larger app allows developers to see how it's all tied together.

Another thing is about code styling as I can see different indentations or blank lines (>1) between instructions sometimes.

Fixed with prettier in 1c583b1

As a last comment, we use a lot material UI with custom theming. Is very easy to use and make all our UI demos look and feel the same. Would be great to use it here as well as a future enhancement.

This is really cool! Thanks for sharing! Something to keep in mind for a future PR.