From 7bf84d5598e571295fce89cc2f467f711082cf32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Tue, 8 Oct 2024 16:42:35 -0300
Subject: [PATCH] fix: don't shorten ens names

---
 src/components/Claim/Link/Onchain/Confirm.view.tsx    |  2 +-
 src/components/Create/Link/Confirm.view.tsx           |  2 +-
 src/components/Create/Link/Initial.view.tsx           |  2 +-
 src/components/Create/Link/Input.view.tsx             |  2 +-
 src/components/Create/Link/Success.view.tsx           |  2 +-
 .../Dashboard/components/MobileComponent.tsx          |  2 +-
 src/components/Dashboard/index.tsx                    |  4 ++--
 src/components/Profile/Components/TableComponent.tsx  |  2 +-
 src/components/Profile/index.tsx                      |  8 ++++----
 src/components/Request/Pay/Views/Success.view.tsx     |  7 +------
 src/utils/general.utils.ts                            | 11 +++++++----
 11 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx
index 9f0d1e895..acb7ec5c0 100644
--- a/src/components/Claim/Link/Onchain/Confirm.view.tsx
+++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx
@@ -184,7 +184,7 @@ export const ConfirmClaimLinkView = ({
                 <label className="text-h7 font-normal">Claiming to:</label>
                 <span className="flex items-center gap-1 ">
                     <label className="text-h7">
-                        {recipient.name ? recipient.name : utils.shortenAddressLong(recipient.address ?? '')}
+                        {recipient.name ? recipient.name : utils.printableAddress(recipient.address ?? '')}
                     </label>
                     {recipient.name && <MoreInfo text={`You will be claiming to ${recipient.address}`} />}
                 </span>
diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx
index edbf186bb..5ac4eaf4c 100644
--- a/src/components/Create/Link/Confirm.view.tsx
+++ b/src/components/Create/Link/Confirm.view.tsx
@@ -186,7 +186,7 @@ export const CreateLinkConfirmView = ({
                 {createType == 'link'
                     ? 'Text Tokens'
                     : createType == 'direct'
-                      ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : utils.shortenAddressLong(recipient.address ?? '')}`
+                      ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : utils.printableAddress(recipient.address ?? '')}`
                       : `Send to ${recipient.name}`}
             </label>
             <label className="max-w-96 text-start text-h8 font-light">
diff --git a/src/components/Create/Link/Initial.view.tsx b/src/components/Create/Link/Initial.view.tsx
index 5a8bd700e..a89bcc63a 100644
--- a/src/components/Create/Link/Initial.view.tsx
+++ b/src/components/Create/Link/Initial.view.tsx
@@ -231,7 +231,7 @@ export const CreateLinkInitialView = ({
                                         <div className="rounded-full border border-n-1">
                                             <Icon name="profile" className="h-6 w-6" />
                                         </div>
-                                        <div className="truncate">{utils.shortenAddressLong(recipient.address, 6)}</div>
+                                        <div className="truncate">{utils.printableAddress(recipient.address)}</div>
                                     </div>
                                     <label className="font-normal">
                                         {' '}
diff --git a/src/components/Create/Link/Input.view.tsx b/src/components/Create/Link/Input.view.tsx
index e37c4226a..3186986e6 100644
--- a/src/components/Create/Link/Input.view.tsx
+++ b/src/components/Create/Link/Input.view.tsx
@@ -241,7 +241,7 @@ export const CreateLinkInputView = ({
                 {createType === 'link'
                     ? 'Text Tokens'
                     : createType === 'direct'
-                      ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : utils.shortenAddressLong(recipient.address ?? '')}`
+                      ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : utils.printableAddress(recipient.address ?? '')}`
                       : `Send to ${recipient.name}`}
             </label>
             <label className="max-w-96 text-start text-h8 font-light">
diff --git a/src/components/Create/Link/Success.view.tsx b/src/components/Create/Link/Success.view.tsx
index 6459be83b..045fc6296 100644
--- a/src/components/Create/Link/Success.view.tsx
+++ b/src/components/Create/Link/Success.view.tsx
@@ -86,7 +86,7 @@ export const CreateLinkSuccessView = ({
             {link && <QRCodeWrapper url={link} />}
             <label className="text-h8 ">
                 {createType === 'direct'
-                    ? `You have successfully sent the funds to ${recipient.name?.endsWith('.eth') ? recipient.name : utils.shortenAddressLong(recipient.address ?? '')}.`
+                    ? `You have successfully sent the funds to ${recipient.name?.endsWith('.eth') ? recipient.name : utils.printableAddress(recipient.address ?? '')}.`
                     : 'Share this link or QR code with the recipient. They will be able to claim the funds on any chain in any token.'}
             </label>
             {link && (
diff --git a/src/components/Dashboard/components/MobileComponent.tsx b/src/components/Dashboard/components/MobileComponent.tsx
index 402fb9f5c..f5e0c3013 100644
--- a/src/components/Dashboard/components/MobileComponent.tsx
+++ b/src/components/Dashboard/components/MobileComponent.tsx
@@ -44,7 +44,7 @@ export const MobileItemComponent = ({
                         {linkDetail.chain}]
                     </label>
 
-                    <label>From: {utils.shortenAddressLong(linkDetail.address ?? address)}</label>
+                    <label>From: {utils.printableAddress(linkDetail.address ?? address)}</label>
                 </div>
                 <div className="flex flex-col items-end justify-end gap-2 text-end">
                     <div>
diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx
index f3865e2fb..62954459a 100644
--- a/src/components/Dashboard/index.tsx
+++ b/src/components/Dashboard/index.tsx
@@ -112,7 +112,7 @@ export const Dashboard = () => {
                     <label className="text-h2">Dashboard</label>
                     <label className="text-h7 font-normal">
                         {dashboardData.length > 0
-                            ? `See all links created and claimed  ${address ? `with ${utils.shortenAddressLong(address)}` : 'on this device'}`
+                            ? `See all links created and claimed  ${address ? `with ${utils.printableAddress(address)}` : 'on this device'}`
                             : 'You have not created or claimed any links yet.'}
                     </label>
                 </div>
@@ -184,7 +184,7 @@ export const Dashboard = () => {
                                                 <td className="td-custom font-bold">{link.chain}</td>
                                                 <td className="td-custom">{utils.formatDate(new Date(link.date))}</td>
                                                 <td className="td-custom">
-                                                    {utils.shortenAddressLong(link.address ?? address ?? '')}
+                                                    {utils.printableAddress(link.address ?? address ?? '')}
                                                 </td>
                                                 <td className="td-custom max-w-32">
                                                     <span
diff --git a/src/components/Profile/Components/TableComponent.tsx b/src/components/Profile/Components/TableComponent.tsx
index 4ca452919..d7dd17555 100644
--- a/src/components/Profile/Components/TableComponent.tsx
+++ b/src/components/Profile/Components/TableComponent.tsx
@@ -108,7 +108,7 @@ export const TableComponent = ({
                                     <td className="td-custom font-bold">{data.dashboardItem.chain}</td>
                                     <td className="td-custom">{utils.formatDate(new Date(data.dashboardItem.date))}</td>
                                     <td className="td-custom">
-                                        {utils.shortenAddressLong(data.dashboardItem.address ?? '')}
+                                        {utils.printableAddress(data.dashboardItem.address ?? '')}
                                     </td>
                                     <td className="td-custom max-w-32">
                                         <span
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index ff18d8ac8..04f0bd3e8 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -77,7 +77,7 @@ export const Profile = () => {
     const [initialUserName, setInitialUserName] = useState(
         user?.user?.username ??
             user?.user?.email ??
-            (user?.accounts ? utils.shortenAddressLong(user?.accounts[0]?.account_identifier) : '')
+            (user?.accounts ? utils.printableAddress(user?.accounts[0]?.account_identifier) : '')
     )
     const toastIdRef = useRef<ToastId | undefined>(undefined)
     const toast = useToast({
@@ -271,7 +271,7 @@ export const Profile = () => {
                             primaryText: data.userName,
                             address: data.address,
                             secondaryText: '',
-                            tertiaryText: utils.shortenAddressLong(data.address) ?? '',
+                            tertiaryText: utils.printableAddress(data.address) ?? '',
                             quaternaryText: data.txs.toString(),
                             itemKey: data.userName + Math.random(),
                             type: 'contacts',
@@ -392,7 +392,7 @@ export const Profile = () => {
 
                                     <span className="flex justify-center gap-1 text-h8 font-normal">
                                         {user?.user?.email ??
-                                            utils.shortenAddressLong(user.accounts?.[0]?.account_identifier)}
+                                            utils.printableAddress(user.accounts?.[0]?.account_identifier)}
                                         <div className={`flex flex-row items-center justify-center `}>
                                             <div
                                                 className={`kyc-badge select-none ${user?.user?.kycStatus === 'verified' ? 'bg-kyc-green px-2 py-1 text-black' : 'bg-gray-1 text-white hover:ring-2 hover:ring-gray-2'} w-max`}
@@ -561,7 +561,7 @@ export const Profile = () => {
                                                         )
                                                     }}
                                                 />
-                                                {utils.shortenAddressLong(referral.address, 6)}
+                                                {utils.printableAddress(referral.address)}
                                             </label>
                                             <label className="w-[30%] text-center text-h8">
                                                 {referral?.totalReferrals ?? 0}
diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx
index 016b20c99..ee51a60d6 100644
--- a/src/components/Request/Pay/Views/Success.view.tsx
+++ b/src/components/Request/Pay/Views/Success.view.tsx
@@ -17,7 +17,6 @@ export const SuccessView = ({ transactionHash, requestLinkData }: _consts.IPaySc
     >(undefined)
     const explorerUrlAxelarWithTx = 'https://axelarscan.io/gmp/' + transactionHash
 
-
     useEffect(() => {
         if (transactionHash) {
             fetchDestinationChain(transactionHash, setExplorerUrlDestChainWithTxHash)
@@ -27,11 +26,7 @@ export const SuccessView = ({ transactionHash, requestLinkData }: _consts.IPaySc
         <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
             <label className="text-h2">Yay!</label>
             <label className="text-h8 font-bold ">
-                You have successfully paid{' '}
-                {requestLinkData.recipientAddress.endsWith('.eth')
-                    ? requestLinkData.recipientAddress
-                    : utils.shortenAddressLong(requestLinkData.recipientAddress)}
-                !
+                You have successfully paid {utils.printableAddress(requestLinkData.recipientAddress)}!
             </label>
             <div className="flex w-full flex-col items-start justify-center gap-1.5 text-h9 font-normal">
                 <label className="text-h8 font-normal text-gray-1">Transaction details</label>
diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts
index 1b7c74bb0..e8f0f391e 100644
--- a/src/utils/general.utils.ts
+++ b/src/utils/general.utils.ts
@@ -1,7 +1,6 @@
 import * as interfaces from '@/interfaces'
 import * as consts from '@/constants'
-import peanut, { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
-import { exportTraceState } from 'next/dist/trace'
+import peanut from '@squirrel-labs/peanut-sdk'
 import { ethers } from 'ethers'
 
 export const shortenAddress = (address: string) => {
@@ -10,8 +9,7 @@ export const shortenAddress = (address: string) => {
     return firstBit + '..'
 }
 
-export const shortenAddressLong = (address: string, chars?: number) => {
-    if (!address) return
+export const shortenAddressLong = (address: string, chars?: number): string => {
     if (!chars) chars = 6
     const firstBit = address.substring(0, chars)
     const endingBit = address.substring(address.length - chars, address.length)
@@ -19,6 +17,11 @@ export const shortenAddressLong = (address: string, chars?: number) => {
     return firstBit + '...' + endingBit
 }
 
+export const printableAddress = (address: string): string => {
+    if (address.endsWith('.eth')) return address
+    return shortenAddressLong(address)
+}
+
 export const shortenHash = (address: string) => {
     if (!address) return
     const firstBit = address.substring(0, 8)