From e0632d1a50a157d2e348f37d06918658cde7e112 Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Fri, 9 Aug 2024 00:59:27 -0400 Subject: [PATCH] style: initial dark mode --- public/index.html | 121 ++++++++++++++++---------------- public/manifest.json | 2 +- src/App.tsx | 145 +++++++++++++++++++++------------------ src/index.tsx | 102 +++++++++++++++++---------- src/styles/stylesheet.js | 6 +- 5 files changed, 213 insertions(+), 163 deletions(-) diff --git a/public/index.html b/public/index.html index 1e28cec..2a0b70a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,19 @@ - + - - - - - - - - - - - Laconic Wallet - - - - -
-
-
-
+ } + + + + + +
+
+
- - + + diff --git a/public/manifest.json b/public/manifest.json index a88b288..f3556e5 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -21,5 +21,5 @@ "start_url": ".", "display": "standalone", "theme_color": "#000000", - "background_color": "#ffffff" + "background_color": "#0f0f0f" } diff --git a/src/App.tsx b/src/App.tsx index fb1a4ae..9716b8d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,43 +1,43 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { Button, Snackbar, Text } from 'react-native-paper'; -import { TxBody, AuthInfo } from 'cosmjs-types/cosmos/tx/v1beta1/tx'; +import React, { useCallback, useEffect, useState } from "react"; +import { Button, Snackbar, Surface, Text } from "react-native-paper"; +import { TxBody, AuthInfo } from "cosmjs-types/cosmos/tx/v1beta1/tx"; -import { SignClientTypes } from '@walletconnect/types'; -import { useNavigation } from '@react-navigation/native'; +import { SignClientTypes } from "@walletconnect/types"; +import { useNavigation } from "@react-navigation/native"; import { createStackNavigator, StackNavigationProp, -} from '@react-navigation/stack'; -import { getSdkError } from '@walletconnect/utils'; -import { Web3WalletTypes } from '@walletconnect/web3wallet'; -import { formatJsonRpcResult } from '@json-rpc-tools/utils'; +} from "@react-navigation/stack"; +import { getSdkError } from "@walletconnect/utils"; +import { Web3WalletTypes } from "@walletconnect/web3wallet"; +import { formatJsonRpcResult } from "@json-rpc-tools/utils"; -import PairingModal from './components/PairingModal'; -import { useWalletConnect } from './context/WalletConnectContext'; -import { useAccounts } from './context/AccountsContext'; -import InvalidPath from './screens/InvalidPath'; -import SignMessage from './screens/SignMessage'; -import HomeScreen from './screens/HomeScreen'; -import SignRequest from './screens/SignRequest'; -import AddSession from './screens/AddSession'; -import WalletConnect from './screens/WalletConnect'; -import ApproveTransaction from './screens/ApproveTransaction'; -import { StackParamsList } from './types'; -import { EIP155_SIGNING_METHODS } from './utils/wallet-connect/EIP155Data'; -import { getSignParamsMessage } from './utils/wallet-connect/helpers'; -import ApproveTransfer from './screens/ApproveTransfer'; -import AddNetwork from './screens/AddNetwork'; -import EditNetwork from './screens/EditNetwork'; -import { COSMOS, EIP155 } from './utils/constants'; -import { useNetworks } from './context/NetworksContext'; -import { NETWORK_METHODS } from './utils/wallet-connect/common-data'; -import { COSMOS_METHODS } from './utils/wallet-connect/COSMOSData'; +import PairingModal from "./components/PairingModal"; +import { useWalletConnect } from "./context/WalletConnectContext"; +import { useAccounts } from "./context/AccountsContext"; +import InvalidPath from "./screens/InvalidPath"; +import SignMessage from "./screens/SignMessage"; +import HomeScreen from "./screens/HomeScreen"; +import SignRequest from "./screens/SignRequest"; +import AddSession from "./screens/AddSession"; +import WalletConnect from "./screens/WalletConnect"; +import ApproveTransaction from "./screens/ApproveTransaction"; +import { StackParamsList } from "./types"; +import { EIP155_SIGNING_METHODS } from "./utils/wallet-connect/EIP155Data"; +import { getSignParamsMessage } from "./utils/wallet-connect/helpers"; +import ApproveTransfer from "./screens/ApproveTransfer"; +import AddNetwork from "./screens/AddNetwork"; +import EditNetwork from "./screens/EditNetwork"; +import { COSMOS, EIP155 } from "./utils/constants"; +import { useNetworks } from "./context/NetworksContext"; +import { NETWORK_METHODS } from "./utils/wallet-connect/common-data"; +import { COSMOS_METHODS } from "./utils/wallet-connect/COSMOSData"; +import styles from "./styles/stylesheet"; const Stack = createStackNavigator(); const App = (): React.JSX.Element => { - const navigation = - useNavigation>(); + const navigation = useNavigation>(); const { web3wallet, setActiveSessions } = useWalletConnect(); const { accounts, setCurrentIndex } = useAccounts(); @@ -45,16 +45,16 @@ const App = (): React.JSX.Element => { const [modalVisible, setModalVisible] = useState(false); const [toastVisible, setToastVisible] = useState(false); const [currentProposal, setCurrentProposal] = useState< - SignClientTypes.EventArguments['session_proposal'] | undefined + SignClientTypes.EventArguments["session_proposal"] | undefined >(); const onSessionProposal = useCallback( - async (proposal: SignClientTypes.EventArguments['session_proposal']) => { + async (proposal: SignClientTypes.EventArguments["session_proposal"]) => { if (!accounts.length || !accounts.length) { const { id } = proposal; await web3wallet!.rejectSession({ id, - reason: getSdkError('UNSUPPORTED_ACCOUNTS'), + reason: getSdkError("UNSUPPORTED_ACCOUNTS"), }); return; } @@ -74,10 +74,11 @@ const App = (): React.JSX.Element => { switch (request.method) { case NETWORK_METHODS.GET_NETWORKS: const currentNetworkId = networksData.find( - networkData => networkData.networkId === selectedNetwork!.networkId, + (networkData) => + networkData.networkId === selectedNetwork!.networkId, )?.networkId; - const networkNamesData = networksData.map(networkData => { + const networkNamesData = networksData.map((networkData) => { return { id: networkData.networkId, name: networkData.networkName, @@ -98,13 +99,13 @@ const App = (): React.JSX.Element => { case NETWORK_METHODS.CHANGE_NETWORK: const networkNameData = request.params[0]; const network = networksData.find( - networkData => networkData.networkId === networkNameData.id, + (networkData) => networkData.networkId === networkNameData.id, ); setCurrentIndex(0); setSelectedNetwork(network); const response = formatJsonRpcResult(id, { - response: 'true', + response: "true", }); await web3wallet!.respondSessionRequest({ @@ -114,7 +115,7 @@ const App = (): React.JSX.Element => { break; case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION: - navigation.navigate('ApproveTransfer', { + navigation.navigate("ApproveTransfer", { transaction: request.params[0], requestEvent, requestSessionData, @@ -122,7 +123,7 @@ const App = (): React.JSX.Element => { break; case EIP155_SIGNING_METHODS.PERSONAL_SIGN: - navigation.navigate('SignRequest', { + navigation.navigate("SignRequest", { namespace: EIP155, address: request.params[1], message: getSignParamsMessage(request.params), @@ -136,19 +137,19 @@ const App = (): React.JSX.Element => { txbody: TxBody.toJSON( TxBody.decode( Uint8Array.from( - Buffer.from(request.params.signDoc.bodyBytes, 'hex'), + Buffer.from(request.params.signDoc.bodyBytes, "hex"), ), ), ), authInfo: AuthInfo.toJSON( AuthInfo.decode( Uint8Array.from( - Buffer.from(request.params.signDoc.authInfoBytes, 'hex'), + Buffer.from(request.params.signDoc.authInfoBytes, "hex"), ), ), ), }; - navigation.navigate('SignRequest', { + navigation.navigate("SignRequest", { namespace: COSMOS, address: request.params.signerAddress, message: JSON.stringify(message, undefined, 2), @@ -158,7 +159,7 @@ const App = (): React.JSX.Element => { break; case COSMOS_METHODS.COSMOS_SIGN_AMINO: - navigation.navigate('SignRequest', { + navigation.navigate("SignRequest", { namespace: COSMOS, address: request.params.signerAddress, message: request.params.signDoc.memo, @@ -168,7 +169,7 @@ const App = (): React.JSX.Element => { break; case COSMOS_METHODS.COSMOS_SEND_TOKENS: - navigation.navigate('ApproveTransfer', { + navigation.navigate("ApproveTransfer", { transaction: request.params[0], requestEvent, requestSessionData, @@ -177,7 +178,7 @@ const App = (): React.JSX.Element => { case COSMOS_METHODS.COSMOS_SEND_TRANSACTION: const { transactionMessage, signer } = request.params; - navigation.navigate('ApproveTransaction', { + navigation.navigate("ApproveTransaction", { transactionMessage, signer, requestEvent, @@ -186,7 +187,7 @@ const App = (): React.JSX.Element => { break; default: - throw new Error('Invalid method'); + throw new Error("Invalid method"); } }, [ @@ -195,7 +196,7 @@ const App = (): React.JSX.Element => { setSelectedNetwork, setCurrentIndex, selectedNetwork, - web3wallet + web3wallet, ], ); @@ -205,18 +206,18 @@ const App = (): React.JSX.Element => { }, [setActiveSessions, web3wallet]); useEffect(() => { - web3wallet?.on('session_proposal', onSessionProposal); - web3wallet?.on('session_request', onSessionRequest); - web3wallet?.on('session_delete', onSessionDelete); + web3wallet?.on("session_proposal", onSessionProposal); + web3wallet?.on("session_request", onSessionRequest); + web3wallet?.on("session_delete", onSessionDelete); return () => { - web3wallet?.off('session_proposal', onSessionProposal); - web3wallet?.off('session_request', onSessionRequest); - web3wallet?.off('session_delete', onSessionDelete); + web3wallet?.off("session_proposal", onSessionProposal); + web3wallet?.off("session_request", onSessionRequest); + web3wallet?.off("session_delete", onSessionDelete); }; }); return ( - <> + { component={HomeScreen} options={{ // eslint-disable-next-line react/no-unstable-nested-components - headerTitle: () => Laconic Wallet, + header: () => ( + + Laconic Wallet + + ), }} /> { name="AddSession" component={AddSession} options={{ - title: 'New session', + title: "New session", }} /> { headerRight: () => ( ), @@ -282,28 +296,28 @@ const App = (): React.JSX.Element => { name="ApproveTransfer" component={ApproveTransfer} options={{ - title: 'Approve transfer', + title: "Approve transfer", }} /> @@ -317,10 +331,11 @@ const App = (): React.JSX.Element => { setToastVisible(false)} - duration={3000}> + duration={3000} + > Session approved - + ); }; diff --git a/src/index.tsx b/src/index.tsx index 087f562..e1b13fa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,59 +1,85 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import { PaperProvider, MD3LightTheme as DefaultTheme, } from 'react-native-paper'; -import { NavigationContainer } from '@react-navigation/native'; -import { Platform } from 'react-native'; -import { Buffer } from 'buffer'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import { + PaperProvider, + MD3DarkTheme as DefaultTheme, +} from "react-native-paper"; +import { NavigationContainer, DarkTheme } from "@react-navigation/native"; +import { Platform } from "react-native"; +import { Buffer } from "buffer"; -import './index.css'; -import App from './App'; -import { AccountsProvider } from './context/AccountsContext'; -import { NetworksProvider } from './context/NetworksContext'; -import reportWebVitals from './reportWebVitals'; -import { WalletConnectProvider } from './context/WalletConnectContext'; +import "./index.css"; +import App from "./App"; +import { AccountsProvider } from "./context/AccountsContext"; +import { NetworksProvider } from "./context/NetworksContext"; +import reportWebVitals from "./reportWebVitals"; +import { WalletConnectProvider } from "./context/WalletConnectContext"; +import { createTheme, ThemeProvider } from "@mui/material"; globalThis.Buffer = Buffer; const linking = { - prefixes: ['https://wallet.laconic.com'] + prefixes: ["https://wallet.laconic.com"], }; const theme = { ...DefaultTheme, - dark: false, + dark: true, }; +const navigationTheme: typeof DarkTheme = { + ...DarkTheme, + colors: { + ...DarkTheme.colors, + primary: "#0000F4", + background: "#0F0F0F", + card: "#18181A", + }, +}; +const muiTheme = createTheme({ + palette: { + mode: "dark", + primary: { + main: "#0000F4", + }, + }, +}); + const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById("root") as HTMLElement, ); root.render( - - - - - - `Laconic Wallet`, - }} - > - - {Platform.OS === 'web' ? ( - - ) : null} - - - - - - - + ) : null} + + + + + + + + + +
, ); // If you want to start measuring performance in your app, pass a function diff --git a/src/styles/stylesheet.js b/src/styles/stylesheet.js index ad9b1b8..778b750 100644 --- a/src/styles/stylesheet.js +++ b/src/styles/stylesheet.js @@ -29,10 +29,14 @@ const styles = StyleSheet.create({ accountComponent: { flex: 4, }, + appSurface: { + backgroundColor: '#0f0f0f', + }, appContainer: { flexGrow: 1, marginTop: 24, paddingHorizontal: 24, + backgroundColor: '#0f0f0f', }, resetContainer: { flex: 1, @@ -178,7 +182,7 @@ const styles = StyleSheet.create({ width: '100%', height: '50%', position: 'absolute', - backgroundColor: 'white', + backgroundColor: '#0f0f0f', bottom: 0, }, modalOuterContainer: { flex: 1 },