Replace QR with link on mobile #365
Conversation
0xSachinK
commented
May 5, 2024
•
0xSachinK
commented
client/src/helpers/strings/venmo.ts
Outdated
| @@ -85,7 +85,7 @@ const strings: PlatformStrings = { | |||
| Amount USD to send, which may not match your requested USDC amount, is double checked | |||
| `, | |||
| PAYMENT_REQUIREMENT_STEP_THREE: ` | |||
| Custom messages for Venmo payment consists of text only | |||
| Do not add more than one emoji in the payment custom note | |||
There was a problem hiding this comment.
I think this becomes more confusing, even if it's the true technical limitation
| window.open(link, '_blank', 'noopener,noreferrer'); | ||
| }} | ||
| > | ||
| {`Send ₹${amount} on ${paymentPlatformName} ↗`} |
There was a problem hiding this comment.
This currency symbol needs to be based on the platform
| </ButtonContainer> | ||
| </PaymentButtonContainer> | ||
| ) : | ||
| ( |
| ) : | ||
| ( | ||
| <> | ||
| <QRContainer> |
There was a problem hiding this comment.
We need to do more work here to spec out / add in the "Desktop Only" modal for Revolut before launching this.
| @@ -179,6 +206,8 @@ export const SwapModal: React.FC<SwapModalProps> = ({ | |||
| onClick={async () => { | |||
| handleCompleteClick(); | |||
| }} | |||
| bgColor={ isMobile ? (paymentInitiated ? '#df2e2d' : '#ffcccc') : '#df2e2d' | |||
There was a problem hiding this comment.
Recommend using disabled state instead. Also add color constants to theme/colors
There was a problem hiding this comment.
I am in a split on how to do this. Feel like the user needs to be shown only one CTA on the send payment page. But we can't just disable the other button until the pay button is clicked because the user might have paid and is coming back to this page again from somewhere else in the app, and hence shouldn't be forced to click on the pay button to enable the "I have completed payment". I think we need a more complex state management here which caches the first click in parent components rather than just storing it in state which will get reset on rendering.
| @@ -256,6 +285,9 @@ const InstructionsTitle = styled.div` | |||
| text-align: center; | |||
| `; | |||
|
|
|||
| const PaymentButtonContainer = styled.div` | |||
There was a problem hiding this comment.
This component seems unnecessary?
| @@ -67,15 +72,15 @@ export const SwapModal: React.FC<SwapModalProps> = ({ | |||
| return { | |||
| troubleScanningQRCodeLink: link, | |||
| paymentPlatformName: 'Venmo', | |||
| instructionsText: `Scan and send $${amount}`, | |||
| instructionsText: isMobile ? ``: `Scan and send $${amount}`, | |||
There was a problem hiding this comment.
This seems inconsistent with the others
