Skip to content

Commit

Permalink
[FEAT] copy to clipboard information view
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabrielbazan7
gabrielbazan7 committed Jun 15, 2022
1 parent f8f4e70 commit 69c53ad
Showing 1 changed file with 113 additions and 30 deletions.
143 changes: 113 additions & 30 deletions src/navigation/wallet/screens/wallet-settings/WalletInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {View} from 'react-native';
import WalletInformationSkeleton from './WalletInformationSkeleton';
import {sleep} from '../../../../utils/helper-methods';
import {useAppDispatch} from '../../../../utils/hooks';
import haptic from '../../../../components/haptic-feedback/haptic';
import CopiedSvg from '../../../../../assets/img/copied-success.svg';

const InfoContainer = styled.SafeAreaView`
flex: 1;
Expand Down Expand Up @@ -48,8 +50,18 @@ const SettingsHeader = styled(InfoSettingsRow)`
margin: 15px 0 5px 0;
`;

const CopyButton = styled.TouchableOpacity`
margin-bottom: 15px;
const CopyImgContainer = styled.View`
justify-content: center;
margin-right: 5px;
`;

const CopyImgContainerLeft = styled.View`
justify-content: center;
margin-left: 5px;
`;

const CopyRow = styled.TouchableOpacity`
flex-direction: row;
`;

export const getLinkedWallet = (key: Key, wallet: Wallet) => {
Expand Down Expand Up @@ -94,37 +106,69 @@ const WalletInformation = () => {
const dispatch = useAppDispatch();
const key = useAppSelector(({WALLET}) => WALLET.keys[wallet.keyId]);
const [isLoading, setIsLoading] = useState(true);
const [copiedWalletId, setCopiedWalletId] = useState(false);
const [copiedAddessType, setCopiedAddressType] = useState(false);
const [copiedRootPath, setCopiedRootPath] = useState(false);
const [copiedXPubKey, setCopiedXPubKey] = useState('');
const [copiedAddress, setCopiedAddress] = useState('');

useLayoutEffect(() => {
navigation.setOptions({
headerTitle: () => <HeaderTitle>Wallet Information</HeaderTitle>,
});
}, [navigation]);

const copyText = (text: string) => {
const copyToClipboard = (text: string) => {
haptic('impactLight');
Clipboard.setString(text);
};

useEffect(() => {
if (
!copiedWalletId &&
!copiedAddessType &&
!copiedRootPath &&
!copiedXPubKey &&
!copiedAddress
) {
return;
}
const timer = setTimeout(() => {
setCopiedWalletId(false);
setCopiedAddressType(false);
setCopiedRootPath(false);
setCopiedXPubKey('');
setCopiedAddress('');
}, 3000);

return () => clearTimeout(timer);
}, [
copiedWalletId,
copiedAddessType,
copiedRootPath,
copiedXPubKey,
copiedAddress,
]);

const unitToSatoshi = dispatch(GetPrecision(coin))?.unitToSatoshi || 0;

const [copayers, setCopayers] = useState<any[]>();
const [balanceByAddress, setBalanceByAddress] = useState<any[]>();

useEffect(() => {
// TODO
wallet.getStatus({network: 'livenet'}, async (err: any, status: Status) => {
if (err) {
// TODO
console.log(err);
setIsLoading(false);
}
if (status) {
setCopayers(status.wallet.copayers);
setBalanceByAddress(status.balance.byAddress);
await sleep(500);
setIsLoading(false);
}
});
wallet.getStatus(
{network: wallet.network},
async (err: any, status: Status) => {
if (err) {
setIsLoading(false);
} else if (status) {
setCopayers(status.wallet.copayers);
setBalanceByAddress(status.balance.byAddress);
await sleep(500);
setIsLoading(false);
}
},
);
}, [wallet]);

return (
Expand Down Expand Up @@ -156,11 +200,19 @@ const WalletInformation = () => {
<SettingTitle>WalletId</SettingTitle>
</InfoSettingsRow>

<CopyButton onPress={() => copyText(walletId)}>
<CopyRow
style={{marginBottom: 15}}
onPress={() => {
copyToClipboard(walletId);
setCopiedWalletId(true);
}}>
<H7 numberOfLines={1} ellipsizeMode={'tail'}>
{walletId}
</H7>
</CopyButton>
<CopyImgContainerLeft>
{copiedWalletId ? <CopiedSvg width={17} /> : null}
</CopyImgContainerLeft>
</CopyRow>
<Hr />

{token ? (
Expand Down Expand Up @@ -201,9 +253,16 @@ const WalletInformation = () => {
<InfoSettingsRow>
<SettingTitle>Address Type</SettingTitle>

<InfoLabel>
<CopyRow
onPress={() => {
copyToClipboard(addressType);
setCopiedAddressType(true);
}}>
<CopyImgContainer>
{copiedAddessType ? <CopiedSvg width={17} /> : null}
</CopyImgContainer>
<H7>{addressType || 'P2SH'}</H7>
</InfoLabel>
</CopyRow>
</InfoSettingsRow>
<Hr />
</>
Expand All @@ -212,9 +271,16 @@ const WalletInformation = () => {
<InfoSettingsRow>
<SettingTitle>Derivation Path</SettingTitle>

<InfoLabel>
<CopyRow
onPress={() => {
copyToClipboard(rootPath);
setCopiedRootPath(true);
}}>
<CopyImgContainer>
{copiedRootPath ? <CopiedSvg width={17} /> : null}
</CopyImgContainer>
<H7>{rootPath}</H7>
</InfoLabel>
</CopyRow>
</InfoSettingsRow>
<Hr />

Expand Down Expand Up @@ -272,12 +338,21 @@ const WalletInformation = () => {
<SettingTitle>Copayer {index}</SettingTitle>
</InfoSettingsRow>

<CopyButton onPress={() => copyText(xPubKey)}>
<H7>{xPubKey}</H7>
</CopyButton>
<CopyRow
onPress={() => {
copyToClipboard(xPubKey);
setCopiedXPubKey(xPubKey);
}}>
<H7 style={{width: '90%'}}>{xPubKey}</H7>
<CopyImgContainerLeft style={{width: '10%'}}>
{copiedXPubKey === xPubKey ? (
<CopiedSvg width={17} />
) : null}
</CopyImgContainerLeft>
</CopyRow>

<InfoSettingsRow>
{index === 0 ? <H7>({rootPath})</H7> : null}
<H7>({rootPath})</H7>
</InfoSettingsRow>
<Hr />
</View>
Expand All @@ -294,16 +369,24 @@ const WalletInformation = () => {
<View key={index}>
<InfoSettingsRow style={{justifyContent: 'space-between'}}>
<View>
<CopyButton
<CopyRow
style={{marginBottom: 0}}
onPress={() => copyText(a.address)}>
onPress={() => {
copyToClipboard(a.address);
setCopiedAddress(a.address);
}}>
<CopyImgContainer style={{width: '10%'}}>
{copiedAddress === a.address ? (
<CopiedSvg width={17} />
) : null}
</CopyImgContainer>
<SettingTitle
numberOfLines={1}
ellipsizeMode={'tail'}
style={{maxWidth: 200}}>
{a.address}
</SettingTitle>
</CopyButton>
</CopyRow>
</View>

<InfoLabel>
Expand Down

0 comments on commit 69c53ad

Please sign in to comment.