mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2024-11-19 09:50:15 +01:00
REF: ExportMultisigCoordinationSetup (#6354)
This commit is contained in:
Marcos Rodriguez Vélez
GitHub
parent
6f83bc1709
commit
72e1db1e35
@ -27,7 +27,7 @@ import WalletsAddMultisigStep2 from './screen/wallets/addMultisigStep2';
|
||||
import WalletAddresses from './screen/wallets/addresses';
|
||||
import WalletDetails from './screen/wallets/details';
|
||||
import WalletExport from './screen/wallets/export';
|
||||
import ExportMultisigCoordinationSetup from './screen/wallets/exportMultisigCoordinationSetup';
|
||||
import ExportMultisigCoordinationSetup from './screen/wallets/ExportMultisigCoordinationSetup';
|
||||
import GenerateWord from './screen/wallets/generateWord';
|
||||
import ImportWallet from './screen/wallets/import';
|
||||
import ImportCustomDerivationPath from './screen/wallets/importCustomDerivationPath';
|
||||
@ -556,7 +556,12 @@ const ExportMultisigCoordinationSetupRoot = () => {
|
||||
<ExportMultisigCoordinationSetupStack.Screen
|
||||
name="ExportMultisigCoordinationSetup"
|
||||
component={ExportMultisigCoordinationSetup}
|
||||
options={ExportMultisigCoordinationSetup.navigationOptions(theme)}
|
||||
options={navigationStyle({
|
||||
closeButton: true,
|
||||
headerBackVisible: false,
|
||||
statusBarStyle: 'light',
|
||||
title: loc.multisig.export_coordination_setup,
|
||||
})(theme)}
|
||||
/>
|
||||
</ExportMultisigCoordinationSetupStack.Navigator>
|
||||
);
|
||||
|
||||
@ -5,7 +5,7 @@ import { useTheme } from './themes';
|
||||
interface SquareButtonProps {
|
||||
title: string;
|
||||
onPress?: () => void;
|
||||
style: StyleProp<ViewStyle>;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
testID?: string;
|
||||
}
|
||||
|
||||
|
||||
200
screen/wallets/ExportMultisigCoordinationSetup.tsx
Normal file
200
screen/wallets/ExportMultisigCoordinationSetup.tsx
Normal file
@ -0,0 +1,200 @@
|
||||
import React, { useCallback, useContext, useMemo, useReducer, useRef } from 'react';
|
||||
import { ActivityIndicator, InteractionManager, ScrollView, StyleSheet, View } from 'react-native';
|
||||
import { useFocusEffect, useRoute, RouteProp } from '@react-navigation/native';
|
||||
import { BlueSpacing20, BlueText } from '../../BlueComponents';
|
||||
import { DynamicQRCode } from '../../components/DynamicQRCode';
|
||||
import loc from '../../loc';
|
||||
import { SquareButton } from '../../components/SquareButton';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
import { useTheme } from '../../components/themes';
|
||||
import usePrivacy from '../../hooks/usePrivacy';
|
||||
import { TWallet } from '../../class/wallets/types';
|
||||
import SaveFileButton from '../../components/SaveFileButton';
|
||||
|
||||
type RootStackParamList = {
|
||||
ExportMultisigCoordinationSetup: {
|
||||
walletID: string;
|
||||
};
|
||||
};
|
||||
|
||||
const enum ActionType {
|
||||
SET_LOADING = 'SET_LOADING',
|
||||
SET_SHARE_BUTTON_TAPPED = 'SET_SHARE_BUTTON_TAPPED',
|
||||
SET_ERROR = 'SET_ERROR',
|
||||
SET_QR_CODE_CONTENTS = 'SET_QR_CODE_CONTENTS',
|
||||
}
|
||||
|
||||
type State = {
|
||||
isLoading: boolean;
|
||||
isShareButtonTapped: boolean;
|
||||
qrCodeContents?: string;
|
||||
error: string | null;
|
||||
};
|
||||
|
||||
type Action =
|
||||
| { type: ActionType.SET_LOADING; isLoading: boolean }
|
||||
| { type: ActionType.SET_SHARE_BUTTON_TAPPED; isShareButtonTapped: boolean }
|
||||
| { type: ActionType.SET_ERROR; error: string | null }
|
||||
| { type: ActionType.SET_QR_CODE_CONTENTS; qrCodeContents: string };
|
||||
|
||||
function reducer(state: State, action: Action): State {
|
||||
switch (action.type) {
|
||||
case ActionType.SET_LOADING:
|
||||
return { ...state, isLoading: action.isLoading };
|
||||
case ActionType.SET_SHARE_BUTTON_TAPPED:
|
||||
return { ...state, isShareButtonTapped: action.isShareButtonTapped };
|
||||
case ActionType.SET_ERROR:
|
||||
return { ...state, error: action.error, isLoading: false };
|
||||
case ActionType.SET_QR_CODE_CONTENTS:
|
||||
return { ...state, qrCodeContents: action.qrCodeContents, isLoading: false };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const initialState: State = {
|
||||
isLoading: true,
|
||||
isShareButtonTapped: false,
|
||||
qrCodeContents: undefined,
|
||||
error: null,
|
||||
};
|
||||
|
||||
const ExportMultisigCoordinationSetup: React.FC = () => {
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
const { isLoading, isShareButtonTapped, qrCodeContents } = state;
|
||||
const { params } = useRoute<RouteProp<RootStackParamList, 'ExportMultisigCoordinationSetup'>>();
|
||||
const walletID = params.walletID;
|
||||
const { wallets } = useContext(BlueStorageContext);
|
||||
const wallet: TWallet | undefined = wallets.find(w => w.getID() === walletID);
|
||||
const dynamicQRCode = useRef<any>();
|
||||
const { colors } = useTheme();
|
||||
const { enableBlur, disableBlur } = usePrivacy();
|
||||
const stylesHook = StyleSheet.create({
|
||||
scrollViewContent: {
|
||||
backgroundColor: colors.elevated,
|
||||
},
|
||||
type: { color: colors.foregroundColor },
|
||||
secret: { color: colors.foregroundColor },
|
||||
exportButton: {
|
||||
backgroundColor: colors.buttonDisabledBackgroundColor,
|
||||
},
|
||||
});
|
||||
|
||||
const label = useMemo(() => wallet?.getLabel(), [wallet]);
|
||||
const xpub = useMemo(() => wallet?.getXpub(), [wallet]);
|
||||
|
||||
const setIsShareButtonTapped = (value: boolean) => {
|
||||
dispatch({ type: ActionType.SET_SHARE_BUTTON_TAPPED, isShareButtonTapped: value });
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
dispatch({ type: ActionType.SET_LOADING, isLoading: true });
|
||||
|
||||
const task = InteractionManager.runAfterInteractions(async () => {
|
||||
enableBlur();
|
||||
if (wallet) {
|
||||
try {
|
||||
if (typeof xpub === 'string') {
|
||||
const value = Buffer.from(xpub, 'ascii').toString('hex');
|
||||
dispatch({ type: ActionType.SET_QR_CODE_CONTENTS, qrCodeContents: value });
|
||||
} else {
|
||||
throw new Error('Expected getXpub() to return a string.');
|
||||
}
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
|
||||
dispatch({ type: ActionType.SET_ERROR, error: errorMessage });
|
||||
}
|
||||
} else {
|
||||
dispatch({ type: ActionType.SET_ERROR, error: 'Wallet not found' });
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
task.cancel();
|
||||
disableBlur();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [wallet]),
|
||||
);
|
||||
|
||||
const exportTxtFileBeforeOnPress = async () => {
|
||||
setIsShareButtonTapped(true);
|
||||
dynamicQRCode.current?.stopAutoMove();
|
||||
};
|
||||
|
||||
const exportTxtFileAfterOnPress = () => {
|
||||
setIsShareButtonTapped(false);
|
||||
dynamicQRCode.current?.startAutoMove();
|
||||
};
|
||||
|
||||
const renderView = wallet ? (
|
||||
<>
|
||||
<View>
|
||||
<BlueText style={[styles.type, stylesHook.type]}>{wallet.getLabel()}</BlueText>
|
||||
</View>
|
||||
<BlueSpacing20 />
|
||||
{qrCodeContents && <DynamicQRCode value={qrCodeContents} ref={dynamicQRCode} />}
|
||||
<BlueSpacing20 />
|
||||
{isShareButtonTapped ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
label &&
|
||||
xpub && (
|
||||
<SaveFileButton
|
||||
style={[styles.exportButton, stylesHook.exportButton]}
|
||||
fileName={`${label}.txt`}
|
||||
fileContent={xpub}
|
||||
beforeOnPress={exportTxtFileBeforeOnPress}
|
||||
afterOnPress={exportTxtFileAfterOnPress}
|
||||
>
|
||||
<SquareButton title={loc.multisig.share} />
|
||||
</SaveFileButton>
|
||||
)
|
||||
)}
|
||||
|
||||
<BlueSpacing20 />
|
||||
<BlueText style={[styles.secret, stylesHook.secret]}>{wallet.getXpub()}</BlueText>
|
||||
</>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
contentContainerStyle={[styles.scrollViewContent, stylesHook.scrollViewContent]}
|
||||
centerContent={isLoading}
|
||||
automaticallyAdjustContentInsets
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
>
|
||||
{isLoading ? <ActivityIndicator /> : renderView}
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scrollViewContent: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexGrow: 1,
|
||||
},
|
||||
type: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
},
|
||||
secret: {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
},
|
||||
exportButton: {
|
||||
height: 48,
|
||||
borderRadius: 8,
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 16,
|
||||
width: '80%',
|
||||
maxWidth: 300,
|
||||
},
|
||||
});
|
||||
|
||||
export default ExportMultisigCoordinationSetup;
|
||||
@ -281,7 +281,7 @@ const WalletDetails = () => {
|
||||
navigate('ExportMultisigCoordinationSetupRoot', {
|
||||
screen: 'ExportMultisigCoordinationSetup',
|
||||
params: {
|
||||
walletId: wallet.getID(),
|
||||
walletID: wallet.getID(),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,138 +0,0 @@
|
||||
import React, { useCallback, useContext, useRef, useState } from 'react';
|
||||
import { ActivityIndicator, InteractionManager, ScrollView, StyleSheet, View } from 'react-native';
|
||||
import { useFocusEffect, useRoute } from '@react-navigation/native';
|
||||
import { BlueSpacing20, BlueText } from '../../BlueComponents';
|
||||
import navigationStyle from '../../components/navigationStyle';
|
||||
import { DynamicQRCode } from '../../components/DynamicQRCode';
|
||||
import loc from '../../loc';
|
||||
import { SquareButton } from '../../components/SquareButton';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
import { useTheme } from '../../components/themes';
|
||||
import SafeArea from '../../components/SafeArea';
|
||||
import usePrivacy from '../../hooks/usePrivacy';
|
||||
import SaveFileButton from '../../components/SaveFileButton';
|
||||
|
||||
const ExportMultisigCoordinationSetup = () => {
|
||||
const walletId = useRoute().params.walletId;
|
||||
const { wallets } = useContext(BlueStorageContext);
|
||||
const wallet = wallets.find(w => w.getID() === walletId);
|
||||
const qrCodeContents = useRef();
|
||||
const dynamicQRCode = useRef();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isShareButtonTapped, setIsShareButtonTapped] = useState(false);
|
||||
const { colors } = useTheme();
|
||||
const { enableBlur, disableBlur } = usePrivacy();
|
||||
const stylesHook = StyleSheet.create({
|
||||
loading: {
|
||||
backgroundColor: colors.elevated,
|
||||
},
|
||||
root: {
|
||||
backgroundColor: colors.elevated,
|
||||
},
|
||||
type: { color: colors.foregroundColor },
|
||||
secret: { color: colors.foregroundColor },
|
||||
exportButton: {
|
||||
backgroundColor: colors.buttonDisabledBackgroundColor,
|
||||
},
|
||||
});
|
||||
|
||||
const exportTxtFileBeforeOnPress = async () => {
|
||||
setIsShareButtonTapped(true);
|
||||
dynamicQRCode.current?.stopAutoMove();
|
||||
};
|
||||
|
||||
const exportTxtFileAfterOnPress = () => {
|
||||
setIsShareButtonTapped(false);
|
||||
dynamicQRCode.current?.startAutoMove();
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
enableBlur();
|
||||
const task = InteractionManager.runAfterInteractions(async () => {
|
||||
if (wallet) {
|
||||
qrCodeContents.current = Buffer.from(wallet.getXpub(), 'ascii').toString('hex');
|
||||
setIsLoading(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
task.cancel();
|
||||
disableBlur();
|
||||
};
|
||||
}, [disableBlur, enableBlur, wallet]),
|
||||
);
|
||||
|
||||
return isLoading ? (
|
||||
<View style={[styles.loading, stylesHook.loading]}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
) : (
|
||||
<SafeArea style={stylesHook.root}>
|
||||
<ScrollView contentContainerStyle={styles.scrollViewContent}>
|
||||
<View>
|
||||
<BlueText style={[styles.type, stylesHook.type]}>{wallet.getLabel()}</BlueText>
|
||||
</View>
|
||||
<BlueSpacing20 />
|
||||
<DynamicQRCode value={qrCodeContents.current} ref={dynamicQRCode} />
|
||||
<BlueSpacing20 />
|
||||
{isShareButtonTapped ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<SaveFileButton
|
||||
style={[styles.exportButton, stylesHook.exportButton]}
|
||||
fileName={wallet.getLabel() + '.txt'}
|
||||
fileContent={wallet.getXpub()}
|
||||
beforeOnPress={exportTxtFileBeforeOnPress}
|
||||
afterOnPress={exportTxtFileAfterOnPress}
|
||||
>
|
||||
<SquareButton title={loc.multisig.share} />
|
||||
</SaveFileButton>
|
||||
)}
|
||||
<BlueSpacing20 />
|
||||
<BlueText style={[styles.secret, stylesHook.secret]}>{wallet.getXpub()}</BlueText>
|
||||
</ScrollView>
|
||||
</SafeArea>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
loading: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scrollViewContent: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexGrow: 1,
|
||||
},
|
||||
type: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
},
|
||||
secret: {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
},
|
||||
exportButton: {
|
||||
height: 48,
|
||||
borderRadius: 8,
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 16,
|
||||
width: '80%',
|
||||
maxWidth: 300,
|
||||
},
|
||||
});
|
||||
|
||||
ExportMultisigCoordinationSetup.navigationOptions = navigationStyle(
|
||||
{
|
||||
closeButton: true,
|
||||
headerBackVisible: false,
|
||||
statusBarStyle: 'light',
|
||||
},
|
||||
opts => ({ ...opts, title: loc.multisig.export_coordination_setup }),
|
||||
);
|
||||
|
||||
export default ExportMultisigCoordinationSetup;
|
||||
Loading…
Reference in New Issue
Block a user