Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Don't Show Again On Deposit Dialog #1122

Open
wants to merge 8 commits into
base: dev
Choose a base branch
from
Open

Added Don't Show Again On Deposit Dialog #1122

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7334b7d
DBO DepositAddress.tsx
SABITRADE Feb 24, 2025
008004d
Update DepositAddress.tsx
SABITRADE Feb 24, 2025
4357978
Update DepositAddress.tsx
SABITRADE Feb 24, 2025
fda1c47
Update DepositAddress.tsx
SABITRADE Feb 25, 2025
5ea8db9
Update DepositAddress.tsx
SABITRADE Feb 25, 2025
c320715
Update DepositAddress.tsx
SABITRADE Feb 25, 2025
be25eff
Update DepositAddress.tsx
SABITRADE Feb 25, 2025
3b4d5c8
Update DepositAddress.tsx
SABITRADE Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 71 additions & 10 deletions packages/app/features/deposit/components/DepositAddress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ import { useState, useEffect } from 'react'
import type { Address } from 'viem'
import { IconCopy } from 'app/components/icons'
import { useQRCode } from 'app/utils/useQRCode'
import AsyncStorage from '@react-native-async-storage/async-storage'

function CopyAddressDialog({ isOpen, onClose, onConfirm }) {
function CopyAddressDialog({ isOpen, onClose, onConfirm }) { const [dontShowAgain, setDontShowAgain] = useState(false)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please use our biome integration to format these changes

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we won't need this local state if we are using the checkbox form and the async storage

return (
<Dialog open={isOpen} onOpenChange={onClose}>
<Dialog.Adapt when="sm" platform="touch">
Expand Down Expand Up @@ -61,14 +62,33 @@ function CopyAddressDialog({ isOpen, onClose, onConfirm }) {
3. I understand that if I make any mistakes, there is no way to recover the funds.
</Paragraph>

<XStack justifyContent="flex-end" marginTop="$4" gap="$4">
<Dialog.Close asChild>
<Button br={'$2'}>Cancel</Button>
</Dialog.Close>
<Button theme="yellow_active" onPress={onConfirm} br={'$2'}>
<Button.Text col={'$color12'}>I Agree & Proceed</Button.Text>
</Button>
</XStack>
<XStack justifyContent="flex-end" marginTop="$4" gap="$4" ai="center">
{/* Checkbox on the left */}
<XStack ai="center" gap="$2">
<input
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a checkbox form component that has some helpful defaults. lets use that here

https://github.com/0xsend/sendapp/blob/db7163bd2fff181e55655bade3ee829bb4e9bee7/packages/app/components/FormFields/BooleanCheckboxField.tsx

type="checkbox"
checked={dontShowAgain}
onChange={async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't do this inline. Pop this out into a new function

const newValue = !dontShowAgain;
setDontShowAgain(newValue);
try {
await AsyncStorage.setItem('dontShowAgain', JSON.stringify(newValue));
} catch (error) {
console.error('Failed to save checkbox state:', error);
}
}}
/>
<Text fontSize="$3">Don't show again</Text>
</XStack>

{/* Buttons on the right */}
<Dialog.Close asChild>
<Button br={'$2'}>Cancel</Button>
</Dialog.Close>
<Button theme="yellow_active" onPress={onConfirm} br={'$2'}>
<Button.Text col={'$color12'}>I Agree & Proceed</Button.Text>
</Button>
</XStack>
</YStack>
</Dialog.Content>
</Dialog.Portal>
Expand All @@ -81,6 +101,23 @@ export function DepositAddress({ address, ...props }: { address?: Address } & Bu
const [hasCopied, setHasCopied] = useState(false)
const [isConfirmed, setIsConfirmed] = useState(false)
const [copyAddressDialogIsOpen, setCopyAddressDialogIsOpen] = useState(false)
const [dontShowAgain, setDontShowAgain] = useState(false);

useEffect(() => {
const loadDontShowAgain = async () => {
try {
const savedValue = await AsyncStorage.getItem('dontShowAgain');
if (savedValue !== null) {
setDontShowAgain(JSON.parse(savedValue));
setIsConfirmed(JSON.parse(savedValue)); // Auto-confirm if "Don't show again" was checked
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this isn't the right way to do this. Instead we should load this state from storage in the screen component and pass it as props to skip over the dialog entirely

https://github.com/0xsend/sendapp/blob/84472bd1e90b0a2fcb09d09ff8b6bce8052014f6/packages/app/features/deposit/crypto/screen.tsx

}
} catch (error) {
console.error('Failed to load dontShowAgain:', error);
}
};

loadDontShowAgain();
}, []);

const { data: qrData, error } = useQRCode(address, {
width: 240,
Expand All @@ -104,12 +141,36 @@ export function DepositAddress({ address, ...props }: { address?: Address } & Bu
if (!address) return null

const copyOnPress = async () => {
if (!isConfirmed) {
if (dontShowAgain) {
try {
await AsyncStorage.setItem('dontShowAgain', 'true')
} catch (error) {
console.error('Failed to save dontShowAgain:', error)
}
}
if (!dontShowAgain) {
setCopyAddressDialogIsOpen(true);
}
return
}

await Clipboard.setString(address).catch(() =>
toast.show('Something went wrong', {
message: 'We were unable to copy your address to the clipboard',
customData: {
theme: 'red',
},
})
)
setHasCopied(true)
}
if (!isConfirmed) {
setCopyAddressDialogIsOpen(true)
return
}

await Clipboard.setStringAsync(address).catch(() =>
await Clipboard.setString(address).catch(() =>
toast.show('Something went wrong', {
message: 'We were unable to copy your address to the clipboard',
customData: {
Expand Down