UI/UX improvements in laconic wallet web app (#3)

Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675) - Fix private key shown in dialog box - Add laconicd network and set as default - Update web app title and favicon Co-authored-by: IshaVenikar <ishavenikar7@gmail.com> Reviewed-on: #3
2024-07-29 11:26:10 +00:00 · 2024-07-29 11:26:10 +00:00 · 4d5fd722fb
commit 4d5fd722fb
parent e8535fbdd5
17 changed files with 45 additions and 21 deletions
--- a/.env.example
+++ b/.env.example
@ -2,3 +2,4 @@ REACT_APP_WALLET_CONNECT_PROJECT_ID=
 REACT_APP_DEFAULT_GAS_PRICE=0.025
 # Reference: https://github.com/cosmos/cosmos-sdk/issues/16020
 REACT_APP_GAS_ADJUSTMENT=2
+REACT_APP_LACONICD_RPC_URL=https://laconicd.laconic.com
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -7,7 +7,7 @@
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Web site created using create-react-app"
+      content="Laconic Wallet Web App"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>Laconic Wallet</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Laconic Wallet",
+  "name": "Laconic Wallet Web App",
  "icons": [
    {
      "src": "favicon.ico",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -223,12 +223,13 @@ const App = (): React.JSX.Element => {
        }}
      >
        <Stack.Screen
-          name="Laconic"
+          name="Home"
          component={HomeScreen}
          options={{
            // eslint-disable-next-line react/no-unstable-nested-components
            headerTitle: () => <Text variant="titleLarge">Laconic Wallet</Text>,
-          }}        />
+          }}
+        />
        <Stack.Screen
          name="SignMessage"
          component={SignMessage}
--- a/src/components/ShowPKDialog.tsx
+++ b/src/components/ShowPKDialog.tsx
@ -65,6 +65,10 @@ const ShowPKDialog = () => {
                  component="pre"
                  variant="body1"
                  style={styles.dataBoxData}
+                  sx={{
+                    wordWrap: 'break-word',
+                    whiteSpace: 'initial',
+                  }}
                >
                  {privateKey}
                </Typography>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -38,7 +38,13 @@ root.render(
    <NetworksProvider>
      <AccountsProvider>
        <WalletConnectProvider>
-          <NavigationContainer linking={linking}>
+          <NavigationContainer
+            linking={linking}
+            documentTitle={{
+              formatter: () =>
+                `Laconic Wallet`,
+            }}
+          >
            <React.Fragment>
              {Platform.OS === 'web' ? (
                <style type="text/css">{`
--- a/src/screens/AddNetwork.tsx
+++ b/src/screens/AddNetwork.tsx
@ -198,7 +198,7 @@ const AddNetwork = () => {
        ),
      ]);

-      navigation.navigate('Laconic');
+      navigation.navigate('Home');
    },
    [navigation, namespace, setNetworksData],
  );
--- a/src/screens/ApproveTransaction.tsx
+++ b/src/screens/ApproveTransaction.tsx
@ -214,7 +214,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {

      await web3wallet!.respondSessionRequest({ topic, response });
      setIsRequestAccepted(false);
-      navigation.navigate('Laconic');
+      navigation.navigate('Home');
    } catch (error) {
      if (!(error instanceof Error)) {
        throw error;
@ -234,7 +234,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
      response,
    });

-    navigation.navigate('Laconic');
+    navigation.navigate('Home');
  };

  return (
@ -301,7 +301,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
        visible={isTxErrorDialogOpen}
        hideDialog={async () => {
          setIsTxErrorDialogOpen(false);
-          navigation.navigate('Laconic');
+          navigation.navigate('Home');
        }}
      />
    </>
--- a/src/screens/ApproveTransfer.tsx
+++ b/src/screens/ApproveTransfer.tsx
@ -336,7 +336,7 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {

      const { topic } = requestEvent;
      await web3wallet!.respondSessionRequest({ topic, response });
-      navigation.navigate('Laconic');
+      navigation.navigate('Home');
    } catch (error) {
      if (!(error instanceof Error)) {
        throw error;
@ -356,7 +356,7 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
      response,
    });

-    navigation.navigate('Laconic');
+    navigation.navigate('Home');
  };

  useEffect(() => {
@ -404,7 +404,7 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
              <Appbar.BackAction
                onPress={async () => {
                  await rejectRequestHandler();
-                  navigation.navigate('Laconic');
+                  navigation.navigate('Home');
                }}
              />
            )}
@ -660,7 +660,7 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
          setIsTxErrorDialogOpen(false);
          if (!isSufficientFunds || !balance || !fees) {
            rejectRequestHandler();
-            navigation.navigate('Laconic');
+            navigation.navigate('Home');
          }
        }}
      />
--- a/src/screens/EditNetwork.tsx
+++ b/src/screens/EditNetwork.tsx
@ -90,7 +90,7 @@ const EditNetwork = ({ route }: EditNetworkProps) => {

      setNetworksData(retrievedNetworksData);

-      navigation.navigate('Laconic');
+      navigation.navigate('Home');
    },
    [networkData, navigation, setNetworksData],
  );
--- a/src/screens/InvalidPath.tsx
+++ b/src/screens/InvalidPath.tsx
@ -19,7 +19,7 @@ const InvalidPath = () => {
      <Button
        mode="contained"
        onPress={() => {
-          navigation.navigate('Laconic');
+          navigation.navigate('Home');
        }}>
        Home
      </Button>
--- a/src/screens/SignRequest.tsx
+++ b/src/screens/SignRequest.tsx
@ -222,7 +222,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
    }

    setIsApproving(false);
-    navigation.navigate('Laconic');
+    navigation.navigate('Home');
  };

  const rejectRequestHandler = async () => {
@ -237,7 +237,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
    }

    setIsRejecting(false);
-    navigation.navigate('Laconic');
+    navigation.navigate('Home');
  };

  useEffect(() => {
@ -252,7 +252,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
              <Appbar.BackAction
                onPress={async () => {
                  await rejectRequestHandler();
-                  navigation.navigate('Laconic');
+                  navigation.navigate('Home');
                }}
              />
            )}
--- a/src/types.ts
+++ b/src/types.ts
@ -5,7 +5,7 @@ import { Web3WalletTypes } from '@walletconnect/web3wallet';
 import { EncodeObject } from '@cosmjs/proto-signing';

 export type StackParamsList = {
-  Laconic: undefined;
+  Home: undefined;
  SignMessage: {
    selectedNamespace: string;
    selectedChainId: string;
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@ -4,6 +4,18 @@ import { EIP155_CHAINS } from './wallet-connect/EIP155Data';
 export const EIP155 = 'eip155';
 export const COSMOS = 'cosmos';
 export const DEFAULT_NETWORKS = [
+  {
+    chainId: 'laconic_9000-1',
+    networkName: 'laconicd',
+    namespace: COSMOS,
+    rpcUrl: process.env.REACT_APP_LACONICD_RPC_URL!,
+    blockExplorerUrl: '',
+    nativeDenom: 'photon',
+    addressPrefix: 'laconic',
+    coinType: '118',
+    gasPrice: '0.01',
+    isDefault: true,
+  },
  {
    chainId: '1',
    networkName: EIP155_CHAINS['eip155:1'].name,