feat(referral): add visibility toggle for receiving address(OK-49840) (#10012)

- Add eye icon button to toggle address visibility on referral page
- Show asterisks when address is hidden
- Add event logging for address visibility toggle

Co-authored-by: huhuanming <huanming@onekey.so>
Co-authored-by: Leon <lixiao.dev@gmail.com>

Author: 3 people

packages/kit/src/views/ReferFriends/pages/InviteReward/components/CumulativeRewards/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import BigNumber from 'bignumber.js';
 import { useIntl } from 'react-intl';
@@ -64,6 +64,7 @@ export function CumulativeRewards({
   const { activeAccount } = useActiveAccount({ num: 0 });
 
   const isNewEditWithdrawAddress = withdrawAddresses.length === 0;
+  const [isAddressVisible, setIsAddressVisible] = useState(true);
 
   const toEditAddressPage = useCallback(() => {
     navigateToEditAddress({
@@ -166,7 +167,7 @@ export function CumulativeRewards({
             </SizableText>
 
             {withdrawAddresses.length ? (
-              <XStack gap="$1" ai="center">
+              <XStack gap="$1.5" ai="center">
                 <NetworkAvatar
                   networkId={withdrawAddresses[0].networkId}
                   size="$4"
@@ -177,10 +178,24 @@ export function CumulativeRewards({
                   flexShrink={1}
                   numberOfLines={10}
                 >
-                  {accountUtils.shortenAddress({
-                    address: withdrawAddresses[0].address,
-                  })}
+                  {isAddressVisible
+                    ? accountUtils.shortenAddress({
+                        address: withdrawAddresses[0].address,
+                      })
+                    : '**********'}
                 </SizableText>
+                <IconButton
+                  icon={isAddressVisible ? 'EyeOffOutline' : 'EyeOutline'}
+                  variant="tertiary"
+                  size="small"
+                  onPress={() => {
+                    const newVisibility = !isAddressVisible;
+                    setIsAddressVisible(newVisibility);
+                    defaultLogger.referral.page.toggleReceivingAddressVisibility(
+                      newVisibility,
+                    );
+                  }}
+                />
               </XStack>
             ) : (
               <SizableText

packages/shared/src/logger/scopes/referral/scenes/page.ts

@@ -76,4 +76,10 @@ export class PageScene extends BaseScene {
   }) {
     return params;
   }
+
+  @LogToServer()
+  @LogToLocal({ level: 'info' })
+  public toggleReceivingAddressVisibility(isVisible: boolean) {
+    return { isVisible };
+  }
 }