diff --git a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx index fabf742b21..90e3dc4741 100644 --- a/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx +++ b/apps/wallet-mobile/src/components/Clipboard/ClipboardProvider.tsx @@ -25,11 +25,16 @@ export const ClipboardProvider = ({children}: Props) => { const [copied, setCopied] = React.useState(null) const {height, width} = useWindowDimensions() 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, - locationX: (event?.nativeEvent.pageX ?? width * 0.5) - feedback.length * 4, + 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 3528a50606..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' @@ -15,22 +15,24 @@ type CopyButtonProps = { message?: string } -export const CopyButton = ({title, value, onCopy, message}: CopyButtonProps) => { +export const CopyButton = ({title, value, onCopy, message, style}: CopyButtonProps) => { const {isCopying, copy} = useCopy() const {atoms} = useTheme() return ( -