[PAY-2319] Add offramp on web #7153

schottra · 2024-01-11T18:53:16Z

Description

This adds an offramp for web behind a feature flag. There will be follow-up PRs to refine it, but it's a working experience as-is.

Added CoinflowWithdrawPage and PrepareTransfer pages to the withdraw modal
Added a 'method' field to the withdraw modal and updated the form schema to account for the two flows
Updated the EnterTransferDetails page to manually validate the amount/address fields on attempt to continue so that errors with the amount are actually visible and prevent continuation to the confirm step.
Added feature flag to control visibility of offramp and remote config to control minimum withdrawal amount
Updated status for USDC recovery to use the standard Status enum
Updated pay and earn page to attempt recovery on load and show a spinner on the USDC card while we're doing a recovery
Added coinflow state values to withdraw-usdc saga
Added a separate implementation of the withdraw saga for using coinflow. It's similar to the manual transfer version except it's transferring to the root wallet in preparation for opening the coinflow modal
Added logic to the withdraw modal to trigger a recovery check on close in case we cancelled a withdraw transaction
Removed the "not sure..." helper from the first page of the modal and moved it to the correct place in the confirmation step for manual transfer

fixes PAY-2319

How Has This Been Tested?

Tested locally against staging and prod (required to finish the coinflow part)

…arch * origin/main: Bump version to 0.6.13 v1.5.59 [C-3478] Backlink to album from track page (#7074) DDEX NODE_ENV production -> prod (#7103) Actually fix discovery notif tests (#7101) Move uploads out of DDEX client (#7100) [C-3571] Fix modal header styles (#7091) [C-3515] Fix desktop sign up page transitions (#7084)

vercel · 2024-01-11T18:53:22Z

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
audius-web-ssr	⬜️ Ignored (Inspect)	Visit Preview		Jan 18, 2024 6:18pm

…arch * origin/main: (43 commits) rest endpoint for track top_listeners (#7139) [C-3577] Create account logic for native (#7145) Bump version to 0.6.16 [C-3376] Replace harmony enums with string unions (#7149) [C-3588] Show twitter popup on staging (#7147) DDEX tailwind -> harmony (#7126) Pin @types/react to 18.2.0 (#7144) Fix disabled hidden hint for create schedule release (#7143) Scheduled release follow ons: usdc to special access, persist selected date, etc (#7135) Revert unintended trpc changes (#7140) [C-3576] Create account logic for web (#7116) [C-3595 C-3574] Fix Upload share-banner share options (#7136) [C-3567] Add harmony-native text-link (#7137) Add ix_plays_user_item_date index (#7077) Bump version to 0.6.15 Remove konami, segment, clean up Collectible3D (#7131) [C-3433] Add harmony-native password input (#7125) [C-3430] Add SocialButton to native harmony (#7124) [C-3439] Add LoadingSpinner to native harmony (#7127) Allow placeholder postgres urls through secrets check (#7130) ...

audius-infra · 2024-01-11T19:10:18Z

Preview this change https://demo.audius.co/pay-2319-offramp-research

audius-infra · 2024-01-11T21:39:59Z

Preview this change https://demo.audius.co/pay-2319-offramp-research

dharit-tan

looking good :)

packages/common/src/store/buy-usdc/sagas.ts

packages/common/src/store/ui/withdraw-usdc/slice.ts

packages/web/src/store/application/ui/withdraw-usdc/sagas.ts

dharit-tan · 2024-01-16T17:20:26Z

packages/common/src/store/ui/modals/withdraw-usdc-modal/index.ts

  CONFIRM_TRANSFER_DETAILS = 'confirm_transfer_details',
+  PREPARE_TRANSFER = 'prepare_transfer',


is this state specific to coinflow? should we prepend with COINFLOW_?

Yes and no. It's necessary to move it to a "real" wallet before attempting to withdraw it through a prebuilt third-party flow. But the only one we have right now is coinflow. I was trying to avoid being overly specific with the naming. Especially since this step in the modal literally just says "Preparing Transfer" with no reference to the vendor.

packages/web/src/components/withdraw-usdc-modal/WithdrawUSDCModal.tsx

packages/web/src/pages/pay-and-earn-page/desktop/PayAndEarnPage.tsx

packages/web/src/pages/pay-and-earn-page/mobile/PayAndEarnPage.tsx

raymondjacobson · 2024-01-17T00:35:35Z

packages/web/src/components/withdraw-usdc-modal/WithdrawUSDCModal.module.css

@@ -5,3 +5,10 @@
  justify-content: center;
  text-transform: uppercase;
 }
+
+.modal iframe {


does their modal not accept passed in styles?

As far as I know, it does not. It does expose a heightChanged callback, but it fires about a dozen times during loading, so I don't know that it'll be super useful unless we implement some kind of debouncing.

packages/web/src/components/withdraw-usdc-modal/components/PrepareTransfer.tsx

raymondjacobson · 2024-01-17T00:39:15Z

packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx

+
+  // Always check for recoverable USDC on page load
+  useEffect(() => {
+    dispatch(buyUSDCActions.startRecoveryIfNecessary())


No polling? Can we do polling while the window is in focus/active tab?

We can do it, but I'm not sure it'll be super necessary. We already initiate recovery upon closing the modal and upon loading the page. The situations we would catch with polling are:

Recovery failed even with retries

Some money ended up in your root wallet from a source outside of the current browser session.

Putting that against the need to selectively disable the polling when the window isn't visible and while the withdrawal modal is open seemed like it might not be worth the potential issues it could cause.
But happy to give it a shot, though I might add it in a follow-up PR if that's okay with you.

audius-infra · 2024-01-17T16:18:06Z

Preview this change https://demo.audius.co/pay-2319-offramp-research

rickyrombo

Looks great!

rickyrombo · 2024-01-17T23:18:55Z

packages/web/src/components/withdraw-usdc-modal/components/EnterTransferDetails.tsx

+  const disableContinue =
+    methodValue === WithdrawMethod.COINFLOW
+      ? !!balance?.isZero()
+      : !!(!address || balance?.isZero())


nit - maybe move the !! in front of balance?.isZero()? The triple ! seemed weird

rickyrombo · 2024-01-17T23:21:40Z

packages/web/src/store/application/ui/withdraw-usdc/sagas.ts

+  yield* put(beginCoinflowWithdrawal())
+
+  const analyticsFields: WithdrawUSDCTransferEventFields = {
+    // TODO


not sure if you intended to leave this todo

When I first changed it, I thought we might eventually want to put something different here. But I'm not sure what that would be, so I can remove it for now.

audius-infra · 2024-01-18T15:43:33Z

Preview this change https://demo.audius.co/pay-2319-offramp-research

…arch * origin/main: (76 commits) [C-3637] Add OTP flow for new sign-up (#7227) [C-3642] Handle "user past account creation" edge case scenarios in web (#7225) Fix DDEX dockerfile (#7226) [Web] [Libs] Disconnect dashboard wallet - web and SDK changes (#7209) [C-3640] Reduce toast duration app-wide (#7224) [C-3639] Fix empty album tab state (#7222) [C-3621] Fix scrolling issues on new sign up Password & Handle pages (web) (#7204) Get public IP in nginx (#7223) [C-3149 C-3122 C-3051 C-3625 C-3481] Fix add track to playlist (#7221) [C-3583 C-3634 C-3404] Add harmony-native to native sign up (#7210) Remove yield* in JS file (#7134) Make FilterButton a controlled component (#6993) [C-3649] Update create password screen to move when keyboard opens to display validation (#7220) [PAY-2356] Mobile track screen stems & download section (#7207) [Web] Add OTP to OAuth login flow [C-3643] (#7212) Openresty container (#7214) Export plain button from harmony native (#7217) CircleCI self-hosted runners: lower cleanup thresholds (#7216) Fix otp after #7196 (#7215) [C-3638] Fix saga ci (#7211) ...

audius-infra · 2024-01-18T18:33:24Z

Preview this change https://demo.audius.co/pay-2319-offramp-research

[b94153b] Convert mobile DownloadRow to harmony (#7237) Reed [62b8611] [C-3597] Add ellipses to track tile titles (#7234) Dylan Jeffers [eba9299] [C-3678, C-3657] Fix android radial-gradient bug, Fix sign-up panel top border-radius (#7236) Dylan Jeffers [bf9d2ea] Fix sign ups failing halfway through saga (#7240) JD Francis [f355286] Re-add downloads when lossless downloads flag disabled (#7235) Reed [0ffd417] [C-3677] Fix onclick for upload a track chip (#7232) Andrew Mendelsohn [f9132ca] Filter sitemaps properly (#7233) Raymond Jacobson [5f8d5d2] Fix max width issue on select artists page (#7229) JD Francis [dc4fa10] [DOCS] - repair reference links and set config to throw errors on breaks (#7231) Sam Gutentag [f6ad76f] [PAY-2361] Fix search es with new gated fields (#7230) Saliou Diallo [5d97832] [PAY-2319] Add offramp on web (#7153) Randy Schott [eab69ec] [PAY-2364] Fix nft gated tracks (#7228) Saliou Diallo [12af10e] [C-3637] Add OTP flow for new sign-up (#7227) Dylan Jeffers [4d68c2a] [C-3642] Handle "user past account creation" edge case scenarios in web (#7225) JD Francis [60b843d] Fix DDEX dockerfile (#7226) Michelle Brier [c3c2148] [Web] [Libs] Disconnect dashboard wallet - web and SDK changes (#7209) nicoback2 [b7d03e3] [C-3640] Reduce toast duration app-wide (#7224) Andrew Mendelsohn [120c8f6] [C-3639] Fix empty album tab state (#7222) Andrew Mendelsohn [059312d] [C-3621] Fix scrolling issues on new sign up Password & Handle pages (web) (#7204) JD Francis [557fd96] Get public IP in nginx (#7223) Isaac Solo [0046ab4] [C-3149 C-3122 C-3051 C-3625 C-3481] Fix add track to playlist (#7221) Dylan Jeffers [ba711b6] [C-3583 C-3634 C-3404] Add harmony-native to native sign up (#7210) Dylan Jeffers [335cfa4] Remove yield* in JS file (#7134) Marcus Pasell [fa7a9d9] Make FilterButton a controlled component (#6993) Marcus Pasell [1eb3aa1] [C-3649] Update create password screen to move when keyboard opens to display validation (#7220) Kyle Shanks [55b5192] [PAY-2356] Mobile track screen stems & download section (#7207) Reed [c0b2b66] [Web] Add OTP to OAuth login flow [C-3643] (#7212) nicoback2 [f5cee04] Openresty container (#7214) Steve Perkins [33f7597] Export plain button from harmony native (#7217) Kyle Shanks [13412f3] CircleCI self-hosted runners: lower cleanup thresholds (#7216) Danny [c57618e] Fix otp after #7196 (#7215) Raymond Jacobson [31629e6] [C-3638] Fix saga ci (#7211) Dylan Jeffers [ab09783] Fix ISO date format for dayjs (#7206) Isaac Solo [abc71bf] Fix stems & downloads appearing erroneously web (#7202) Reed [fb38737] [PAY-2351] Fix height on add funds (#7172) Raymond Jacobson [38221f2] [C-3614, C-3615] Update image storage for new sign up flow to conform with old structure (#7200) Kyle Shanks [b0bf87d] use slog-gorm package (#7199) Steve Perkins [ce50f32] Gitignore snippets (#7201) Reed [204894c] Fix audius-cmd test (#7208) Saliou Diallo [f5226c7] [C-3630] Refactor signon screens to use native-harmony (#7192) Dylan Jeffers [bcc180f] Bypass OTP for testflight account (#7196) Saliou Diallo [94ec3d0] Update mobile version to 1.1.83 for release (#7203) Dylan Jeffers [ab1d3e9] Add USDC gated downloads flow (#6899) Saliou Diallo [966e438] [C-3608] Increase pressable area for cover photo upload (native) (#7165) JD Francis [9012df5] [C-2190] Fix track player interruptions (#7198) Dylan Jeffers [d12d824] [C-3632] Return null instead of NOT_FOUND in trpc-server (#7184) Andrew Mendelsohn [b391ada] Bump version to 0.6.19 audius-infra [ecbd9b1] Bump version to 0.6.18 audius-infra [625839b] Fix repair signup (#7197) Marcus Pasell [fc5131e] Add sendgrid param (#7195) Raymond Jacobson [d530b0e] Bump app builds (#7194) Raymond Jacobson [8d031a4] [PROTO-1599] Add OTP support (#7193) Raymond Jacobson

[df201c4] [C-3651] Add box-shadow to text-input (#7259) Dylan Jeffers [3436391] Remove track player patch (#7256) Dylan Jeffers [2dd727a] [C-3633] Fix upload tags (#7246) Dylan Jeffers [336abe5] [PAY-2362] Allow offline download (#7253) Saliou Diallo [bdc4997] Re-add download buttons to mobile track page (#7254) Reed [5f2045c] Add auto upgrade logs to vector (#7251) Isaac Solo [d87e13f] Update styles to wrap properly (#7248) Saliou Diallo [1599367] [PROTO-1598] Use tRPC in ddex (#7150) Theo Ilie [09b5dc7] Qm sync (#7250) Steve Perkins [cc892ea] Remove scheduled release filter from sitemaps (#7247) Isaac Solo [3211ca2] Fix stylelint (#7245) Saliou Diallo [270f107] Increase chat reaction emoji sizes (#7241) Reed [26b0f0c] [PAY-2331] Add lossless download info section in upload (#7219) Saliou Diallo [2a15a64] v1.5.62 (#7243) Dylan Jeffers [b94153b] Convert mobile DownloadRow to harmony (#7237) Reed [62b8611] [C-3597] Add ellipses to track tile titles (#7234) Dylan Jeffers [eba9299] [C-3678, C-3657] Fix android radial-gradient bug, Fix sign-up panel top border-radius (#7236) Dylan Jeffers [bf9d2ea] Fix sign ups failing halfway through saga (#7240) JD Francis [f355286] Re-add downloads when lossless downloads flag disabled (#7235) Reed [0ffd417] [C-3677] Fix onclick for upload a track chip (#7232) Andrew Mendelsohn [f9132ca] Filter sitemaps properly (#7233) Raymond Jacobson [5f8d5d2] Fix max width issue on select artists page (#7229) JD Francis [dc4fa10] [DOCS] - repair reference links and set config to throw errors on breaks (#7231) Sam Gutentag [f6ad76f] [PAY-2361] Fix search es with new gated fields (#7230) Saliou Diallo [5d97832] [PAY-2319] Add offramp on web (#7153) Randy Schott [eab69ec] [PAY-2364] Fix nft gated tracks (#7228) Saliou Diallo [12af10e] [C-3637] Add OTP flow for new sign-up (#7227) Dylan Jeffers [4d68c2a] [C-3642] Handle "user past account creation" edge case scenarios in web (#7225) JD Francis [60b843d] Fix DDEX dockerfile (#7226) Michelle Brier [c3c2148] [Web] [Libs] Disconnect dashboard wallet - web and SDK changes (#7209) nicoback2 [b7d03e3] [C-3640] Reduce toast duration app-wide (#7224) Andrew Mendelsohn [120c8f6] [C-3639] Fix empty album tab state (#7222) Andrew Mendelsohn [059312d] [C-3621] Fix scrolling issues on new sign up Password & Handle pages (web) (#7204) JD Francis [557fd96] Get public IP in nginx (#7223) Isaac Solo [0046ab4] [C-3149 C-3122 C-3051 C-3625 C-3481] Fix add track to playlist (#7221) Dylan Jeffers [ba711b6] [C-3583 C-3634 C-3404] Add harmony-native to native sign up (#7210) Dylan Jeffers [335cfa4] Remove yield* in JS file (#7134) Marcus Pasell [fa7a9d9] Make FilterButton a controlled component (#6993) Marcus Pasell [1eb3aa1] [C-3649] Update create password screen to move when keyboard opens to display validation (#7220) Kyle Shanks [55b5192] [PAY-2356] Mobile track screen stems & download section (#7207) Reed [c0b2b66] [Web] Add OTP to OAuth login flow [C-3643] (#7212) nicoback2 [f5cee04] Openresty container (#7214) Steve Perkins [33f7597] Export plain button from harmony native (#7217) Kyle Shanks [13412f3] CircleCI self-hosted runners: lower cleanup thresholds (#7216) Danny [c57618e] Fix otp after #7196 (#7215) Raymond Jacobson [31629e6] [C-3638] Fix saga ci (#7211) Dylan Jeffers [ab09783] Fix ISO date format for dayjs (#7206) Isaac Solo [abc71bf] Fix stems & downloads appearing erroneously web (#7202) Reed [fb38737] [PAY-2351] Fix height on add funds (#7172) Raymond Jacobson [38221f2] [C-3614, C-3615] Update image storage for new sign up flow to conform with old structure (#7200) Kyle Shanks [b0bf87d] use slog-gorm package (#7199) Steve Perkins [ce50f32] Gitignore snippets (#7201) Reed [204894c] Fix audius-cmd test (#7208) Saliou Diallo [f5226c7] [C-3630] Refactor signon screens to use native-harmony (#7192) Dylan Jeffers [bcc180f] Bypass OTP for testflight account (#7196) Saliou Diallo [94ec3d0] Update mobile version to 1.1.83 for release (#7203) Dylan Jeffers [ab1d3e9] Add USDC gated downloads flow (#6899) Saliou Diallo [966e438] [C-3608] Increase pressable area for cover photo upload (native) (#7165) JD Francis [9012df5] [C-2190] Fix track player interruptions (#7198) Dylan Jeffers [d12d824] [C-3632] Return null instead of NOT_FOUND in trpc-server (#7184) Andrew Mendelsohn [b391ada] Bump version to 0.6.19 audius-infra [ecbd9b1] Bump version to 0.6.18 audius-infra [625839b] Fix repair signup (#7197) Marcus Pasell [fc5131e] Add sendgrid param (#7195) Raymond Jacobson [d530b0e] Bump app builds (#7194) Raymond Jacobson [8d031a4] [PROTO-1599] Add OTP support (#7193) Raymond Jacobson

schottra added 12 commits January 5, 2024 11:55

checkpoint

23bfdb8

Set up a basic withdrawal via Coinflow process

7ecb27d

checkpoint

977229e

remove testing step

54afcf5

cleanup offramp implementation

6a8755d

better recovery of unfinished withdrawals

fbf921c

some minor layout fixes

cc88af7

add feature flag

bf2879f

updating form UX and validation

b1810d3

lint cleanup

d2c319c

mend

213a6cd

schottra requested review from raymondjacobson and dharit-tan January 11, 2024 18:53

pull-request-size bot added the size/XL label Jan 11, 2024

schottra requested a review from rickyrombo January 11, 2024 18:53

schottra assigned sddioulde Jan 11, 2024

schottra added 2 commits January 11, 2024 16:19

minor cleanup

259b7aa

add done button for final page

8574421

dharit-tan approved these changes Jan 16, 2024

View reviewed changes

raymondjacobson approved these changes Jan 17, 2024

View reviewed changes

PR feedback

825ca7d

schottra enabled auto-merge (squash) January 17, 2024 18:42

rickyrombo approved these changes Jan 17, 2024

View reviewed changes

more PR cleanup

92f1626

schottra merged commit 5d97832 into main Jan 18, 2024
18 of 21 checks passed

schottra deleted the pay-2319-offramp-research branch January 18, 2024 18:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PAY-2319] Add offramp on web #7153

[PAY-2319] Add offramp on web #7153

schottra commented Jan 11, 2024

vercel bot commented Jan 11, 2024 •

edited

Loading

audius-infra commented Jan 11, 2024

audius-infra commented Jan 11, 2024

dharit-tan left a comment

dharit-tan Jan 16, 2024

schottra Jan 17, 2024

raymondjacobson Jan 17, 2024

schottra Jan 17, 2024

raymondjacobson Jan 17, 2024

schottra Jan 17, 2024

audius-infra commented Jan 17, 2024

rickyrombo left a comment

rickyrombo Jan 17, 2024

schottra Jan 18, 2024

rickyrombo Jan 17, 2024

schottra Jan 18, 2024

audius-infra commented Jan 18, 2024

audius-infra commented Jan 18, 2024

		CONFIRM_TRANSFER_DETAILS = 'confirm_transfer_details',
		PREPARE_TRANSFER = 'prepare_transfer',

[PAY-2319] Add offramp on web #7153

[PAY-2319] Add offramp on web #7153

Conversation

schottra commented Jan 11, 2024

Description

How Has This Been Tested?

vercel bot commented Jan 11, 2024 • edited Loading

audius-infra commented Jan 11, 2024

audius-infra commented Jan 11, 2024

dharit-tan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Jan 17, 2024

rickyrombo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Jan 18, 2024

audius-infra commented Jan 18, 2024

vercel bot commented Jan 11, 2024 •

edited

Loading