[PAY-1559][PAY-1560] Adds USDC variants for track tiles on web/mobile web #3724

schottra · 2023-07-10T22:25:44Z

Description

Adds the relevant variants for each state for track tiles in web and mobile web. This mostly amounted to adding logic to render things in green when the premium condition is usdc_purchase. Also included a little bit of logic to convert a wei USDC price string to a formatted dollar amount (rounds to nearest cent).

Dragons

Formatting logic is a little basic at the moment. We will need to decide what our limits are for prices and make sure we correctly render all the edge cases.

How Has This Been Tested?

Tested locally in Chrome (both web and emulated mobile)

How will this change be monitored?

N/A

Feature Flags

N/A

Screenshots

dharit-tan · 2023-07-10T22:32:57Z

packages/web/src/components/track/LockedStatusBadge.tsx

@@ -5,14 +5,22 @@ import styles from './LockedStatusBadge.module.css'

 export type LockedStatusBadgeProps = {
  locked: boolean
+  variant: 'premium' | 'gated'


naming a bit confusing since we use premium content and gated content somewhat interchangeably prior to usdc. would it make more sense to just use usdc and gated?

FWIW some context: I think Julian et al had a discussion back with @sddioulde and @piazzatron around exclusive/gated/premium content and the consensus going forward was in line with this doc:

https://docs.google.com/spreadsheets/d/1UOp_7cvk79_p8rXnnmu0T4wB0WE4I89S-DmvQ1fCBag/edit#gid=0

The access settings are then:

Hidden
Collectible Gated
Special Access
Premium
Public

I'm fine putting "gated" for Collectible Gated and Special Access collectively (though could argue that we should treat them separate) and "premium" for Premium... though maybe "Premium" is just a special kinda gate? Or "gated" a special kind of premium?

I do agree though that we have some lingering "premium" variable names etc that no longer align with this so it's somewhat confusing. Unfortunately not going back now... but if I could rename them they'd be "access_conditions"

Thanks for context, @rickyrombo !
My thinking was indeed that we are making a shift to referring to purchasable content as "premium". But we do have a lot of lingering instances of "premium" referring to gated content in general.
This was my attempt to start using the new terminology.

Elsewhere in this PR I think I also mixed in the word "purchased" as an indication of usdc-gated content. So I at least need to pick one or the other going forward.

I think it probably deserves a discussion as a team on whether we want to actually make the change in code, or just leave a mapping between code->display strings and know that we refer to "premium" content internally as "purchasable" content.

packages/web/src/components/track/desktop/TrackTile.tsx

packages/web/src/components/track/desktop/BottomRow.tsx

dharit-tan

lookin good

audius-infra · 2023-07-10T22:54:05Z

Preview this change https://demo.audius.co/pay-1560-usdc-tiles

rickyrombo · 2023-07-10T23:38:17Z

packages/common/src/utils/wallet.ts

+  // with BN, divide by $1 Wei, and then convert to JS number and divide back down
+  // before formatting to two decimal places.
+  const converted =
+    new BN(amount).muln(100).divRound(BN_USDC_WEI).toNumber() / 100


Feels like we should be taking the ceiling, as rounding down wouldn't be enough USDC to purchase the track

Alternatively I think what we do elsewhere is truncation, never rounding

Yeah I figured we would discuss this more holistically with Product at the next sync up. Realistically, we won't allow setting sub-cent values through the UI, so this would never matter. But you could always write an update to chain from elsewhere. And we would just need to be clear about the policy in those cases.

FWIW, I think ceiling is probably the best approach, as it allows us to follow a policy where you pay exactly the amount that the track costs down to the last Wei. That would make access-checking easy, since we don't have to ensure that rounding logic exists and matches in all the places.

rickyrombo · 2023-07-10T23:40:52Z

packages/common/src/utils/wallet.ts

+
+/** Formats a USDC wei string (full precision) to a fixed string suitable for
+display as a dollar amount. Note: WILL lose precision by rounding to nearest cent */
+export const formatUSDCWeiToUSDString = (amount: StringUSDC, precision = 2) => {


If the input and output are both strings, and we know it's in USDC_WEI, then we can just insert a period at len(string) - 6 and call formatNumberString and skip the math I think.

const formatUSDCWeiToUSDString = (amount) => formatNumberString( amount.slice(0, amount.length - 6) + '.' + amount.slice(amount.length - 6), { minDecimals: 2, maxDecimals: 2 } )

Oh yeah, that's easy. I think if we're doing rounding, we need to process it a little ahead of time.

I updated the code to add a rounding utility (since we will probably need that for some of the saga work) and then use the utility for formatting commas. Current behavior is to round up to the nearest cent and display that. We can discuss with Product and come back to change it later if needed.

Yeah despite what I said in standup let's double check with product

rickyrombo · 2023-07-10T23:54:55Z

packages/web/src/components/track/LockedStatusBadge.tsx

@@ -5,14 +5,22 @@ import styles from './LockedStatusBadge.module.css'

 export type LockedStatusBadgeProps = {
  locked: boolean
+  variant: 'premium' | 'gated'


FWIW some context: I think Julian et al had a discussion back with @sddioulde and @piazzatron around exclusive/gated/premium content and the consensus going forward was in line with this doc:

https://docs.google.com/spreadsheets/d/1UOp_7cvk79_p8rXnnmu0T4wB0WE4I89S-DmvQ1fCBag/edit#gid=0

The access settings are then:

Hidden
Collectible Gated
Special Access
Premium
Public

I'm fine putting "gated" for Collectible Gated and Special Access collectively (though could argue that we should treat them separate) and "premium" for Premium... though maybe "Premium" is just a special kinda gate? Or "gated" a special kind of premium?

I do agree though that we have some lingering "premium" variable names etc that no longer align with this so it's somewhat confusing. Unfortunately not going back now... but if I could rename them they'd be "access_conditions"

rickyrombo · 2023-07-11T00:00:35Z

packages/web/src/components/track/PremiumConditionsPill.tsx

+  const colorStyle = isPurchase ? styles.premiumContent : styles.gatedContent
+
+  return (
+    <div className={cn(styles.container, colorStyle)}>


Is this not a button? I know it wasn't before but it seems like one now the way it looks...

It's not clickable, per se. You can click pretty much anywhere on the track tile to trigger the "how to unlock" modal. So this is acting more like a label than a button.

…1560-usdc-tiles * origin/gated-content-updates: [PAY-1573] Convert premium content type to union (#3711)

audius-infra · 2023-07-11T15:53:02Z

Preview this change https://demo.audius.co/pay-1560-usdc-tiles

schottra added 5 commits July 10, 2023 16:47

add usdc variant for premium content track tiles

3a84d4d

implement usdc variant on mobile web

2e5fabc

fixes for loading/unlocking states

f6cc59a

update logic for rendering lock icon color

e3bda42

fix formatting function to work for amounts less than 1

629cd3e

pull-request-size bot added the size/L label Jul 10, 2023

schottra requested a review from dharit-tan July 10, 2023 22:25

schottra assigned rickyrombo and piazzatron Jul 10, 2023

fix docstring

3e3a434

dharit-tan reviewed Jul 10, 2023

View reviewed changes

packages/web/src/components/track/desktop/TrackTile.tsx Outdated Show resolved Hide resolved

dharit-tan reviewed Jul 10, 2023

View reviewed changes

packages/web/src/components/track/desktop/BottomRow.tsx Show resolved Hide resolved

dharit-tan approved these changes Jul 10, 2023

View reviewed changes

rickyrombo reviewed Jul 11, 2023

View reviewed changes

schottra added 2 commits July 11, 2023 11:21

PR feedback

9967c3b

Merge remote-tracking branch 'origin/gated-content-updates' into pay-…

50ba52b

…1560-usdc-tiles * origin/gated-content-updates: [PAY-1573] Convert premium content type to union (#3711)

schottra merged commit 53e815a into gated-content-updates Jul 11, 2023
2 checks passed

schottra deleted the pay-1560-usdc-tiles branch July 11, 2023 18:31

AudiusProject deleted a comment from linear bot Sep 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PAY-1559][PAY-1560] Adds USDC variants for track tiles on web/mobile web #3724

[PAY-1559][PAY-1560] Adds USDC variants for track tiles on web/mobile web #3724

schottra commented Jul 10, 2023

dharit-tan Jul 10, 2023

rickyrombo Jul 10, 2023

schottra Jul 11, 2023

dharit-tan left a comment

audius-infra commented Jul 10, 2023

rickyrombo Jul 10, 2023

rickyrombo Jul 10, 2023

schottra Jul 11, 2023

rickyrombo Jul 10, 2023

rickyrombo Jul 10, 2023

schottra Jul 11, 2023

schottra Jul 11, 2023

rickyrombo Jul 11, 2023

rickyrombo Jul 10, 2023

rickyrombo Jul 11, 2023

schottra Jul 11, 2023

audius-infra commented Jul 11, 2023

[PAY-1559][PAY-1560] Adds USDC variants for track tiles on web/mobile web #3724

[PAY-1559][PAY-1560] Adds USDC variants for track tiles on web/mobile web #3724

Conversation

schottra commented Jul 10, 2023

Description

Dragons

How Has This Been Tested?

How will this change be monitored?

Feature Flags

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dharit-tan left a comment

Choose a reason for hiding this comment

audius-infra commented Jul 10, 2023

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

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 Jul 11, 2023