From e0632d1a50a157d2e348f37d06918658cde7e112 Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Fri, 9 Aug 2024 00:59:27 -0400 Subject: [PATCH 01/26] 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 }, From afd09dc4c174a338a86ca51e192ae97781af4c37 Mon Sep 17 00:00:00 2001 From: Monkey Date: Fri, 9 Aug 2024 12:31:53 -0400 Subject: [PATCH 02/26] mnemonic dialog styles --- prettier.config.js | 18 ++++++++++++ src/components/Grid.tsx | 2 +- src/components/MnemonicDialog.tsx | 48 ++++++++++++++++++++----------- src/styles/stylesheet.js | 42 ++++++++++++++++++++++----- 4 files changed, 86 insertions(+), 24 deletions(-) create mode 100644 prettier.config.js diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..ecc8a48 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,18 @@ +const config = { + arrowParens: "always", + printWidth: 80, + semi: false, + singleQuote: true, + tabWidth: 2, + trailingComma: "es5", + importOrderSeparation: true, + importOrderSortSpecifiers: true, + plugins: ["@trivago/prettier-plugin-sort-imports"], + importOrder: [ + "", + "^(pages|components|utils|icons|test|graphql)/(.*)$", + "^[./]", + ], +}; + +export default config; diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index 764e51c..7e32aa2 100644 --- a/src/components/Grid.tsx +++ b/src/components/Grid.tsx @@ -7,7 +7,7 @@ import { GridViewProps } from '../types'; const GridView = ({ words }: GridViewProps) => { return ( - + {words.map((word, index) => ( {index + 1}. diff --git a/src/components/MnemonicDialog.tsx b/src/components/MnemonicDialog.tsx index 1e10297..b1708af 100644 --- a/src/components/MnemonicDialog.tsx +++ b/src/components/MnemonicDialog.tsx @@ -1,32 +1,48 @@ -import React from 'react'; -import { Dialog, DialogActions, DialogContent, DialogTitle, Button, Typography } from '@mui/material'; +import React from "react"; +import { + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Button, + Typography, +} from "@mui/material"; -import styles from '../styles/stylesheet'; -import GridView from './Grid'; -import { CustomDialogProps } from '../types'; +import styles from "../styles/stylesheet"; +import GridView from "./Grid"; +import { CustomDialogProps } from "../types"; -const MnemonicDialog = ({ visible, hideDialog, contentText }: CustomDialogProps) => { - const words = contentText.split(' '); +const MnemonicDialog = ({ + visible, + hideDialog, + contentText, +}: CustomDialogProps) => { + const words = contentText.split(" "); const copyMnemonic = () => { - navigator.clipboard.writeText(contentText) + navigator.clipboard.writeText(contentText); }; return ( - Mnemonic - - - Your mnemonic provides full access to your wallet and funds. Make sure to note it down. + Mnemonic + + + Your mnemonic provides full access to your wallet and funds.
+ Make sure to note it down. - + Do not share your mnemonic with anyone - - - + + + ); diff --git a/src/styles/stylesheet.js b/src/styles/stylesheet.js index 778b750..f1493ff 100644 --- a/src/styles/stylesheet.js +++ b/src/styles/stylesheet.js @@ -75,7 +75,36 @@ const styles = StyleSheet.create({ borderRadius: 10, }, dialogWarning: { - color: 'red', + color: '#FFA3A8', + }, + mnemonicTitle:{ + backgroundColor: '#18181A', + }, + mnemonicContainer:{ + backgroundColor: '#18181A', + }, + mnomonicDialogWarning: { + color: '#FFA3A8', + marginTop: 10 + }, + mnemonicButtonRow: { + paddingRight: 40, + backgroundColor: '#18181A' + }, + mnemonicButton:{ + backgroundColor: '#0000F4', + color: 'white', + padding: 2, + marginBottom: 20 + }, + mnemonicGridContainer: { + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'center', + marginTop: 20, + paddingBottom: 30, + borderBottomWidth: 1, + borderBottomColor: '#29292E' }, gridContainer: { flexDirection: 'row', @@ -83,14 +112,13 @@ const styles = StyleSheet.create({ justifyContent: 'center', }, gridItem: { - width: '25%', - margin: 8, - padding: 6, - borderWidth: 1, - borderColor: '#ccc', - borderRadius: 8, + width: '30%', + margin: 4, + padding: 4, + borderRadius: 4, alignItems: 'center', justifyContent: 'flex-start', + backgroundColor: '#29292E' }, HDcontainer: { marginTop: 24, From cca89775aaa4b5cce236bcf3f311c94f5936b6ef Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Fri, 9 Aug 2024 13:19:21 -0400 Subject: [PATCH 03/26] style: home screen first pass --- package.json | 1 + public/index.html | 5 + src/components/AccountDetails.tsx | 44 ++++---- src/components/Accounts.tsx | 170 +++++++++++++---------------- src/components/Dialog.tsx | 55 ++++++++++ src/components/ShowPKDialog.tsx | 45 ++++---- src/index.tsx | 29 +++++ src/screens/HomeScreen.tsx | 173 +++++++++++++++--------------- yarn.lock | 131 +++++++++++++++++----- 9 files changed, 399 insertions(+), 254 deletions(-) create mode 100644 src/components/Dialog.tsx diff --git a/package.json b/package.json index 91e19c9..fd29103 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@ethersproject/shims": "^5.7.0", "@hookform/resolvers": "^3.3.4", "@json-rpc-tools/utils": "^1.7.6", + "@mui/lab": "^5.0.0-alpha.173", "@mui/material": "^5.16.4", "@react-navigation/elements": "^1.3.30", "@react-navigation/native": "^6.1.10", diff --git a/public/index.html b/public/index.html index 2a0b70a..f863862 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,11 @@ + + +