Stacked Referral Invite Banner Block for React

Edit REWARD at the top of the file: both cells and the heading read it, so they can never disagree. For different amounts on the two sides, give each entry of SIDES its own amount and show it in RewardCell; keep the price in a dir="ltr" span so the currency sign stays beside its digits in right-to-left layouts.

Your server makes one per visitor and passes it in, so the card stays presentational: replace INVITE_URL with it. The field shows it in a mono face on one line, cut with an ellipsis when it's too long for a phone, and the button copies the whole string. The link text is always read left to right, even on a right-to-left page.

The Copy Button catches the refusal (a page not served over HTTPS has no clipboard, and a browser may deny permission), shows a cross for three seconds and tells screen readers "Couldn't copy". The link stays selectable in the field, so the visitor can copy it by hand. Pass onCopyError to the button to offer another way, such as the system share sheet.

Yes: call navigator.share({ url: INVITE_URL }) where the browser has it (check typeof navigator.share === "function" after the first render, so the server and the browser agree) and keep the copy button as the fallback. The block keeps to one button so the choice is clear.

The heading wraps to two lines, the two cells stay side by side with the arrow between them, and the field spans the card with the button at its end. Nothing scrolls sideways at 320 pixels.