[PAY-2394][PAY-2391][PAY-2393] Address misc coinflow withdrawal ux (#…

…7312)
AudiusProject · Jan 24, 2024 · dcc2f61 · dcc2f61
1 parent 6005824
commit dcc2f61
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git a/packages/common/src/api/user.ts b/packages/common/src/api/user.ts
@@ -1,4 +1,4 @@
-import type { full } from '@audius/sdk'
+import { full } from '@audius/sdk'
 
 import { createApi } from 'audius-query'
 import { ID, Kind, StringUSDC } from 'models'
@@ -7,6 +7,7 @@ import {
   USDCTransactionMethod,
   USDCTransactionType
 } from 'models/USDCTransactions'
+import { getRootSolanaAccount } from 'services/audius-backend/solana'
 import { Nullable } from 'utils/typeUtils'
 
 import { Id } from './utils'
@@ -21,12 +22,30 @@ type GetUSDCTransactionListArgs = {
   method?: full.GetUSDCTransactionsMethodEnum
 }
 
-const parseTransaction = (
+/**
+ * Parser to reformat transactions as they come back from the API.
+ * @param transaction the transaction to parse
+ * @param rootSolanaAccount? Optionally a root solana account can be passed
+ *  to reformat the metadata field to include specific contextual information.
+ *  In the case of withdrawals, this is useful in recognizing a "self-send",
+ *  which is a cash transfer out.
+ */
+const parseTransaction = ({
+  transaction,
+  rootSolanaAccount
+}: {
   transaction: full.TransactionDetails
-): USDCTransactionDetails => {
-  const { change, balance, transactionType, method, ...rest } = transaction
+  rootSolanaAccount?: string
+}): USDCTransactionDetails => {
+  const { change, balance, transactionType, method, metadata, ...rest } =
+    transaction
   return {
     ...rest,
+    metadata: !rootSolanaAccount
+      ? metadata
+      : rootSolanaAccount === metadata.toString()
+      ? `Cash (${metadata})`
+      : metadata,
     transactionType: transactionType as USDCTransactionType,
     method: method as USDCTransactionMethod,
     change: change as StringUSDC,
@@ -130,7 +149,18 @@ const userApi = createApi({
           encodedDataSignature
         })
 
-        return data.map(parseTransaction)
+        let rootSolanaAccount: string
+        if (
+          type === full.GetUSDCTransactionsTypeEnum.Transfer &&
+          method === full.GetUSDCTransactionCountMethodEnum.Send
+        ) {
+          rootSolanaAccount = (
+            await getRootSolanaAccount(context.audiusBackend)
+          ).publicKey.toString()
+        }
+        return data.map((transaction) =>
+          parseTransaction({ transaction, rootSolanaAccount })
+        )
       },
       options: { retry: true }
     },

diff --git a/packages/web/src/components/withdraw-usdc-modal/WithdrawUSDCModal.tsx b/packages/web/src/components/withdraw-usdc-modal/WithdrawUSDCModal.tsx
@@ -59,6 +59,13 @@ const messages = {
 
 const MINIMUM_MANUAL_TRANSFER_AMOUNT_CENTS = 1
 
+const DISABLE_MODAL_CLOSE_PAGES = new Set([
+  WithdrawUSDCModalPages.PREPARE_TRANSFER,
+  WithdrawUSDCModalPages.TRANSFER_IN_PROGRESS,
+  WithdrawUSDCModalPages.COINFLOW_TRANSFER,
+  WithdrawUSDCModalPages.CONFIRM_TRANSFER_DETAILS
+])
+
 const WithdrawUSDCFormSchema = (
   userBalanceCents: number,
   minWithdrawBalanceCents: number
@@ -228,9 +235,13 @@ export const WithdrawUSDCModal = () => {
       isOpen={isOpen}
       onClose={onClose}
       onClosed={handleOnClosed}
+      dismissOnClickOutside={!DISABLE_MODAL_CLOSE_PAGES.has(page)}
       bodyClassName={styles.modal}
     >
-      <ModalHeader onClose={onClose}>
+      <ModalHeader
+        onClose={onClose}
+        showDismissButton={!DISABLE_MODAL_CLOSE_PAGES.has(page)}
+      >
         <Text
           variant='label'
           color='neutralLight2'

diff --git a/packages/web/src/components/withdraw-usdc-modal/components/TransferSuccessful.tsx b/packages/web/src/components/withdraw-usdc-modal/components/TransferSuccessful.tsx
@@ -104,7 +104,7 @@ export const TransferSuccessful = ({
           balanceStatus === Status.SUCCESS ? `$${balanceFormatted}` : undefined
         }
       />
-      {methodValue !== WithdrawMethod.MANUAL_TRANSFER ? (
+      {methodValue !== WithdrawMethod.MANUAL_TRANSFER && signature ? (
         <>
           <Divider style={{ margin: 0 }} />
           <div className={styles.destination}>