fix: PP for cards did not display correctly everywhere (#1882)

* fix PP for cards display * Update helpers.ts * Update WalletAddressesTable.tsx
interledger · Jan 23, 2025 · 47dfb87 · 47dfb87
1 parent 1da7c0f
commit 47dfb87
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 12 deletions.
diff --git a/packages/wallet/frontend/src/components/WalletAddressesTable.tsx b/packages/wallet/frontend/src/components/WalletAddressesTable.tsx
@@ -16,6 +16,10 @@ import {
 } from '@/ui/Tooltip'
 import { copyToClipboard } from '@/ui/CopyButton'
 import { createContext, useContext, useEffect, useState } from 'react'
+import {
+  replaceCardWalletAddressDomain,
+  replaceWalletAddressProtocol
+} from '@/utils/helpers'
 
 interface WalletAddressesTableProps {
   account: Account
@@ -101,12 +105,10 @@ export const CopyWalletAddress = () => {
   const { walletAddress } = useContext(WalletAddressRowContext)
   const [isCopied, setIsCopied] = useState(false)
 
-  let pointer = walletAddress.url
-
-  if (walletAddress.isCard) {
-    const url = new URL(walletAddress.url.replace('$', 'https://'))
-    pointer = `$ilp.dev${url.pathname}`
-  }
+  const pointer = replaceCardWalletAddressDomain(
+    replaceWalletAddressProtocol(walletAddress.url),
+    walletAddress.isCard
+  )
 
   useEffect(() => {
     setTimeout(() => {

diff --git a/packages/wallet/frontend/src/pages/account/[accountId].tsx b/packages/wallet/frontend/src/pages/account/[accountId].tsx
@@ -8,7 +8,11 @@ import { walletAddressService } from '@/lib/api/walletAddress'
 import { useOnboardingContext } from '@/lib/context/onboarding'
 import { useDialog } from '@/lib/hooks/useDialog'
 import { NextPageWithLayout } from '@/lib/types/app'
-import { formatAmount, replaceWalletAddressProtocol } from '@/utils/helpers'
+import {
+  formatAmount,
+  replaceCardWalletAddressDomain,
+  replaceWalletAddressProtocol
+} from '@/utils/helpers'
 import type {
   GetServerSideProps,
   InferGetServerSidePropsType
@@ -183,7 +187,10 @@ export const getServerSideProps: GetServerSideProps<{
     }
   }
   walletAddressesResponse.result.map((pp) => {
-    pp.url = replaceWalletAddressProtocol(pp.url)
+    pp.url = replaceCardWalletAddressDomain(
+      replaceWalletAddressProtocol(pp.url),
+      pp.isCard
+    )
   })
 
   return {

diff --git a/packages/wallet/frontend/src/pages/request.tsx b/packages/wallet/frontend/src/pages/request.tsx
@@ -13,6 +13,7 @@ import { SuccessDialog } from '@/components/dialogs/SuccessDialog'
 import {
   formatAmount,
   getObjectKeys,
+  replaceCardWalletAddressDomain,
   replaceWalletAddressProtocol
 } from '@/utils/helpers'
 import { Select, type SelectOption } from '@/ui/forms/Select'
@@ -107,7 +108,7 @@ const RequestPage: NextPageWithLayout<RequestProps> = ({ accounts }) => {
 
     const walletAddresses = walletAddressesResponse.result.map(
       (walletAddress) => ({
-        label: `${walletAddress.publicName} (${replaceWalletAddressProtocol(walletAddress.url)})`,
+        label: `${walletAddress.publicName} (${replaceCardWalletAddressDomain(replaceWalletAddressProtocol(walletAddress.url), walletAddress.isCard)})`,
         value: walletAddress.id,
         url: walletAddress.url
       })

diff --git a/packages/wallet/frontend/src/pages/send.tsx b/packages/wallet/frontend/src/pages/send.tsx
@@ -16,6 +16,7 @@ import { SuccessDialog } from '@/components/dialogs/SuccessDialog'
 import {
   formatAmount,
   getObjectKeys,
+  replaceCardWalletAddressDomain,
   replaceWalletAddressProtocol
 } from '@/utils/helpers'
 import { useDialog } from '@/lib/hooks/useDialog'
@@ -117,7 +118,7 @@ const SendPage: NextPageWithLayout<SendProps> = ({ accounts }) => {
 
     const walletAddresses = walletAddressesResponse.result.map(
       (walletAddress) => ({
-        label: `${walletAddress.publicName} (${replaceWalletAddressProtocol(walletAddress.url)})`,
+        label: `${walletAddress.publicName} (${replaceCardWalletAddressDomain(replaceWalletAddressProtocol(walletAddress.url), walletAddress.isCard)})`,
         value: walletAddress.id
       })
     )

diff --git a/packages/wallet/frontend/src/pages/settings/developer-keys.tsx b/packages/wallet/frontend/src/pages/settings/developer-keys.tsx
@@ -4,7 +4,11 @@ import { DeveloperKeys } from '@/components/settings/DeveloperKeys'
 import { SettingsTabs } from '@/components/SettingsTabs'
 import { Account, accountService } from '@/lib/api/account'
 import { NextPageWithLayout } from '@/lib/types/app'
-import { formatDate, replaceWalletAddressProtocol } from '@/utils/helpers'
+import {
+  formatDate,
+  replaceCardWalletAddressDomain,
+  replaceWalletAddressProtocol
+} from '@/utils/helpers'
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next/types'
 
 type DeveloperKeysPageProps = InferGetServerSidePropsType<
@@ -44,7 +48,10 @@ export const getServerSideProps: GetServerSideProps<{
     ...account,
     walletAddresses: account.walletAddresses.map((pp) => ({
       ...pp,
-      url: replaceWalletAddressProtocol(pp.url),
+      url: replaceCardWalletAddressDomain(
+        replaceWalletAddressProtocol(pp.url),
+        pp.isCard
+      ),
       keys: pp.keys?.map((key) => ({
         ...key,
         id: key.id,

diff --git a/packages/wallet/frontend/src/utils/helpers.ts b/packages/wallet/frontend/src/utils/helpers.ts
@@ -140,6 +140,18 @@ export const replaceWalletAddressProtocol = (
       : paymentPointer
 }
 
+export const replaceCardWalletAddressDomain = (
+  paymentPointer: string,
+  isCard?: boolean
+): string => {
+  if (isCard) {
+    const url = new URL(paymentPointer.replace('$', 'https://'))
+    return `$ilp.dev${url.pathname}`
+  } else {
+    return paymentPointer
+  }
+}
+
 export function ab2str(buf: ArrayBuffer) {
   //@ts-expect-error: We know
   return String.fromCharCode.apply(null, new Uint8Array(buf))