Added transfer direction indicator (#1409)

Author: musidlo

packages/app/components/ReferralLink.tsx

@@ -68,9 +68,9 @@ export function ReferralLink(props: ButtonProps) {
         flex={1}
         jc={'space-between'}
         height={'auto'}
+        bw={0}
         hoverStyle={{
           backgroundColor: '$backgroundTransparent',
-          borderColor: '$colorTransparent',
         }}
         pressStyle={{
           backgroundColor: 'transparent',

packages/app/features/activity/ActivityAvatar.tsx

@@ -1,5 +1,5 @@
 import { Avatar, LinkableAvatar, type LinkableAvatarProps, Spinner, XStack } from '@my/ui'
-import { Minus, Plus } from '@tamagui/lucide-icons'
+import { ArrowDown, ArrowUp, Minus, Plus } from '@tamagui/lucide-icons'
 import { AvatarSendEarnDeposit } from 'app/components/avatars'
 import { AvatarSendEarnWithdraw } from 'app/components/avatars/AvatarSendEarnWithdraw'
 import { IconUpgrade } from 'app/components/icons'
@@ -50,13 +50,16 @@ export function ActivityAvatar({
   if (isActivitySwapTransfer(activity, swapRouters, liquidityPools)) {
     return <TradeActivityAvatar activity={activity} />
   }
+
   if (user) {
     return (
       <XStack
         onPress={(e) => {
           e.stopPropagation()
         }}
+        position={'relative'}
       >
+        <TransferDirectionIndicator activity={activity} />
         <LinkableAvatar size="$4.5" br="$4" gap="$2" href={`/profile/${user.send_id}`} {...props}>
           {(() => {
             switch (true) {
@@ -165,8 +168,8 @@ export function ActivityAvatar({
 
 const TradeActivityAvatar = ({ activity }: { activity: Activity }) => {
   const { data: swapRouters } = useSwapRouters()
-  const isButTransfer = isSwapBuyTransfer(activity, swapRouters)
-  const Icon = isButTransfer ? Plus : Minus
+  const isBuyTransfer = isSwapBuyTransfer(activity, swapRouters)
+  const Icon = isBuyTransfer ? Plus : Minus
 
   return (
     <XStack w="$4.5" h={'$4.5'} br="$4" ai={'center'} jc={'center'} position={'relative'}>
@@ -176,7 +179,7 @@ const TradeActivityAvatar = ({ activity }: { activity: Activity }) => {
         top={'-5%'}
         right={'-5%'}
         size={'$1'}
-        bc={isButTransfer ? '$olive' : '$error'}
+        bc={isBuyTransfer ? '$olive' : '$error'}
         borderRadius={999}
         shadowColor={'$black'}
         shadowOffset={{ width: 0, height: 2 }}
@@ -186,3 +189,25 @@ const TradeActivityAvatar = ({ activity }: { activity: Activity }) => {
     </XStack>
   )
 }
+
+const TransferDirectionIndicator = ({ activity }: { activity: Activity }) => {
+  const { to_user } = activity
+
+  return (
+    <XStack
+      position={'absolute'}
+      top={0}
+      right={0}
+      transform={'translate(30%, -30%)'}
+      bc={'$olive'}
+      borderRadius={999}
+      shadowColor={'#000000'}
+      shadowOffset={{ width: 0, height: 2 }}
+      shadowOpacity={0.7}
+      shadowRadius={8}
+      zIndex={1}
+    >
+      {to_user?.id ? <ArrowDown size={'$1'} /> : <ArrowUp size={'$1'} />}
+    </XStack>
+  )
+}

packages/app/features/activity/utils/__mocks__/mock-activity-feed.ts

@@ -48,6 +48,7 @@ export const mockSentTransfer = {
     block_num: '15164541',
     tx_idx: '0',
     log_idx: '2',
+    note: 'Send gonna be $1 someday',
   },
 }
 
@@ -210,6 +211,7 @@ export const mockSendAccountReceive = {
     tx_hash: '\\xeec33cc50042cbba53fc1de714bd99b206635f890dbe29771c7986df6da0f6af',
     log_addr: '\\xb2c21f54653531aa4affa80f63593913f0c70628',
     block_num: '15681483',
+    note: 'Send gonna be $1 someday',
   },
 } as const
 

packages/app/utils/activity.test.ts

@@ -62,19 +62,25 @@ describe('test eventNameFromActivity', () => {
     const activity = JSON.parse(JSON.stringify(mockReceivedTransfer))
     expect(eventNameFromActivity({ activity: EventSchema.parse(activity) })).toBe('Deposit')
   })
-  it('should return the received when received eth and to user ID is present', () => {
+  it('should return the note when received eth and to user ID is present', () => {
     const activity = JSON.parse(JSON.stringify(mockSendAccountReceive))
-    expect(eventNameFromActivity({ activity: EventSchema.parse(activity) })).toBe('Received')
+    expect(eventNameFromActivity({ activity: EventSchema.parse(activity) })).toBe(
+      'Send gonna be $1 someday'
+    )
   })
-  it('should return the sent when received eth and from user ID is present', () => {
+  it('should return the note when received eth and from user ID is present', () => {
     const activity = JSON.parse(JSON.stringify({ ...mockSendAccountReceive }))
     activity.from_user = { ...activity.from_user, id: '1234' }
     activity.to_user = { ...activity.to_user, id: null }
-    expect(eventNameFromActivity({ activity: EventSchema.parse(activity) })).toBe('Sent')
+    expect(eventNameFromActivity({ activity: EventSchema.parse(activity) })).toBe(
+      'Send gonna be $1 someday'
+    )
   })
-  it('should return the sent when transfer and from user ID is present', () => {
+  it('should return the note when transfer and from user ID is present', () => {
     const activity = JSON.parse(JSON.stringify(mockSentTransfer))
-    expect(eventNameFromActivity({ activity: EventSchema.parse(activity) })).toBe('Sent')
+    expect(eventNameFromActivity({ activity: EventSchema.parse(activity) })).toBe(
+      'Send gonna be $1 someday'
+    )
   })
   it('should return the sendtag registered when tag receipts event', () => {
     const activity = JSON.parse(JSON.stringify(mockTagReceipt))

packages/app/utils/activity.tsx

@@ -334,7 +334,7 @@ export function eventNameFromActivity({
     case isSendEarnWithdrawEvent(activity):
       return 'Send Earn Withdraw'
     case isTemporalTransfer:
-      return note || temporalEventNameFromStatus(data.status)
+      return note || ''
     case isERC20Transfer && isAddressEqual(data.f, sendtagCheckoutAddress[baseMainnet.id]):
       return 'Revenue Share'
     case isSendTokenUpgradeEvent(activity):
@@ -350,9 +350,9 @@ export function eventNameFromActivity({
       }
       return 'Deposit'
     case isTransferOrReceive && !!to_user?.id:
-      return note || 'Received'
+      return note || ''
     case isTransferOrReceive && !!from_user?.id:
-      return note || 'Sent'
+      return note || ''
     case isTagReceiptsEvent(activity) || isTagReceiptUSDCEvent(activity):
       return 'Sendtag Registered'
     case isReferralsEvent(activity) && !!from_user?.id:
@@ -442,8 +442,6 @@ export function phraseFromActivity({
       return 'Deposited to Send Earn'
     case isSendEarnWithdrawEvent(activity):
       return 'Withdrew from Send Earn'
-    case isTemporalTransfer:
-      return temporalEventNameFromStatus(data.status)
     case isERC20Transfer && isAddressEqual(data.f, sendtagCheckoutAddress[baseMainnet.id]):
       return 'Earned revenue share'
     case isSendTokenUpgradeEvent(activity):
@@ -458,9 +456,9 @@ export function phraseFromActivity({
         return 'Trade'
       }
       return 'Deposited'
-    case isTransferOrReceive && !!to_user?.id:
+    case (isTransferOrReceive || isTemporalTransfer) && !!to_user?.id:
       return 'Sent you'
-    case isTransferOrReceive && !!from_user?.id:
+    case (isTransferOrReceive || isTemporalTransfer) && !!from_user?.id:
       return 'Received'
     case isTagReceiptsEvent(activity) || isTagReceiptUSDCEvent(activity):
       return data.tags?.length > 1 ? 'Sendtags created' : 'Sendtag created'

packages/app/utils/zod/activity/__snapshots__/index.test.ts.snap

@@ -165,6 +165,7 @@ exports[`EventArraySchema should parse a valid event array 1`] = `
       "f": "0x760E2928C3aa3aF87897bE52eb4833d42bbB27cf",
       "log_addr": "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
       "log_idx": 2n,
+      "note": "Send gonna be $1 someday",
       "t": "0xbf65EE06b43B9cA718216241f0b9F81b5ff30CC1",
       "tx_hash": "0xf1443b5abd14e6212dda2d9f5ff1d1d691599de3e8fa019ccc19b909d9bb46a4",
       "tx_idx": 0n,
@@ -206,6 +207,7 @@ exports[`EventArraySchema should parse a valid event array 1`] = `
       },
       "log_addr": "0xB2c21F54653531aa4AffA80F63593913f0C70628",
       "log_idx": 0n,
+      "note": "Send gonna be $1 someday",
       "sender": "0xa0Ee7A142d267C1f36714E4a8F75612F20a79720",
       "tx_hash": "0xeec33cc50042cbba53fc1de714bd99b206635f890dbe29771c7986df6da0f6af",
       "tx_idx": 0n,