[PAY-580] Add Success Page to BuyAudio Modal

packages/web/src/components/buy-audio-modal/components/SuccessPage.module.css

@@ -0,0 +1,52 @@
+.successPage {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+  gap: 24px;
+  padding-bottom: 24px;
+
+  font-weight: var(--font-bold);
+}
+
+.message {
+  text-align: center;
+  font-size: var(--font-l);
+}
+
+.label,
+.message,
+.review {
+  color: var(--neutral-light-4);
+}
+.review .reviewButtonIcon svg path {
+  fill: var(--neutral-light-4);
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.purchasedAmount {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--static-accent-green);
+  font-size: var(--font-l);
+}
+
+.newBalance {
+  display: flex;
+  gap: 4px;
+  font-size: var(--font-3xl);
+}
+
+.review {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--font-s);
+}

packages/web/src/components/buy-audio-modal/components/SuccessPage.tsx

@@ -0,0 +1,74 @@
+import { useCallback } from 'react'
+
+import {
+  BNAudio,
+  BNWei,
+  buyAudioSelectors,
+  formatWei,
+  walletSelectors
+} from '@audius/common'
+import { Button, ButtonSize, ButtonType, IconInfo } from '@audius/stems'
+import BN from 'bn.js'
+
+import { useModalState } from 'common/hooks/useModalState'
+import { useSelector } from 'common/hooks/useSelector'
+
+import { IconAUDIO } from './Icons'
+import styles from './SuccessPage.module.css'
+
+const messages = {
+  successMessage: 'Transaction Was Successful!',
+  audio: '$AUDIO',
+  review: 'Review Transaction',
+  done: 'Done'
+}
+
+const { getAccountTotalBalance } = walletSelectors
+const { getAudioPurchaseInfo } = buyAudioSelectors
+
+export const SuccessPage = () => {
+  const totalBalance = useSelector<BNAudio>(getAccountTotalBalance)
+  const uiBalance = formatWei(totalBalance || (new BN(0) as BNWei), true, 0)
+  const purchaseInfo = useSelector(getAudioPurchaseInfo)
+  const [, setModalVisibility] = useModalState('BuyAudio')
+
+  const handleDoneClicked = useCallback(() => {
+    setModalVisibility(false)
+  }, [setModalVisibility])
+
+  return (
+    <div className={styles.successPage}>
+      <div className={styles.message}>{messages.successMessage}</div>
+      <div className={styles.results}>
+        <div className={styles.purchasedAmount}>
+          <IconAUDIO />
+          <span className={styles.label}>{messages.audio}</span>
+          <span>
+            +
+            {purchaseInfo?.isError === false
+              ? purchaseInfo.desiredAudioAmount.uiAmountString
+              : '0'}
+          </span>
+        </div>
+        <div className={styles.newBalance}>
+          {uiBalance}
+          <span className={styles.label}>{messages.audio}</span>
+        </div>
+      </div>
+      <Button
+        text={messages.done}
+        type={ButtonType.PRIMARY_ALT}
+        onClick={handleDoneClicked}
+      />
+      <div className={styles.review}>
+        <Button
+          iconClassName={styles.reviewButtonIcon}
+          type={ButtonType.TEXT}
+          size={ButtonSize.SMALL}
+          text={messages.review}
+          leftIcon={<IconInfo />}
+        />
+      </div>
+    </div>
+  )
+}