style: add back wallet connect button and style add session
This commit is contained in:
parent
44e6670aab
commit
360f3b76bc
10
src/App.tsx
10
src/App.tsx
@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Button, Snackbar, Surface, Text } from "react-native-paper";
|
||||
import { TxBody, AuthInfo } from "cosmjs-types/cosmos/tx/v1beta1/tx";
|
||||
|
||||
@ -217,8 +217,10 @@ const App = (): React.JSX.Element => {
|
||||
};
|
||||
});
|
||||
|
||||
const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
|
||||
|
||||
return (
|
||||
<Surface id="surfface" style={styles.appSurface}>
|
||||
<Surface style={styles.appSurface}>
|
||||
<Stack.Navigator
|
||||
screenOptions={{
|
||||
headerBackTitleVisible: true,
|
||||
@ -229,7 +231,9 @@ const App = (): React.JSX.Element => {
|
||||
component={HomeScreen}
|
||||
options={{
|
||||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
header: () => <Header title="Wallet" />,
|
||||
header: () => (
|
||||
<Header title="Wallet" showWalletConnect={showWalletConnect} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
|
||||
@ -8,10 +8,24 @@ import {
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { Image } from "react-native";
|
||||
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||||
import { StackParamsList } from "../types";
|
||||
import styles from "../styles/stylesheet";
|
||||
|
||||
export const Header: React.FC<{ title: string }> = ({ title }) => {
|
||||
const WCLogo = () => {
|
||||
return (
|
||||
<Image
|
||||
style={styles.walletConnectLogo}
|
||||
source={require("../assets/WalletConnect-Icon-Blueberry.png")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Header: React.FC<{
|
||||
title: string;
|
||||
showWalletConnect?: boolean;
|
||||
}> = ({ title, showWalletConnect }) => {
|
||||
const navigation =
|
||||
useNavigation<NativeStackNavigationProp<StackParamsList>>();
|
||||
return (
|
||||
@ -22,67 +36,78 @@ export const Header: React.FC<{ title: string }> = ({ title }) => {
|
||||
pl: 2,
|
||||
alignItems: "center",
|
||||
py: 1,
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
spacing={1}
|
||||
>
|
||||
<Button
|
||||
component={Link}
|
||||
onClick={() => {
|
||||
navigation.navigate("Home");
|
||||
}}
|
||||
>
|
||||
<SvgIcon sx={{ height: 20, width: 100 }}>
|
||||
<svg
|
||||
width="115"
|
||||
height="20"
|
||||
viewBox="0 0 115 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.37388 10.5194C5.70149 8.19185 7.14225 4.97748 7.1416 1.42853C7.14246 0.94681 7.11586 0.470456 7.063 0L-0.000488281 0.000643078L-0.000273922 13.5723C-0.000917354 15.2174 0.62632 16.863 1.88091 18.1175C3.1356 19.3721 4.78235 20.0001 6.42772 19.9993L6.42729 19.9997L19.9995 20L19.999 12.9355C19.5296 12.8838 19.0532 12.857 18.5704 12.8569C15.0224 12.8574 11.8079 14.298 9.48026 16.6255C7.78654 18.2768 5.07093 18.2771 3.39812 16.6043C1.72638 14.9325 1.72562 12.2161 3.37388 10.5194ZM18.5344 1.46863C16.5837 -0.481929 13.4146 -0.48268 11.4633 1.46863C9.512 3.41984 9.51276 6.58895 11.4633 8.53941C13.415 10.491 16.5831 10.4907 18.5344 8.53941C20.4857 6.5882 20.4861 3.42016 18.5344 1.46863Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M31.4741 18.5838H39.2552V16.3302H34.075V1.41351H31.4741V18.5838Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M49.8108 1.41351H45.4976L40.9893 18.5838H43.6769L44.8039 14.2913H50.3744L51.5014 18.5838H54.3191L49.8108 1.41351ZM45.3458 12.145L47.6 3.2593H47.6866L49.8541 12.145H45.3458Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M62.9292 8.06885H65.9636C65.9636 3.17534 64.3813 1.07196 60.6967 1.07196C56.8169 1.07196 55.1479 3.73341 55.1479 9.97909C55.1479 16.2462 56.8169 18.9291 60.6967 18.9291C64.3813 18.9291 65.9636 16.8901 65.9853 12.1468H62.9508C62.9292 15.8599 62.474 16.7828 60.6967 16.7828C58.6593 16.7828 58.1607 15.4307 58.1824 9.97909C58.1824 4.54896 58.6809 3.19678 60.6967 3.21823C62.474 3.21823 62.9292 4.18413 62.9292 8.06885Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M73.7781 1.07209C77.7229 1.09364 79.4135 3.77643 79.4135 10.0007C79.4135 16.2249 77.7229 18.9078 73.7781 18.9292C69.8117 18.9507 68.1211 16.2678 68.1211 10.0007C68.1211 3.73354 69.8117 1.05064 73.7781 1.07209ZM71.1555 10.0007C71.1555 15.4308 71.6757 16.783 73.7781 16.783C75.8589 16.783 76.3791 15.4308 76.3791 10.0007C76.3791 4.54909 75.8589 3.19691 73.7781 3.21847C71.6757 3.23992 71.1555 4.59209 71.1555 10.0007Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M85.0819 18.5624L82.481 18.5838V1.41351H87.0544L91.3243 15.4073H91.3676V1.41351H93.968V18.5838H89.677L85.1254 3.51689H85.0819V18.5624Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M100.468 1.41351H97.8677V18.5838H100.468V1.41351Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M111.139 8.06885H114.174C114.174 3.17534 112.591 1.07196 108.906 1.07196C105.028 1.07196 103.358 3.73341 103.358 9.97909C103.358 16.2462 105.028 18.9291 108.906 18.9291C112.591 18.9291 114.174 16.8901 114.195 12.1468H111.161C111.139 15.8599 110.684 16.7828 108.906 16.7828C106.869 16.7828 106.371 15.4307 106.393 9.97909C106.393 4.54896 106.891 3.19678 108.906 3.21823C110.684 3.21823 111.139 4.18413 111.139 8.06885Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
</Button>
|
||||
<Divider
|
||||
flexItem
|
||||
orientation="vertical"
|
||||
color="#FBFBFB"
|
||||
sx={{ height: "75%", alignSelf: "center" }}
|
||||
/>
|
||||
<Typography fontSize="1.25rem" sx={{ paddingLeft: 1}}>{title}</Typography>
|
||||
<Stack direction="row">
|
||||
<Button
|
||||
component={Link}
|
||||
onClick={() => {
|
||||
navigation.navigate("Home");
|
||||
}}
|
||||
>
|
||||
<SvgIcon sx={{ height: 20, width: 100 }}>
|
||||
<svg
|
||||
width="115"
|
||||
height="20"
|
||||
viewBox="0 0 115 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.37388 10.5194C5.70149 8.19185 7.14225 4.97748 7.1416 1.42853C7.14246 0.94681 7.11586 0.470456 7.063 0L-0.000488281 0.000643078L-0.000273922 13.5723C-0.000917354 15.2174 0.62632 16.863 1.88091 18.1175C3.1356 19.3721 4.78235 20.0001 6.42772 19.9993L6.42729 19.9997L19.9995 20L19.999 12.9355C19.5296 12.8838 19.0532 12.857 18.5704 12.8569C15.0224 12.8574 11.8079 14.298 9.48026 16.6255C7.78654 18.2768 5.07093 18.2771 3.39812 16.6043C1.72638 14.9325 1.72562 12.2161 3.37388 10.5194ZM18.5344 1.46863C16.5837 -0.481929 13.4146 -0.48268 11.4633 1.46863C9.512 3.41984 9.51276 6.58895 11.4633 8.53941C13.415 10.491 16.5831 10.4907 18.5344 8.53941C20.4857 6.5882 20.4861 3.42016 18.5344 1.46863Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M31.4741 18.5838H39.2552V16.3302H34.075V1.41351H31.4741V18.5838Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M49.8108 1.41351H45.4976L40.9893 18.5838H43.6769L44.8039 14.2913H50.3744L51.5014 18.5838H54.3191L49.8108 1.41351ZM45.3458 12.145L47.6 3.2593H47.6866L49.8541 12.145H45.3458Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M62.9292 8.06885H65.9636C65.9636 3.17534 64.3813 1.07196 60.6967 1.07196C56.8169 1.07196 55.1479 3.73341 55.1479 9.97909C55.1479 16.2462 56.8169 18.9291 60.6967 18.9291C64.3813 18.9291 65.9636 16.8901 65.9853 12.1468H62.9508C62.9292 15.8599 62.474 16.7828 60.6967 16.7828C58.6593 16.7828 58.1607 15.4307 58.1824 9.97909C58.1824 4.54896 58.6809 3.19678 60.6967 3.21823C62.474 3.21823 62.9292 4.18413 62.9292 8.06885Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M73.7781 1.07209C77.7229 1.09364 79.4135 3.77643 79.4135 10.0007C79.4135 16.2249 77.7229 18.9078 73.7781 18.9292C69.8117 18.9507 68.1211 16.2678 68.1211 10.0007C68.1211 3.73354 69.8117 1.05064 73.7781 1.07209ZM71.1555 10.0007C71.1555 15.4308 71.6757 16.783 73.7781 16.783C75.8589 16.783 76.3791 15.4308 76.3791 10.0007C76.3791 4.54909 75.8589 3.19691 73.7781 3.21847C71.6757 3.23992 71.1555 4.59209 71.1555 10.0007Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M85.0819 18.5624L82.481 18.5838V1.41351H87.0544L91.3243 15.4073H91.3676V1.41351H93.968V18.5838H89.677L85.1254 3.51689H85.0819V18.5624Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M100.468 1.41351H97.8677V18.5838H100.468V1.41351Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
<path
|
||||
d="M111.139 8.06885H114.174C114.174 3.17534 112.591 1.07196 108.906 1.07196C105.028 1.07196 103.358 3.73341 103.358 9.97909C103.358 16.2462 105.028 18.9291 108.906 18.9291C112.591 18.9291 114.174 16.8901 114.195 12.1468H111.161C111.139 15.8599 110.684 16.7828 108.906 16.7828C106.869 16.7828 106.371 15.4307 106.393 9.97909C106.393 4.54896 106.891 3.19678 108.906 3.21823C110.684 3.21823 111.139 4.18413 111.139 8.06885Z"
|
||||
fill="#FBFBFB"
|
||||
/>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
</Button>
|
||||
<Divider
|
||||
flexItem
|
||||
orientation="vertical"
|
||||
color="#FBFBFB"
|
||||
sx={{ height: "20px", width: "1px", alignSelf: "center" }}
|
||||
/>
|
||||
<Typography fontSize="1.25rem" sx={{ paddingLeft: 1 }}>
|
||||
{title}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{showWalletConnect && (
|
||||
<Button onClick={() => navigation.navigate("WalletConnect")}>
|
||||
{<WCLogo />}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { Button, Text, TextInput } from 'react-native-paper';
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { View } from "react-native";
|
||||
import { Text, TextInput } from "react-native-paper";
|
||||
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||||
import { Box, Button } from "@mui/material";
|
||||
|
||||
import { web3WalletPair } from '../utils/wallet-connect/WalletConnectUtils';
|
||||
import styles from '../styles/stylesheet';
|
||||
import { StackParamsList } from '../types';
|
||||
import { useWalletConnect } from '../context/WalletConnectContext';
|
||||
import { web3WalletPair } from "../utils/wallet-connect/WalletConnectUtils";
|
||||
import styles from "../styles/stylesheet";
|
||||
import { StackParamsList } from "../types";
|
||||
import { useWalletConnect } from "../context/WalletConnectContext";
|
||||
import { Layout } from "../components/Layout";
|
||||
|
||||
const AddSession = () => {
|
||||
const navigation =
|
||||
useNavigation<NativeStackNavigationProp<StackParamsList>>();
|
||||
|
||||
const [currentWCURI, setCurrentWCURI] = useState<string>('');
|
||||
const [currentWCURI, setCurrentWCURI] = useState<string>("");
|
||||
|
||||
const {web3wallet} = useWalletConnect();
|
||||
const { web3wallet } = useWalletConnect();
|
||||
|
||||
const pair = useCallback(async () => {
|
||||
if (!web3wallet) {
|
||||
@ -24,12 +26,12 @@ const AddSession = () => {
|
||||
}
|
||||
|
||||
const pairing = await web3WalletPair(web3wallet, { uri: currentWCURI });
|
||||
navigation.navigate('WalletConnect');
|
||||
navigation.navigate("WalletConnect");
|
||||
return pairing;
|
||||
}, [currentWCURI, navigation, web3wallet]);
|
||||
|
||||
return (
|
||||
<View style={styles.appContainer}>
|
||||
<Layout title="Add Session">
|
||||
<View style={styles.inputContainer}>
|
||||
<Text variant="titleMedium">Enter WalletConnect URI</Text>
|
||||
<TextInput
|
||||
@ -41,13 +43,13 @@ const AddSession = () => {
|
||||
style={styles.walletConnectUriText}
|
||||
/>
|
||||
|
||||
<View style={styles.signButton}>
|
||||
<Button mode="contained" onPress={pair}>
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button variant="contained" onClick={pair}>
|
||||
Pair Session
|
||||
</Button>
|
||||
</View>
|
||||
</Box>
|
||||
</View>
|
||||
</View>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default AddSession;
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { View, ActivityIndicator, Image } from "react-native";
|
||||
import { View, ActivityIndicator } from "react-native";
|
||||
import { Text } from "react-native-paper";
|
||||
import { Button, Divider, Portal, Snackbar } from "@mui/material";
|
||||
|
||||
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { getSdkError } from "@walletconnect/utils";
|
||||
|
||||
import { createWallet, resetWallet, retrieveAccounts } from "../utils/accounts";
|
||||
@ -15,47 +13,19 @@ import ConfirmDialog from "../components/ConfirmDialog";
|
||||
import styles from "../styles/stylesheet";
|
||||
import { useAccounts } from "../context/AccountsContext";
|
||||
import { useWalletConnect } from "../context/WalletConnectContext";
|
||||
import { NetworksDataState, StackParamsList } from "../types";
|
||||
import { NetworksDataState } from "../types";
|
||||
import { useNetworks } from "../context/NetworksContext";
|
||||
import ImportWalletDialog from "../components/ImportWalletDialog";
|
||||
import { MnemonicDialog } from "../components/MnemonicDialog";
|
||||
import { Container } from "../components/Container";
|
||||
|
||||
const WCLogo = () => {
|
||||
return (
|
||||
<Image
|
||||
style={styles.walletConnectLogo}
|
||||
source={require("../assets/WalletConnect-Icon-Blueberry.png")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const HomeScreen = () => {
|
||||
const { accounts, setAccounts, setCurrentIndex } = useAccounts();
|
||||
const { setAccounts, setCurrentIndex } = useAccounts();
|
||||
|
||||
const { networksData, selectedNetwork, setSelectedNetwork, setNetworksData } =
|
||||
useNetworks();
|
||||
const { setActiveSessions, web3wallet } = useWalletConnect();
|
||||
|
||||
const navigation =
|
||||
useNavigation<NativeStackNavigationProp<StackParamsList>>();
|
||||
useEffect(() => {
|
||||
if (accounts.length > 0) {
|
||||
navigation.setOptions({
|
||||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
headerRight: () => (
|
||||
<Button onClick={() => navigation.navigate("WalletConnect")}>
|
||||
{<WCLogo />}
|
||||
</Button>
|
||||
),
|
||||
});
|
||||
} else {
|
||||
navigation.setOptions({
|
||||
headerRight: undefined,
|
||||
});
|
||||
}
|
||||
}, [navigation, accounts]);
|
||||
|
||||
const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
|
||||
const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
|
||||
const [importWalletDialog, setImportWalletDialog] = useState<boolean>(false);
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Image, TouchableOpacity, View } from 'react-native';
|
||||
import { List, Text } from 'react-native-paper';
|
||||
import React, { useEffect } from "react";
|
||||
import { Image, TouchableOpacity, View } from "react-native";
|
||||
import { List, Text } from "react-native-paper";
|
||||
|
||||
import { getSdkError } from '@walletconnect/utils';
|
||||
import { getSdkError } from "@walletconnect/utils";
|
||||
|
||||
import { useWalletConnect } from '../context/WalletConnectContext';
|
||||
import styles from '../styles/stylesheet';
|
||||
import { useWalletConnect } from "../context/WalletConnectContext";
|
||||
import styles from "../styles/stylesheet";
|
||||
import { Layout } from "../components/Layout";
|
||||
|
||||
export default function WalletConnect() {
|
||||
const { web3wallet, activeSessions, setActiveSessions } = useWalletConnect();
|
||||
@ -13,7 +14,7 @@ export default function WalletConnect() {
|
||||
const disconnect = async (sessionId: string) => {
|
||||
await web3wallet!.disconnectSession({
|
||||
topic: sessionId,
|
||||
reason: getSdkError('USER_DISCONNECTED'),
|
||||
reason: getSdkError("USER_DISCONNECTED"),
|
||||
});
|
||||
const sessions = web3wallet?.getActiveSessions() || {};
|
||||
setActiveSessions(sessions);
|
||||
@ -26,12 +27,10 @@ export default function WalletConnect() {
|
||||
}, [web3wallet, setActiveSessions]);
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Layout title="Active Sessions">
|
||||
{Object.keys(activeSessions).length > 0 ? (
|
||||
<>
|
||||
<View style={styles.sessionsContainer}>
|
||||
<Text variant="titleMedium">Active Sessions</Text>
|
||||
</View>
|
||||
<View style={styles.sessionsContainer} />
|
||||
<List.Section>
|
||||
{Object.entries(activeSessions).map(([sessionId, session]) => (
|
||||
<List.Item
|
||||
@ -44,7 +43,7 @@ export default function WalletConnect() {
|
||||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
left={() => (
|
||||
<>
|
||||
{session.peer.metadata.icons[0].endsWith('.svg') ? (
|
||||
{session.peer.metadata.icons[0].endsWith(".svg") ? (
|
||||
<View style={styles.dappLogo}>
|
||||
<Text>SvgURI peerMetaDataIcon</Text>
|
||||
</View>
|
||||
@ -60,7 +59,8 @@ export default function WalletConnect() {
|
||||
right={() => (
|
||||
<TouchableOpacity
|
||||
onPress={() => disconnect(sessionId)}
|
||||
style={styles.disconnectSession}>
|
||||
style={styles.disconnectSession}
|
||||
>
|
||||
<List.Icon icon="close" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
@ -73,6 +73,6 @@ export default function WalletConnect() {
|
||||
<Text>You have no active sessions</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user