From c9ed8c5c09f6d58d05edd7f369399e8d94eba3ca Mon Sep 17 00:00:00 2001
From: banklesss <javierbueno@emurgo.io>
Date: Tue, 10 Dec 2024 16:24:26 +0100
Subject: [PATCH 1/4] fix(wallet-mobile): address detils styling

---
 .../src/components/Button/Button.tsx             |  1 -
 .../components/Clipboard/ClipboardProvider.tsx   |  8 +++++---
 apps/wallet-mobile/src/components/CopyButton.tsx |  6 ++++--
 .../common/ShareDetailsCard/ShareDetailsCard.tsx | 16 +++++++++++++---
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/apps/wallet-mobile/src/components/Button/Button.tsx b/apps/wallet-mobile/src/components/Button/Button.tsx
index 4846925a58..aa66f406c4 100644
--- a/apps/wallet-mobile/src/components/Button/Button.tsx
+++ b/apps/wallet-mobile/src/components/Button/Button.tsx
@@ -154,7 +154,6 @@ const useStyles = ({
     container: {
       backgroundColor,
       ...atoms.flex,
-      ...atoms.flex_grow,
       ...atoms.flex_row,
       ...atoms.align_start,
       ...atoms.justify_center,
diff --git a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
index fabf742b21..1222f9e0b3 100644
--- a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
+++ b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
@@ -24,12 +24,12 @@ export const ClipboardProvider = ({children}: Props) => {
   const styles = useStyles()
   const [copied, setCopied] = React.useState<CopiedState | null>(null)
   const {height, width} = useWindowDimensions()
-  const copy: ClipboardContext['copy'] = ({text, feedback = 'Copied', event}) => {
+  const copy: ClipboardContext['copy'] = ({text, feedback = 'Copied', event, offsetX = 0, offsetY = 0}) => {
     Clipboard.setString(text)
     setCopied({
       feedback,
-      locationY: event ? event.nativeEvent.pageY - 50 : height * 0.85,
-      locationX: (event?.nativeEvent.pageX ?? width * 0.5) - feedback.length * 4,
+      locationY: (event ? event.nativeEvent.pageY - 50 : height * 0.85) + offsetY,
+      locationX: (event?.nativeEvent.pageX ?? width * 0.5) - feedback.length * 4 + offsetX,
     })
     setTimeout(() => setCopied(null), FEEDBACK_TIMEOUT)
   }
@@ -70,6 +70,8 @@ type CopyProps = {
   text: string
   feedback?: string
   event?: GestureResponderEvent
+  offsetX?: number
+  offsetY?: number
 }
 type ClipboardContext = {
   copy: (a: CopyProps) => void
diff --git a/apps/wallet-mobile/src/components/CopyButton.tsx b/apps/wallet-mobile/src/components/CopyButton.tsx
index 3528a50606..94bfe1391d 100644
--- a/apps/wallet-mobile/src/components/CopyButton.tsx
+++ b/apps/wallet-mobile/src/components/CopyButton.tsx
@@ -13,9 +13,11 @@ type CopyButtonProps = {
   children?: React.ReactNode
   style?: StyleProp<ViewStyle>
   message?: string
+  offsetX?: number
+  offsetY?: number
 }
 
-export const CopyButton = ({title, value, onCopy, message}: CopyButtonProps) => {
+export const CopyButton = ({title, value, onCopy, message, offsetX, offsetY}: CopyButtonProps) => {
   const {isCopying, copy} = useCopy()
   const {atoms} = useTheme()
 
@@ -28,7 +30,7 @@ export const CopyButton = ({title, value, onCopy, message}: CopyButtonProps) =>
       icon={isCopying ? Icon.CopySuccess : Icon.Copy}
       rightIcon
       onPress={(event) => {
-        copy({text: value, feedback: message, event})
+        copy({text: value, feedback: message, event, offsetX, offsetY})
         onCopy?.()
       }}
     />
diff --git a/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx b/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx
index d083b2b913..fb43ecb4d2 100644
--- a/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx
+++ b/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx
@@ -46,7 +46,9 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
         <View style={styles.textRow}>
           <Text style={styles.textAddressDetails}>{address}</Text>
 
-          <CopyButton value={address} onCopy={handleAddressOnCopy} message={strings.addressCopiedMsg} />
+          <View>
+            <Copy value={address} onCopy={handleAddressOnCopy} message={strings.addressCopiedMsg} />
+          </View>
         </View>
       </View>
 
@@ -57,7 +59,7 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
           <View style={styles.textRow}>
             <Text style={styles.textAddressDetails}>{stakingHash}</Text>
 
-            <CopyButton value={stakingHash} message={strings.addressCopiedMsg} />
+            <Copy value={stakingHash} message={strings.addressCopiedMsg} />
           </View>
         </View>
       )}
@@ -69,7 +71,7 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
           <View style={styles.textRow}>
             <Text style={styles.textAddressDetails}>{spendingHash}</Text>
 
-            <CopyButton value={spendingHash} message={strings.addressCopiedMsg} />
+            <Copy value={spendingHash} message={strings.addressCopiedMsg} />
           </View>
         </View>
       )}
@@ -87,6 +89,14 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
   )
 }
 
+const Copy = ({value, message, onCopy}: {value: string; message: string; onCopy?: () => void}) => {
+  return (
+    <View>
+      <CopyButton value={value} message={message} onCopy={onCopy} offsetX={-50} offsetY={-10} />
+    </View>
+  )
+}
+
 const useStyles = () => {
   const screenWidth = useWindowDimensions().width
   const {atoms, color} = useTheme()

From fbaa44672ccdda3083888b70be12751e7d18c929 Mon Sep 17 00:00:00 2001
From: banklesss <javierbueno@emurgo.io>
Date: Thu, 12 Dec 2024 14:29:46 +0100
Subject: [PATCH 2/4] CR: update

---
 apps/wallet-mobile/src/components/Button/Button.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/wallet-mobile/src/components/Button/Button.tsx b/apps/wallet-mobile/src/components/Button/Button.tsx
index aa66f406c4..8428503638 100644
--- a/apps/wallet-mobile/src/components/Button/Button.tsx
+++ b/apps/wallet-mobile/src/components/Button/Button.tsx
@@ -155,6 +155,7 @@ const useStyles = ({
       backgroundColor,
       ...atoms.flex,
       ...atoms.flex_row,
+      ...atoms.flex_grow,
       ...atoms.align_start,
       ...atoms.justify_center,
       ...shape,

From 1210fd905f23c159b3958e8ce5de480388b1d194 Mon Sep 17 00:00:00 2001
From: jorbuedo <jorbuedo@gmail.com>
Date: Fri, 13 Dec 2024 10:12:11 +0100
Subject: [PATCH 3/4] make copy feedback not overflow screen

---
 .../src/components/Button/Button.tsx          |  2 +-
 .../Clipboard/ClipboardProvider.tsx           | 11 +++++--
 .../src/components/CopyButton.tsx             | 32 +++++++++----------
 .../ShareDetailsCard/ShareDetailsCard.tsx     | 16 ++--------
 4 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/apps/wallet-mobile/src/components/Button/Button.tsx b/apps/wallet-mobile/src/components/Button/Button.tsx
index 8428503638..4846925a58 100644
--- a/apps/wallet-mobile/src/components/Button/Button.tsx
+++ b/apps/wallet-mobile/src/components/Button/Button.tsx
@@ -154,8 +154,8 @@ const useStyles = ({
     container: {
       backgroundColor,
       ...atoms.flex,
-      ...atoms.flex_row,
       ...atoms.flex_grow,
+      ...atoms.flex_row,
       ...atoms.align_start,
       ...atoms.justify_center,
       ...shape,
diff --git a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
index 1222f9e0b3..9abfdf5d6d 100644
--- a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
+++ b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
@@ -24,12 +24,17 @@ export const ClipboardProvider = ({children}: Props) => {
   const styles = useStyles()
   const [copied, setCopied] = React.useState<CopiedState | null>(null)
   const {height, width} = useWindowDimensions()
-  const copy: ClipboardContext['copy'] = ({text, feedback = 'Copied', event, offsetX = 0, offsetY = 0}) => {
+  const copy: ClipboardContext['copy'] = ({text, feedback = 'Copied', event}) => {
+    const baseLocationX = (event?.nativeEvent.pageX ?? width * 0.5) - feedback.length * 4
+    const maxX = width - 20 - feedback.length * 8
+    const minX = 20 + feedback.length * 8
+    const locationX = Math.min(Math.max(baseLocationX, minX), maxX)
+
     Clipboard.setString(text)
     setCopied({
       feedback,
-      locationY: (event ? event.nativeEvent.pageY - 50 : height * 0.85) + offsetY,
-      locationX: (event?.nativeEvent.pageX ?? width * 0.5) - feedback.length * 4 + offsetX,
+      locationY: event ? event.nativeEvent.pageY - 50 : height * 0.85,
+      locationX,
     })
     setTimeout(() => setCopied(null), FEEDBACK_TIMEOUT)
   }
diff --git a/apps/wallet-mobile/src/components/CopyButton.tsx b/apps/wallet-mobile/src/components/CopyButton.tsx
index 94bfe1391d..fc4e8ed5f5 100644
--- a/apps/wallet-mobile/src/components/CopyButton.tsx
+++ b/apps/wallet-mobile/src/components/CopyButton.tsx
@@ -1,6 +1,6 @@
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
-import {StyleProp, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 
 import {Icon} from '../components/Icon'
 import {Button, ButtonType} from './Button/Button'
@@ -13,26 +13,26 @@ type CopyButtonProps = {
   children?: React.ReactNode
   style?: StyleProp<ViewStyle>
   message?: string
-  offsetX?: number
-  offsetY?: number
 }
 
-export const CopyButton = ({title, value, onCopy, message, offsetX, offsetY}: CopyButtonProps) => {
+export const CopyButton = ({title, value, onCopy, message, style}: CopyButtonProps) => {
   const {isCopying, copy} = useCopy()
   const {atoms} = useTheme()
 
   return (
-    <Button
-      type={ButtonType.SecondaryText}
-      fontOverride={atoms.body_1_lg_regular}
-      style={{...atoms.p_0, ...atoms.justify_between}}
-      title={title}
-      icon={isCopying ? Icon.CopySuccess : Icon.Copy}
-      rightIcon
-      onPress={(event) => {
-        copy({text: value, feedback: message, event, offsetX, offsetY})
-        onCopy?.()
-      }}
-    />
+    <View style={style}>
+      <Button
+        type={ButtonType.SecondaryText}
+        fontOverride={atoms.body_1_lg_regular}
+        style={{...atoms.p_0, ...atoms.justify_between, flexGrow: 0}}
+        title={title}
+        icon={isCopying ? Icon.CopySuccess : Icon.Copy}
+        rightIcon
+        onPress={(event) => {
+          copy({text: value, feedback: message, event})
+          onCopy?.()
+        }}
+      />
+    </View>
   )
 }
diff --git a/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx b/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx
index fb43ecb4d2..d083b2b913 100644
--- a/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx
+++ b/apps/wallet-mobile/src/features/Receive/common/ShareDetailsCard/ShareDetailsCard.tsx
@@ -46,9 +46,7 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
         <View style={styles.textRow}>
           <Text style={styles.textAddressDetails}>{address}</Text>
 
-          <View>
-            <Copy value={address} onCopy={handleAddressOnCopy} message={strings.addressCopiedMsg} />
-          </View>
+          <CopyButton value={address} onCopy={handleAddressOnCopy} message={strings.addressCopiedMsg} />
         </View>
       </View>
 
@@ -59,7 +57,7 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
           <View style={styles.textRow}>
             <Text style={styles.textAddressDetails}>{stakingHash}</Text>
 
-            <Copy value={stakingHash} message={strings.addressCopiedMsg} />
+            <CopyButton value={stakingHash} message={strings.addressCopiedMsg} />
           </View>
         </View>
       )}
@@ -71,7 +69,7 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
           <View style={styles.textRow}>
             <Text style={styles.textAddressDetails}>{spendingHash}</Text>
 
-            <Copy value={spendingHash} message={strings.addressCopiedMsg} />
+            <CopyButton value={spendingHash} message={strings.addressCopiedMsg} />
           </View>
         </View>
       )}
@@ -89,14 +87,6 @@ export const ShareDetailsCard = ({address, spendingHash, stakingHash}: AddressDe
   )
 }
 
-const Copy = ({value, message, onCopy}: {value: string; message: string; onCopy?: () => void}) => {
-  return (
-    <View>
-      <CopyButton value={value} message={message} onCopy={onCopy} offsetX={-50} offsetY={-10} />
-    </View>
-  )
-}
-
 const useStyles = () => {
   const screenWidth = useWindowDimensions().width
   const {atoms, color} = useTheme()

From 6fc6626ab83ab36b75a11e545692b2147fff9778 Mon Sep 17 00:00:00 2001
From: jorbuedo <jorbuedo@gmail.com>
Date: Fri, 13 Dec 2024 10:13:00 +0100
Subject: [PATCH 4/4] cleanup

---
 .../src/components/Clipboard/ClipboardProvider.tsx              | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
index 9abfdf5d6d..90e3dc4741 100644
--- a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
+++ b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx
@@ -75,8 +75,6 @@ type CopyProps = {
   text: string
   feedback?: string
   event?: GestureResponderEvent
-  offsetX?: number
-  offsetY?: number
 }
 type ClipboardContext = {
   copy: (a: CopyProps) => void