From 70bfad3eb03673dbe6096a48a01b1ad94f085fbd Mon Sep 17 00:00:00 2001
From: Vadim <eugene.s@zpoken.ai>
Date: Thu, 13 Jul 2023 14:28:58 +0300
Subject: [PATCH] Use the Address component in the recieve modal

---
 src/components/ReceiveModal.tsx     | 14 ++++++--------
 src/components/penumbra/Address.tsx |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/ReceiveModal.tsx b/src/components/ReceiveModal.tsx
index cb886c0..b5511e7 100644
--- a/src/components/ReceiveModal.tsx
+++ b/src/components/ReceiveModal.tsx
@@ -4,10 +4,11 @@ import { ViewProtocolService } from '@buf/penumbra-zone_penumbra.bufbuild_connec
 import { AddressByIndexRequest } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1alpha1/view_pb'
 import { extensionTransport } from '@/lib/extensionTransport'
 import { ModalProps, ModalWrapper } from './ModalWrapper'
-import { Copy } from './Copy'
+import { AddressComponent } from './penumbra/Address'
+import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/crypto/v1alpha1/crypto_pb'
 
 export const ReceiveModal: React.FC<ModalProps> = ({ show, onClose }) => {
-	const [address, setAddress] = useState<string>('')
+	const [address, setAddress] = useState<Address | undefined>()
 
 	useEffect(() => {
 		const getAddressByIndex = async () => {
@@ -22,10 +23,7 @@ export const ReceiveModal: React.FC<ModalProps> = ({ show, onClose }) => {
 			})
 
 			const { address } = await client.addressByIndex(request)
-
-			const { altBech32m } = address?.toJson() as { altBech32m: string }
-
-			setAddress(altBech32m)
+			setAddress(address)
 		}
 		getAddressByIndex()
 	}, [])
@@ -34,8 +32,8 @@ export const ReceiveModal: React.FC<ModalProps> = ({ show, onClose }) => {
 		<ModalWrapper show={show} onClose={onClose}>
 			<div className='relative overflow-y-auto pt-[22px] pb-[90px] px-[16px]'>
 				<p className='h3 mb-[8px]'>Address 1</p>
-				<div className='flex p-[10px] justify-center items-center gap-[8px] rounded-[10px] bg-dark_grey text_body text-light_grey'>
-					<Copy text={address} type='full' />
+				<div className='py-[8px] px-[16px] bg-dark_grey rounded-[10px] text_numbers_s text-light_grey break-words min-h-[44px]'>
+					{address && <AddressComponent address={address} show_full />}
 				</div>
 			</div>
 		</ModalWrapper>
diff --git a/src/components/penumbra/Address.tsx b/src/components/penumbra/Address.tsx
index e6d26b5..bfd0e5e 100644
--- a/src/components/penumbra/Address.tsx
+++ b/src/components/penumbra/Address.tsx
@@ -25,7 +25,7 @@ export const AddressComponent: React.FC<{
 
 	return (
 		<div style={{ display: 'inline-block' }}>
-			<span className='monospace'>{display_address}</span>
+			<span className='monospace break-all'>{display_address}</span>
 			<span
 				className='cursor-pointer hover:no-underline hover:opacity-75'
 				onClick={handleCopy}