deep-stack/laconic-wallet
3
0
Fork 0
forked from cerc-io/laconic-wallet
Code Pull Requests Activity

Use separate page for walletconnect (#48)

Browse Source 
* Add function to disconnect session

* Replace QR icon with WC logo

* Use separate page for walletconnect

* Change screen title

* Make review changes

* Make walletconnect page empty

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>
This commit is contained in:
Adwait Gharpure 2024-03-11 16:14:08 +05:30 committed by GitHub
parent c6128f222c
commit 7f1b2e38ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 168 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
App.tsx
View File

@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Snackbar } from 'react-native-paper'; import { Button, Snackbar } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { SignClientTypes } from '@walletconnect/types'; import { SignClientTypes } from '@walletconnect/types';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
@ -13,6 +14,7 @@ import HomeScreen from './components/HomeScreen';
import SignRequest from './components/SignRequest'; import SignRequest from './components/SignRequest';
import InvalidPath from './components/InvalidPath'; import InvalidPath from './components/InvalidPath';
import PairingModal from './components/PairingModal'; import PairingModal from './components/PairingModal';
import AddSession from './components/AddSession';
import WalletConnect from './components/WalletConnect'; import WalletConnect from './components/WalletConnect';
import { StackParamsList } from './types'; import { StackParamsList } from './types';
import useInitialization, { import useInitialization, {
@ -32,7 +34,6 @@ const App = (): React.JSX.Element => {
useNavigation<NativeStackNavigationProp<StackParamsList>>(); useNavigation<NativeStackNavigationProp<StackParamsList>>();
const { accounts } = useAccounts(); const { accounts } = useAccounts();
const { requestSession, setRequestSession } = useRequests(); const { requestSession, setRequestSession } = useRequests();
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
@ -132,7 +133,23 @@ const App = (): React.JSX.Element => {
name="WalletConnect" name="WalletConnect"
component={WalletConnect} component={WalletConnect}
options={{ options={{
title: 'Connect Wallet', title: 'WalletConnect Sessions',
headerRight: () => (
<Button
onPress={() => {
navigation.navigate('AddSession');
}}>
{<Icon name={'qrcode-scan'} size={20} />}
</Button>
),
}}
/>
<Stack.Screen
name="AddSession"
component={AddSession}
options={{
title: 'New session',
}} }}
/> />
</Stack.Navigator> </Stack.Navigator>

BIN
assets/WalletConnect-Icon-Blueberry.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

118
components/AddSession.tsx Normal file
View File

@ -0,0 +1,118 @@
import React, { useEffect, useState } from 'react';
import { AppState, View } from 'react-native';
import { Button, Text, TextInput } from 'react-native-paper';
import {
Camera,
useCameraDevice,
useCameraPermission,
useCodeScanner,
} from 'react-native-vision-camera';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { web3WalletPair } from '../utils/wallet-connect/WalletConnectUtils';
import styles from '../styles/stylesheet';
import { StackParamsList } from '../types';
const AddSession = () => {
const navigation =
useNavigation<NativeStackNavigationProp<StackParamsList>>();
const { hasPermission, requestPermission } = useCameraPermission();
const device = useCameraDevice('back');
const [currentWCURI, setCurrentWCURI] = useState<string>('');
const [isActive, setIsActive] = useState(AppState.currentState === 'active');
const [isScanning, setScanning] = useState(true);
const codeScanner = useCodeScanner({
codeTypes: ['qr'],
onCodeScanned: codes => {
if (isScanning) {
codes.forEach(code => {
if (code.value) {
setCurrentWCURI(code.value);
setScanning(false);
}
});
}
},
});
const pair = async () => {
const pairing = await web3WalletPair({ uri: currentWCURI });
navigation.navigate('WalletConnect');
return pairing;
};
// const disconnect = async () => {
// const activeSessions = await web3wallet.getActiveSessions();
// const topic = Object.values(activeSessions)[0].topic;
// if (activeSessions) {
// await web3wallet.disconnectSession({
// topic,
// reason: getSdkError('USER_DISCONNECTED'),
// });
// navigation.navigate('Laconic');
// return;
// }
// };
useEffect(() => {
const handleAppStateChange = (newState: string) => {
setIsActive(newState === 'active');
};
AppState.addEventListener('change', handleAppStateChange);
if (!hasPermission) {
requestPermission();
}
}, [hasPermission, isActive, requestPermission]);
return (
<View style={styles.appContainer}>
{!hasPermission || !device ? (
<Text>
{!hasPermission
? 'No Camera Permission granted'
: 'No Camera Selected'}
</Text>
) : (
<>
<View style={styles.cameraContainer}>
{isActive ? (
<Camera
style={styles.camera}
device={device}
isActive={isActive}
codeScanner={codeScanner}
video={false}
/>
) : (
<Text>No Camera Selected!</Text>
)}
</View>
<View style={styles.inputContainer}>
<Text variant="titleMedium">Enter WalletConnect URI</Text>
<TextInput
mode="outlined"
onChangeText={setCurrentWCURI}
value={currentWCURI}
numberOfLines={4}
multiline={true}
style={{ padding: 10 }}
/>
<View style={styles.signButton}>
<Button mode="contained" onPress={pair}>
Pair Session
</Button>
</View>
</View>
</>
)}
</View>
);
};
export default AddSession;

25
components/HomeScreen.tsx
View File

@ -1,7 +1,11 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native'; import {
View,
ActivityIndicator,
TouchableHighlight,
Image,
} from 'react-native';
import { Button, Text } from 'react-native-paper'; import { Button, Text } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
@ -16,19 +20,28 @@ import styles from '../styles/stylesheet';
import { useAccounts } from '../context/AccountsContext'; import { useAccounts } from '../context/AccountsContext';
import { StackParamsList } from '../types'; import { StackParamsList } from '../types';
const WCLogo = () => {
return (
<Image
style={{ width: 32, height: 20, margin: 0 }}
source={require('../assets/WalletConnect-Icon-Blueberry.png')}
/>
);
};
const HomeScreen = () => { const HomeScreen = () => {
const { accounts, setAccounts } = useAccounts(); const { accounts, setAccounts } = useAccounts();
const navigation = const navigation =
useNavigation<NativeStackNavigationProp<StackParamsList>>(); useNavigation<NativeStackNavigationProp<StackParamsList>>();
useEffect(() => { useEffect(() => {
if (accounts.ethAccounts.length > 0) { if (accounts.ethAccounts.length > 0) {
navigation.setOptions({ navigation.setOptions({
headerRight: () => ( headerRight: () => (
<Button onPress={() => navigation.navigate('WalletConnect')}> <TouchableHighlight
{<Icon name={'qrcode-scan'} size={20} />} onPress={() => navigation.navigate('WalletConnect')}>
</Button> {<WCLogo />}
</TouchableHighlight>
), ),
}); });
} else { } else {

111
components/WalletConnect.tsx
View File

@ -1,107 +1,6 @@
import React, { useEffect, useState } from 'react'; import React from 'react';
import { AppState, View } from 'react-native'; import { View, Text } from 'react-native';
import { Button, Text, TextInput } from 'react-native-paper';
import {
Camera,
useCameraDevice,
useCameraPermission,
useCodeScanner,
} from 'react-native-vision-camera';
import { useNavigation } from '@react-navigation/native'; export default function WalletConnect() {
import { NativeStackNavigationProp } from '@react-navigation/native-stack'; return <View />;
}
import { web3WalletPair } from '../utils/wallet-connect/WalletConnectUtils';
import styles from '../styles/stylesheet';
import { StackParamsList } from '../types';
const WalletConnect = () => {
const navigation =
useNavigation<NativeStackNavigationProp<StackParamsList>>();
const { hasPermission, requestPermission } = useCameraPermission();
const device = useCameraDevice('back');
const [currentWCURI, setCurrentWCURI] = useState<string>('');
const [isActive, setIsActive] = useState(AppState.currentState === 'active');
const [isScanning, setScanning] = useState(true);
const codeScanner = useCodeScanner({
codeTypes: ['qr'],
onCodeScanned: codes => {
if (isScanning) {
codes.forEach(code => {
if (code.value) {
setCurrentWCURI(code.value);
setScanning(false);
}
});
}
},
});
const pair = async () => {
const pairing = await web3WalletPair({ uri: currentWCURI });
navigation.navigate('Laconic');
return pairing;
};
useEffect(() => {
const handleAppStateChange = (newState: string) => {
setIsActive(newState === 'active');
};
AppState.addEventListener('change', handleAppStateChange);
if (!hasPermission) {
requestPermission();
}
}, [hasPermission, isActive, requestPermission]);
return (
<View style={styles.appContainer}>
{!hasPermission || !device ? (
<Text>
{!hasPermission
? 'No Camera Permission granted'
: 'No Camera Selected'}
</Text>
) : (
<>
<View style={styles.cameraContainer}>
{isActive ? (
<Camera
style={styles.camera}
device={device}
isActive={isActive}
codeScanner={codeScanner}
video={false}
/>
) : (
<Text>No Camera Selected!</Text>
)}
</View>
<View style={styles.inputContainer}>
<Text variant="titleMedium">Enter WalletConnect URI</Text>
<TextInput
mode="outlined"
onChangeText={setCurrentWCURI}
value={currentWCURI}
numberOfLines={4}
multiline={true}
style={{ padding: 10 }}
/>
<View style={styles.signButton}>
<Button mode="contained" onPress={pair}>
Pair Session
</Button>
</View>
</View>
</>
)}
</View>
);
};
export default WalletConnect;

9
context/RequestContext.tsx
View File

@ -1,10 +1,11 @@
import React, { createContext, useContext, useState } from 'react'; import React, { createContext, useContext, useState } from 'react';
const RequestContext = createContext<{ interface RequestContextProps {
// TODO: Remove any type
requestSession: any; requestSession: any;
setRequestSession: (requestSession: any) => void; setRequestSession: (requestSession: any) => void;
}>({ }
const RequestContext = createContext<RequestContextProps>({
requestSession: {}, requestSession: {},
setRequestSession: () => {}, setRequestSession: () => {},
}); });
@ -14,7 +15,7 @@ const useRequests = () => {
return requestContext; return requestContext;
}; };
const RequestProvider = ({ children }: { children: any }) => { const RequestProvider = ({ children }: { children: React.ReactNode }) => {
const [requestSession, setRequestSession] = useState<any>({}); const [requestSession, setRequestSession] = useState<any>({});
return ( return (
<RequestContext.Provider <RequestContext.Provider

1
types.ts
View File

@ -15,6 +15,7 @@ export type StackParamsList = {
| undefined; | undefined;
InvalidPath: undefined; InvalidPath: undefined;
WalletConnect: undefined; WalletConnect: undefined;
AddSession: undefined;
}; };
export type Account = { export type Account = {