Use laconic namespace

Update registry-sdk version
Replace cosmos_address with laconic_address
2024-08-14 18:29:42 +05:30 · 2024-08-14 14:54:15 +05:30 · 2024-08-14 13:10:50 +05:30 · 2024-08-11 21:05:04 +00:00 · 2024-08-11 17:02:20 -04:00 · 2024-08-11 12:34:35 -04:00
27 changed files with 2824 additions and 2235 deletions
--- a/.env.example
+++ b/.env.example
@ -3,7 +3,8 @@ REACT_APP_ETHEREUM_MAINNET_CHAIN_ID=1
 REACT_APP_LACONICD_CHAIN_ID=laconic_9000-1
 REACT_APP_REGISTRY_GQL_ENDPOINT=http://localhost:9473/api
 REACT_APP_LACONICD_RPC_ENDPOINT=http://localhost:26657
 REACT_APP_LACONICD_DENOM=alnt
 REACT_APP_FAUCET_ENDPOINT=http://localhost:4000
 REACT_APP_WALLET_META_URL=http://localhost:3000
 REACT_APP_SUMSUB_API_ENDPOINT=
 REACT_APP_STAKING_AMOUNT=1000000000000000
 REACT_APP_LACONICD_DENOM=alnt
--- a/README.md
+++ b/README.md
@ -1,5 +1,5 @@
 # testnet-onboarding-app
-React app for onboarding participants to laconicd chain with Nitro/Cosmos key attestation
+React app for onboarding participants to laconicd chain with Nitro/Laconic key attestation
 ## Setup for testnet-onboarding-app
--- a/package.json
+++ b/package.json
@ -1,9 +1,11 @@
 {
  "name": "testnet-onboarding-app",
-  "version": "0.1.0",
+  "version": "0.1.2",
  "private": true,
  "dependencies": {
-    "@cerc-io/registry-sdk": "^0.2.5",
+    "@cerc-io/registry-sdk": "^0.2.6",
    "@cosmjs/encoding": "^0.32.4",
    "@cosmjs/proto-signing": "^0.32.4",
    "@cosmjs/stargate": "^0.32.4",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
--- a/public/index.html
+++ b/public/index.html
@ -1,20 +1,23 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
+
 <head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
-    <meta
+  <meta name="description" content="Testnet Onboarding App" />
      name="description"
      content="Testnet Onboarding App"
    />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
    rel="stylesheet" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
@ -61,8 +64,9 @@
      }
    }
  </style>
-  </head>
+</head>
-  <body>
+
 <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div class="loader-wrapper">
@ -79,5 +83,6 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
-  </body>
+</body>
 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -3,7 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import ConnectWallet from "./pages/ConnectWallet";
 import SignWithNitroKey from "./pages/SignWithNitroKey";
-import SignWithCosmos from "./pages/SignWithCosmos";
+import SignWithLaconic from "./pages/SignWithLaconic";
 import PageNotFound from "./pages/PageNotFound";
 import OnboardingSuccess from "./pages/OnboardingSuccess";
 import SignPageLayout from "./layout/SignPageLayout";
@ -14,36 +14,119 @@ import { WalletConnectProvider } from "./context/WalletConnectContext";
 import VerifyEmail from "./pages/VerifyEmail";
 import Email from "./pages/Email";
 import Thanks from "./pages/Thanks";
 import Validator from "./pages/Validator";
 import ValidatorSuccess from "./pages/ValidatorSuccess";
 import { createTheme, Box, ThemeProvider, CssBaseline } from "@mui/material";
 const darkTheme = createTheme({
  components: {
    MuiAccordion: {
      defaultProps: {
        sx: {
          border: "1px solid #48474F",
          borderBottomRightRadius: 3,
          borderBottomLeftRadius: 3,
        },
      },
    },
    MuiButton: {
      defaultProps: {
        color: "primary",
        sx: {
          fontFamily: `DM Mono, monospace`,
          fontWeight: 400,
        },
      },
    },
    MuiLink: {
      defaultProps: {
        color: "text.primary",
        fontSize: "14px",
      },
    },
    MuiTypography: {
      defaultProps: {
        color: "text.primary",
        fontWeight: 400,
      },
    },
    MuiPaper: {
      defaultProps: {
        sx: {
          backgroundImage: "none",
        },
      },
    },
  },
  palette: {
    mode: "dark",
    primary: {
      main: "#0000F4",
    },
    secondary: {
      main: "#A2A2FF",
    },
    error: {
      main: "#B20710",
    },
    background: {
      default: "#0F0F0F",
      paper: "#18181A",
    },
    text: {
      primary: "#FBFBFB",
    },
    info: {
      main: "#FBFBFB",
    },
  },
 });
 function App() {
  return (
    <Router>
      <ThemeProvider theme={darkTheme}>
        <Box
          sx={{
            height: "100vh",
            width: "100vw",
            backgroundColor: "background.default",
          }}
        >
          <Header />
          <CssBaseline />
          <WalletConnectProvider>
            <Routes>
              <Route path="/" element={<LandingPage />} />
              <Route path="/verify-email" element={<VerifyEmail />} />
-          <Route path="/email" element={<Email/>} />
+              <Route path="/email" element={<Email />} />
              <Route path="/connect-wallet" element={<ConnectWallet />} />
              <Route path="/thanks" element={<Thanks />} />
              <Route element={<SignPageLayout />}>
-            <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
+                <Route
                  path="/sign-with-nitro-key"
                  element={<SignWithNitroKey />}
                />
                <Route
                  path="/user-verification"
                  element={<UserVerification />}
                />
-            <Route
+                <Route path="/sign-with-laconic" element={<SignWithLaconic />} />
              path="/sign-with-cosmos"
              element={<SignWithCosmos />}
            />
                <Route
                  path="/onboarding-success"
                  element={<OnboardingSuccess />}
-            ></Route>
+                />
                <Route path="/validator" element={<Validator />} />
                <Route
                  path="/validator-success"
                  element={<ValidatorSuccess />}
                />
              </Route>
              <Route path="*" element={<PageNotFound />} />
            </Routes>
          </WalletConnectProvider>
        </Box>
      </ThemeProvider>
    </Router>
  );
 }
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@ -0,0 +1,25 @@
 import { Box } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 export const CodeBlock: React.FC<PropsWithChildren> = ({ children }) => (
  <Box
    sx={{
      backgroundColor: "#48474F",
      padding: 3,
      wordWrap: "break-word",
      mt: 1,
      borderRadius: 1,
    }}
  >
    <pre
      style={{
        whiteSpace: "pre-wrap",
        margin: 0,
        backgroundColor: "#48474F",
        color: "#FBFBFB",
      }}
    >
      {children}
    </pre>
  </Box>
 );
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@ -0,0 +1,21 @@
 import { Box, BoxProps } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 export const Container: React.FC<
  PropsWithChildren<{ boxProps?: BoxProps }>
 > = ({ children, boxProps = {} }) => (
  <Box
    {...boxProps}
    sx={{
      width: "100%",
      maxWidth: "752px",
      mx: "auto",
      backgroundColor: "background.paper",
      padding: 3,
      borderRadius: 2,
      ...boxProps.sx,
    }}
  >
    {children}
  </Box>
 );
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -1,31 +1,90 @@
-import React from 'react';
+import React from "react";
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
-import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material';
+import { AppBar, SvgIcon, Stack, Divider, Typography } from "@mui/material";
 const Header: React.FC = () => {
  const location = useLocation();
  return (
-    <AppBar position="static" color="inherit">
+    <AppBar
-      <Toolbar>
+      position="static"
        <Link to={location.pathname === "/" ? "/" : "/connect-wallet"} style={{ color: "inherit", textDecoration: "none" }}>
          <Box sx={{ display: "flex", alignItems: "center" }}>
            <Avatar
              alt="Laconic logo"
              src="https://avatars.githubusercontent.com/u/92608123"
            />
            <IconButton
              edge="start"
      color="inherit"
-              aria-label="menu"
+      sx={{ boxShadow: "none", mb: 4, height: 48 }}
              sx={{ ml: 2, mr: 2 }}
    >
-              Testnet Onboarding
+      <Stack
-            </IconButton>
+        direction="row"
-          </Box>
+        sx={{
          backgroundColor: "background.paper",
          pl: 2,
          alignItems: "center",
          py: 1,
        }}
        spacing={1}
      >
        <Link
          to={location.pathname === "/" ? "/" : "/connect-wallet"}
          style={{
            color: "inherit",
            textDecoration: "none",
            display: "flex",
            alignItems: "center",
            marginRight: 4,
          }}
        >
          <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>
        </Link>
-      </Toolbar>
+        <Divider
          flexItem
          orientation="vertical"
          color="#FBFBFB"
          sx={{ height: "1.2rem", alignSelf: "center", width: "1px" }}
        />
        <Typography fontSize="1.25rem">Testnet Onboarding</Typography>
      </Stack>
    </AppBar>
  );
 };
--- a/src/components/SelectRoleCard.tsx
+++ b/src/components/SelectRoleCard.tsx
@ -44,12 +44,12 @@ const SelectRoleCard = ({ handleAccept, handleRoleChange }: { handleAccept: () =
          <FormControlLabel
            value={Role.Validator}
            control={<Radio />}
-            label="Validator"
+            label="Validator / Service Provider"
          />
          <FormControlLabel
            value={Role.Participant}
            control={<Radio />}
-            label="Participant"
+            label="App Publisher"
          />
        </RadioGroup>
      </FormControl>
--- a/src/components/TermsAndConditionsBox.tsx
+++ b/src/components/TermsAndConditionsBox.tsx
@ -1,34 +1,47 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { Document, Page, pdfjs } from 'react-pdf';
+import { Document, Page, pdfjs } from "react-pdf";
-import { Typography } from '@mui/material';
+import { Typography } from "@mui/material";
 // https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#copy-worker-to-public-directory
-pdfjs.GlobalWorkerOptions.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.min.mjs';
+pdfjs.GlobalWorkerOptions.workerSrc =
  process.env.PUBLIC_URL + "/pdf.worker.min.mjs";
-const TermsAndConditionsBox = ({height}: {height: string}) => {
+interface TermsAndConditionsBoxProps {
  height: string;
  onLoad?: () => void;
 }
 const TermsAndConditionsBox = ({
  height,
  onLoad,
 }: TermsAndConditionsBoxProps) => {
  const [numPages, setNumPages] = useState<number>();
  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
    if (onLoad) {
      onLoad();
    }
  }
  return (
    <>
-      <Typography variant='h4' textAlign="center" gutterBottom>
+      <Typography variant="h4" textAlign="center" gutterBottom>
        Terms and Conditions
      </Typography>
      <div
        style={{
          height: height,
-          overflowY: 'auto',
+          overflowY: "auto",
-          display: 'flex',
+          display: "flex",
-          flexDirection: 'column',
+          flexDirection: "column",
-          alignItems: 'center'
+          alignItems: "center",
        }}
      >
        <Document
-          file={process.env.PUBLIC_URL + '/TermsAndConditions.pdf'}
+          file={process.env.PUBLIC_URL + "/TermsAndConditions.pdf"}
          onLoadSuccess={onDocumentLoadSuccess}
        >
          {Array.apply(null, Array(numPages))
@ -40,7 +53,6 @@ const TermsAndConditionsBox = ({height}: {height: string}) => {
                  pageNumber={page}
                  renderTextLayer={false}
                  renderAnnotationLayer={false}
                  width={1070}
                />
              );
            })}
--- a/src/components/TermsAndConditionsDialog.tsx
+++ b/src/components/TermsAndConditionsDialog.tsx
@ -16,7 +16,12 @@ const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ open, onClose })
        <TermsAndConditionsBox height='65vh' />
      </DialogContent>
      <DialogActions>
-        <Button onClick={onClose} color="primary">
+        <Button>
          <a href="/TermsAndConditions.pdf" download style={{textDecoration: "none", color: "inherit"}}>
            Download PDF
          </a>
        </Button>
        <Button onClick={onClose}>
          Close
        </Button>
      </DialogActions>
--- a/src/constants.ts
+++ b/src/constants.ts
@ -4,4 +4,4 @@ export const REDIRECT_EMAIL_MSG = 'Close this tab and the confirmation link in y
 export const ENABLE_KYC = false;
-export const SUBSCRIBER_ID_HASH_KEY = 'subscriberIdHash';
+export const HASHED_SUBSCRIBER_ID_KEY = 'subscriberIdHash';
--- a/src/context/WalletConnectContext.tsx
+++ b/src/context/WalletConnectContext.tsx
@ -22,6 +22,7 @@ assert(PROJECT_ID, "Wallet connect project id not provided");
 interface ContextValue {
  connect: () => Promise<void>;
  session: SessionTypes.Struct | null;
  isSessionLoading: boolean;
  signClient: SignClient | undefined;
  checkPersistedState: (client: SignClient) => Promise<void>;
  disconnect: () => Promise<void>;
@ -30,6 +31,7 @@ interface ContextValue {
 const walletConnectContext = createContext<ContextValue>({
  connect: () => Promise.resolve(),
  session: null,
  isSessionLoading: true,
  signClient: undefined,
  checkPersistedState: () => Promise.resolve(),
  disconnect: () => Promise.resolve(),
@ -47,6 +49,7 @@ export const WalletConnectProvider = ({
 }) => {
  const [signClient, setSignClient] = useState<SignClient>();
  const [session, setSession] = useState<SessionTypes.Struct | null>(null);
  const [isSessionLoading, setIsSessionLoading] = useState(true);
  const isSignClientInitializing = useRef<boolean>(false);
  const navigate = useNavigate();
@ -59,6 +62,7 @@ export const WalletConnectProvider = ({
    }
    setSession(null);
    setIsSessionLoading(false);
  }, [signClient, session]);
  const checkPersistedState = useCallback(async (client: SignClient) => {
@ -67,6 +71,8 @@ export const WalletConnectProvider = ({
      const session = client.session.get(client.session.keys[lastKeyIndex]);
      setSession(session);
    }
    setIsSessionLoading(false);
  }, []);
  const subscribeToEvents = useCallback(
@ -76,10 +82,12 @@ export const WalletConnectProvider = ({
        const currentSession = client.session.get(topic);
        const updatedSession = { ...currentSession, namespaces };
        setSession(updatedSession);
        setIsSessionLoading(false);
      });
      client.on("session_delete", () => {
        setSession(null);
        setIsSessionLoading(false);
        navigate("/");
      });
    },
@ -122,6 +130,13 @@ export const WalletConnectProvider = ({
        chains: [`cosmos:${process.env.REACT_APP_LACONICD_CHAIN_ID}`],
        events: [],
      },
      laconic: {
        methods: [
          "cosmos_sendTransaction",
        ],
        chains: [`laconic:${process.env.REACT_APP_LACONICD_CHAIN_ID}`],
        events: [],
      },
    };
    const { uri, approval } = await signClient.connect({
@ -133,12 +148,14 @@ export const WalletConnectProvider = ({
      try {
        const session = await approval();
        setSession(session);
        setIsSessionLoading(false);
      } catch (error) {
        enqueueSnackbar("User rejected pairing request", { variant: "error" });
        console.log(error);
      }
      web3Modal.closeModal();
    }
  };
  useEffect(() => {
@ -152,6 +169,7 @@ export const WalletConnectProvider = ({
      value={{
        connect,
        session,
        isSessionLoading,
        signClient,
        checkPersistedState,
        disconnect,
@ -163,12 +181,13 @@ export const WalletConnectProvider = ({
 };
 export const useWalletConnectContext = () => {
-  const { connect, session, signClient, checkPersistedState, disconnect } =
+  const { connect, session, signClient, isSessionLoading, checkPersistedState, disconnect } =
    useContext(walletConnectContext);
  return {
    connect,
    session,
    isSessionLoading,
    signClient,
    checkPersistedState,
    disconnect,
--- a/src/layout/Layout.tsx
+++ b/src/layout/Layout.tsx
@ -0,0 +1,34 @@
 import { Button, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 import { Container } from "../components/Container";
 import { ArrowBack } from "@mui/icons-material";
 import { useNavigate } from "react-router-dom";
 export const Layout: React.FC<
  PropsWithChildren<{
    title: string;
    backLinkTitle?: string;
    noBackButton?: boolean;
  }>
 > = ({ children, title, backLinkTitle = "Home", noBackButton = false }) => {
  const navigate = useNavigate();
  return (
    <Container boxProps={{ sx: { backgroundColor: "inherit", padding: 0 } }}>
      {noBackButton ? null : (
        <Button
          startIcon={<ArrowBack />}
          color="info"
          sx={{ mb: 4 }}
          onClick={() => navigate("/")}
        >
          {backLinkTitle}
        </Button>
      )}
      <Typography variant="h4" sx={{ mb: 4 }}>
        {title}
      </Typography>
      <Container>{children}</Container>
    </Container>
  );
 };
--- a/src/layout/SignPageLayout.tsx
+++ b/src/layout/SignPageLayout.tsx
@ -1,44 +1,38 @@
 import React from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import {
+import { Avatar, Button, Stack, Typography } from "@mui/material";
  Toolbar,
  Avatar,
  Button,
  Typography,
  Container
 } from "@mui/material";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { Container } from "../components/Container";
 const SignPageLayout = () => {
  const { disconnect, session } = useWalletConnectContext();
  const navigate = useNavigate();
  const location = useLocation();
  const disconnectHandler = async () => {
    const { pathname } = location;
    const redirectTo = pathname ? pathname.substring(1) : "";
    await disconnect();
-    navigate("/");
+    navigate(`/connect-wallet?redirectTo=${redirectTo}`);
  };
  return (
-    <>
+    <Stack justifyContent="center" alignItems="center">
-      <Toolbar variant="dense">
+      <Container
-
+        boxProps={{
-        <Button
+          sx: {
-          variant="outlined"
+            display: "flex",
-          style={{
+            flexDirection: "row",
-            marginLeft: "auto",
+            justifyContent: "space-between",
            mb: 4,
          },
        }}
          color="error"
          onClick={disconnectHandler}
      >
          Disconnect
        </Button>
      </Toolbar>
      <Container maxWidth="md">
        {session && (
-          <div style={{ display: "flex", flexDirection: "column" }}>
+          <Stack spacing={0.5}>
            <div
              style={{
                display: "flex",
@ -47,7 +41,7 @@ const SignPageLayout = () => {
              }}
            >
              <Typography variant="body2">
-                Connected to: <b> {session.peer.metadata.name}</b>{" "}
+                <b>Connected to:</b> {session.peer.metadata.name}
              </Typography>
              <Avatar
                variant="square"
@ -62,13 +56,21 @@ const SignPageLayout = () => {
              />
            </div>
            <Typography variant="body2">
-              Session ID: <b>{session.topic} </b>
+              <b>Session ID:</b> {session.topic}
            </Typography>
-          </div>
+          </Stack>
        )}
-        <Outlet />
+        <Button
          variant="outlined"
          color="error"
          onClick={disconnectHandler}
          sx={{ color: "text.primary" }}
        >
          Disconnect
        </Button>
      </Container>
-    </>
+      <Outlet />
    </Stack>
  );
 };
--- a/src/pages/ConnectWallet.tsx
+++ b/src/pages/ConnectWallet.tsx
@ -1,62 +1,57 @@
 import React, { useEffect } from "react";
-import {useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
-import { Button, Box, Container, Typography, colors } from "@mui/material";
+import { Button, Box, Container } from "@mui/material";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { WALLET_DISCLAIMER_MSG } from "../constants";
 const ConnectWallet = () => {
-  const { connect, session } = useWalletConnectContext();
+  const { connect, session, signClient, checkPersistedState } =
    useWalletConnectContext();
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams] = useSearchParams();
  const redirectTo = searchParams.get("redirectTo");
  useEffect(() => {
    if (signClient && !session) {
      checkPersistedState(signClient);
    }
  }, [checkPersistedState, signClient, session]);
-    if (session) {
+  useEffect(() => {
    if (!session) {
      return;
    }
    if (redirectTo) {
      navigate(`/${redirectTo}`, {
        state: location.state,
      });
    } else {
      navigate("/sign-with-nitro-key", {
-        state: location.state
+        state: location.state,
      });
    }
-  }, [session, navigate, location]);
+  }, [session, navigate, redirectTo, location.state]);
  const handler = async () => {
    await connect();
  };
  return (
-    <Container maxWidth="lg">
+    <Container maxWidth="lg" sx={{ height: "75%" }}>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        marginTop={10}
        sx={{
          border: 1,
          borderColor: 'grey.500',
        }}
        padding={5}
      >
        <Typography variant="h5" component="h1" gutterBottom color={colors.red[400]}>
          Disclaimer
        </Typography>
        <Typography variant="body1">
          {WALLET_DISCLAIMER_MSG}
        </Typography>
      </Box>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        padding={5}
        justifyContent="center"
        height="100%"
      >
-        <Button
+        <Button variant="contained" onClick={handler}>
          variant="contained"
          onClick={handler}
        >
          Connect Wallet
        </Button>
      </Box>
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@ -1,19 +1,22 @@
-import React from 'react';
+import React, { useState } from "react";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import { Button, Box, Typography } from '@mui/material';
+import { Button, Box, Typography } from "@mui/material";
-import TermsAndConditionsBox from '../components/TermsAndConditionsBox';
+import TermsAndConditionsBox from "../components/TermsAndConditionsBox";
 import { Container } from "../components/Container";
 const LandingPage = () => {
  const navigate = useNavigate();
  const [isDisabled, setIsDisabled] = useState(true);
  const handleAccept = () => {
-    navigate('/verify-email');
+    navigate("/verify-email");
  };
  return (
-    <>
+    <Container>
      <Box
        display="flex"
        flexDirection="column"
@ -22,25 +25,61 @@ const LandingPage = () => {
        margin={10}
        sx={{
          border: 1,
-          borderColor: 'grey.500',
+          borderColor: "grey.500",
          borderRadius: 1,
        }}
        padding={5}
      >
        <Typography variant="h6">
-          Welcome to the LORO Testnet Onboarding App. The detailed instructions for completing this first step are found in the{' '}
+          Welcome to the LORO Testnet Onboarding App. The detailed instructions
-          <a href="https://github.com/hyphacoop/loro-testnet/" target="_blank" rel="noopener noreferrer">LORO testnet repo</a>.
+          for completing this first step are found in the{" "}
-          Once your onboarding transaction has been submitted, await the completion of stage0. The genesis.json file and peer nodes will then be
+          <a
-          published in the aforementioned repository for validators to begin stage1. Once enough validators are online and the Laconic chain is running,
+            href="https://github.com/hyphacoop/loro-testnet/"
-          those same validators can complete their service provider setup. Once service providers are live, app publishers can start deploying webapps to individual service providers.
+            target="_blank"
            rel="noopener noreferrer"
          >
            LORO testnet repo
          </a>
          . Once your onboarding transaction has been submitted, await the
          completion of stage0. The genesis.json file and peer nodes will then
          be published in the aforementioned repository for validators to begin
          stage1. Once enough validators are online and the Laconic chain is
          running, those same validators can complete their service provider
          setup. Once service providers are live, app publishers can start
          deploying webapps to individual service providers.
        </Typography>
      </Box>
-      <TermsAndConditionsBox height="43vh" />
+      <TermsAndConditionsBox
-      <Box mt={2} display="flex" justifyContent="center">
+        height="43vh"
-        <Button variant="contained" color="primary" onClick={handleAccept}>
+        onLoad={() => {
          setIsDisabled(false);
        }}
      />
      <Box m={2} display="flex" justifyContent="center" gap={2}>
        <Button
          variant="outlined"
          color="primary"
          sx={{ color: "text.primary" }}
          disabled={isDisabled}
        >
          <a
            href="/TermsAndConditions.pdf"
            download
            style={{textDecoration: "none", color: "inherit"}}
          >
            Download PDF
          </a>
        </Button>
        <Button
          variant="contained"
          color="primary"
          onClick={handleAccept}
          disabled={isDisabled}
        >
          Accept
        </Button>
      </Box>
-    </>
+    </Container>
  );
 };
--- a/src/pages/OnboardingSuccess.tsx
+++ b/src/pages/OnboardingSuccess.tsx
@ -7,48 +7,49 @@ import { Registry } from "@cerc-io/registry-sdk";
 import SumsubWebSdk from "@sumsub/websdk-react";
 import { MessageHandler } from "@sumsub/websdk";
-import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
+import {
-import { ENABLE_KYC, SUBSCRIBER_ID_HASH_KEY } from "../constants";
+  config,
  fetchAccessToken,
  getAccessTokenExpirationHandler,
  options,
 } from "../utils/sumsub";
 import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 import { Participant } from "../types";
 import { CodeBlock } from "../components/CodeBlock";
-interface Participant {
+const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
  cosmosAddress: string;
  nitroAddress: string;
  role: string;
  kycId: string;
 }
 const registry = new Registry(
  process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!
 );
 const OnboardingSuccess = () => {
  const location = useLocation();
-  const { cosmosAddress } = location.state as {
+  const { laconicAddress } = location.state as {
-    cosmosAddress?: string
+    laconicAddress?: string;
  };
  const [participant, setParticipant] = useState<Participant>();
-  const [token, setToken] = useState<string>('');
+  const [token, setToken] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(true);
  const messageHandler: MessageHandler = (event, payload) => {
-    console.log('sumsubEvent:', event, payload);
+    console.log("sumsubEvent:", event, payload);
  };
  useEffect(() => {
    const fetchParticipants = async () => {
      try {
-        if (!cosmosAddress) {
+        if (!laconicAddress) {
-          enqueueSnackbar("Cosmos address is not provided", { variant: "error" });
+          enqueueSnackbar("Laconic address is not provided", {
            variant: "error",
          });
          return;
        }
-        const participant: Participant = await registry.getParticipantByAddress(cosmosAddress);
+        const participant: Participant =
          await registry.getParticipantByAddress(laconicAddress);
        if (!participant) {
          enqueueSnackbar("Participant not found", { variant: "error" });
          return;
        }
-        localStorage.removeItem(SUBSCRIBER_ID_HASH_KEY);
+        localStorage.removeItem(HASHED_SUBSCRIBER_ID_KEY);
        setParticipant(participant);
      } catch (error) {
@ -57,7 +58,7 @@ const OnboardingSuccess = () => {
    };
    fetchParticipants();
-  }, [cosmosAddress]);
+  }, [laconicAddress]);
  useEffect(() => {
    const getToken = async (userId: string) => {
@ -66,13 +67,13 @@ const OnboardingSuccess = () => {
      setLoading(false);
    };
-    if (cosmosAddress && ENABLE_KYC) {
+    if (laconicAddress && ENABLE_KYC) {
-      getToken(cosmosAddress).catch(error => {
+      getToken(laconicAddress).catch((error) => {
        console.error(error);
        alert("Failed to fetch token");
      });
    }
-  }, [cosmosAddress]);
+  }, [laconicAddress]);
  return (
    <>
@ -88,41 +89,35 @@ const OnboardingSuccess = () => {
        <Typography variant="body1">
          Participant onboarded: <br />
        </Typography>
-        <Box
+        <CodeBlock>
          sx={{
            backgroundColor: "lightgray",
            padding: 3,
            wordWrap: "break-word",
            marginBottom: 6,
          }}
        >
          <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
          {participant && (
            <div>
-              Cosmos Address: {participant.cosmosAddress} <br />
+              Laconic Address: {participant.laconicAddress} <br />
              Nitro Address: {participant.nitroAddress} <br />
              Role: {participant.role} <br />
              KYC ID: {participant.kycId} <br />
              <br />
            </div>
          )}
-          </pre>
+        </CodeBlock>
        </Box>
        {ENABLE_KYC ? (
          <Box>
            <Typography variant="h5">KYC Status</Typography>
-            {!loading && token && cosmosAddress && (
+            {!loading && token && laconicAddress && (
              <SumsubWebSdk
                accessToken={token}
-                expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
+                expirationHandler={getAccessTokenExpirationHandler(
                  laconicAddress,
                )}
                config={config}
                options={options}
                onMessage={messageHandler}
              />
            )}
          </Box>
-        ) : ''
+        ) : (
-        }
+          ""
        )}
      </Box>
      <Typography variant="h5">Next Steps</Typography>
      <Box
@ -133,18 +128,35 @@ const OnboardingSuccess = () => {
        marginTop={3}
        sx={{
          border: 1,
-          borderColor: 'grey.500',
+          borderColor: "grey.500",
        }}
        padding={5}
      >
        <Typography variant="body1" gutterBottom sx={{ p: 2 }}>
-          For participants, await the start of the stage 1 chain, which will be announced in various social media channels. In the meantime, familiarize yourself with the{' '}
+          For app publishers, await the start of the stage 1 chain, which will
-          <a href="https://github.com/hyphacoop/loro-testnet/blob/main/docs/publishing-webapps.md" target="_blank" rel="noopener noreferrer">webapp publishing workflow</a>{' '}
+          be announced in various social media channels. In the meantime,
-          as this is the main task you will be participating in.<br />
+          familiarize yourself with the{" "}
          <a
            href="https://github.com/hyphacoop/loro-testnet/blob/main/docs/publishing-webapps.md"
            target="_blank"
            rel="noopener noreferrer"
          >
            webapp publishing workflow
          </a>{" "}
          as this is the main task you will be participating in.
          <br />
-          For validators, ensure your service provider is running and ready to deploy webapps. Await publication of the laconicd version, genesis file, and peers to the LORO testnet repo, then follow{' '}
+          <br />
-          <a href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-a-validator-on-stage1" target="_blank" rel="noopener noreferrer">these instructions</a>{' '}
+          For validators, ensure your service provider is running and ready to
-          for joining stage 1 as a validator.
+          deploy webapps. Await publication of the laconicd version, genesis
          file, and peer info to the LORO testnet repo, then follow{" "}
          <a
            href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-a-validator-on-stage1"
            target="_blank"
            rel="noopener noreferrer"
          >
            these instructions
          </a>{" "}
          for joining stage 1 as a validator/service provider.
        </Typography>
      </Box>
    </>
--- a/src/pages/SignWithCosmos.tsx
+++ b/src/pages/SignWithCosmos.tsx
@ -1,213 +0,0 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 import {
  MsgOnboardParticipantEncodeObject,
  typeUrlMsgOnboardParticipant,
 } from "@cerc-io/registry-sdk";
 import { StargateClient } from "@cosmjs/stargate";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import SelectRoleCard, {Role} from "../components/SelectRoleCard";
 import { SUBSCRIBER_ID_HASH_KEY } from "../constants";
 const SignWithCosmos = () => {
  const { session, signClient } = useWalletConnectContext();
  const location = useLocation();
  const [isLoading, setIsLoading] = useState(false);
  const [balance, setBalance] = useState('');
  const [isRequesting, setIsRequesting] = useState(false);
  const [isTncAccepted, setIsTncAccepted] = useState(false);
  const [role, setRole] = useState(Role.Participant);
  const navigate = useNavigate();
  const {message: innerMessage, cosmosAddress, receivedEthSig: ethSignature} = location.state as {
    message?: {
      msg: string;
      address: string;
    };
    cosmosAddress?: string;
    receivedEthSig?: string;
  };
  const ethAddress = innerMessage!.address;
  const subscriberIdHash = localStorage.getItem(SUBSCRIBER_ID_HASH_KEY);
  const createCosmosClient = useCallback(async (endpoint: string) => {
    return await StargateClient.connect(endpoint);
  }, []);
  const onboardParticipantMsg: MsgOnboardParticipantEncodeObject =
    useMemo(() => {
      return {
        typeUrl: typeUrlMsgOnboardParticipant,
        value: {
          participant: cosmosAddress!,
          ethPayload: innerMessage,
          ethSignature: ethSignature!,
          kycId: subscriberIdHash!,
          role
        },
      };
    }, [cosmosAddress, innerMessage, ethSignature, subscriberIdHash, role]);
  const handleTokenRequest = async () => {
    try {
      setIsRequesting(true);
      const response = await fetch(`${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          address: cosmosAddress,
        }),
      });
      if (response.ok) {
        enqueueSnackbar('Tokens sent successfully',  { variant: "success" });
      } else {
        const errorResponse = await response.json();
        if (response.status === 429) {
          enqueueSnackbar(`${response.statusText} : ${errorResponse.error}`, { variant: "error" });
        } else {
          throw new Error(errorResponse.error);
        }
      }
      getBalances();
    } catch (error) {
      console.error(error);
      enqueueSnackbar("Error getting tokens from faucet", { variant: "error" });
    } finally {
      setIsRequesting(false);
    }
  };
  const sendTransaction = async (
    transactionMessage: MsgOnboardParticipantEncodeObject
  ) => {
    if (!ethAddress) {
      enqueueSnackbar("Set nitro address");
      return;
    }
    try {
      setIsLoading(true);
      const params = { transactionMessage, signer: cosmosAddress };
      const responseFromWallet = await signClient!.request<{
        code: number;
      }>({
        topic: session!.topic,
        chainId: `cosmos:${process.env.REACT_APP_LACONICD_CHAIN_ID}`,
        request: {
          method: "cosmos_sendTransaction",
          params,
        },
      });
      if (responseFromWallet.code !== 0) {
        enqueueSnackbar("Transaction not sent", { variant: "error" });
      } else {
        navigate("/onboarding-success", {
          state: {
            cosmosAddress
          }
        });
      }
    } catch (error) {
      console.error(error);
      enqueueSnackbar("Error in sending transaction", { variant: "error" });
    } finally {
      setIsLoading(false);
    }
  };
  const getBalances = useCallback(async () => {
    try {
      const cosmosClient = await createCosmosClient(process.env.REACT_APP_LACONICD_RPC_ENDPOINT!);
      const balance = await cosmosClient.getBalance(cosmosAddress!, process.env.REACT_APP_LACONICD_DENOM!);
      setBalance(balance.amount);
    } catch (error) {
      console.error('Error fetching balance:', error);
      throw error;
    }
  }, [cosmosAddress, createCosmosClient]);
  useEffect(() => {
    getBalances();
  }, [getBalances]);
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        marginTop: 6,
        gap: 1,
      }}
    >
      <Typography variant="h5" display={`${isTncAccepted ? "none" : "block"}`}>Please accept terms and conditions to continue</Typography>
      <SelectRoleCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
      <Typography variant="h5">Send transaction to chain</Typography>
      <Typography>Cosmos Account:</Typography>
      <Card className='mt-1 mb-1'>
        <CardContent>
          <Grid container spacing={2}>
            <Grid item xs={9}>
              <Typography variant="body1">Address: {cosmosAddress}</Typography>
              <Typography variant="body1">Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}</Typography>
            </Grid>
            <Grid item xs={3} container justifyContent="flex-end">
              <LoadingButton
                variant="contained"
                onClick={handleTokenRequest}
                disabled={isTncAccepted ? isRequesting : !isTncAccepted}
                loading={isRequesting}
              >
                Request tokens from Faucet
              </LoadingButton>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
      <Typography variant="body1">
        Onboarding message: <br />
      </Typography>
      <Box
        sx={{
          backgroundColor: "lightgray",
          padding: 3,
          wordWrap: "break-word",
        }}
      >
        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
          {JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
        </pre>
      </Box>
      <Box
        sx={{
          paddingBottom: 2,
        }}>
        <LoadingButton
          variant="contained"
          onClick={async () => {
            await sendTransaction(onboardParticipantMsg);
          }}
          loading={isLoading}
          disabled={isTncAccepted ? (balance === '0') : !isTncAccepted}
        >
          Send transaction
        </LoadingButton>
      </Box>
    </Box>
  );
 };
 export default SignWithCosmos;
--- a/src/pages/SignWithLaconic.tsx
+++ b/src/pages/SignWithLaconic.tsx
@ -0,0 +1,222 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 import { Box, Divider, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 import {
  MsgOnboardParticipantEncodeObject,
  typeUrlMsgOnboardParticipant,
 } from "@cerc-io/registry-sdk";
 import { StargateClient } from "@cosmjs/stargate";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import SelectRoleCard, { Role } from "../components/SelectRoleCard";
 import { HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 import { Layout } from "../layout/Layout";
 import { CodeBlock } from "../components/CodeBlock";
 const SignWithLaconic = () => {
  const { session, signClient } = useWalletConnectContext();
  const location = useLocation();
  const [isLoading, setIsLoading] = useState(false);
  const [balance, setBalance] = useState("");
  const [isRequesting, setIsRequesting] = useState(false);
  const [isTncAccepted, setIsTncAccepted] = useState(false);
  const [role, setRole] = useState(Role.Participant);
  const navigate = useNavigate();
  const {
    message: innerMessage,
    laconicAddress,
    receivedEthSig: ethSignature,
  } = location.state as {
    message?: {
      msg: string;
      address: string;
    };
    laconicAddress?: string;
    receivedEthSig?: string;
  };
  const ethAddress = innerMessage!.address;
  const subscriberIdHash = localStorage.getItem(HASHED_SUBSCRIBER_ID_KEY);
  const createLaconicClient = useCallback(async (endpoint: string) => {
    return await StargateClient.connect(endpoint);
  }, []);
  const onboardParticipantMsg: MsgOnboardParticipantEncodeObject =
    useMemo(() => {
      return {
        typeUrl: typeUrlMsgOnboardParticipant,
        value: {
          participant: laconicAddress!,
          ethPayload: innerMessage,
          ethSignature: ethSignature!,
          kycId: subscriberIdHash!,
          role,
        },
      };
    }, [laconicAddress, innerMessage, ethSignature, subscriberIdHash, role]);
  const handleTokenRequest = async () => {
    try {
      setIsRequesting(true);
      const response = await fetch(
        `${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            address: laconicAddress,
          }),
        },
      );
      if (response.ok) {
        enqueueSnackbar("Tokens sent successfully", { variant: "success" });
      } else {
        const errorResponse = await response.json();
        if (response.status === 429) {
          enqueueSnackbar(`${response.statusText} : ${errorResponse.error}`, {
            variant: "error",
          });
        } else {
          throw new Error(errorResponse.error);
        }
      }
      getBalances();
    } catch (error) {
      console.error(error);
      enqueueSnackbar("Error getting tokens from faucet", { variant: "error" });
    } finally {
      setIsRequesting(false);
    }
  };
  const sendTransaction = async (
    transactionMessage: MsgOnboardParticipantEncodeObject,
  ) => {
    if (!ethAddress) {
      enqueueSnackbar("Set nitro address");
      return;
    }
    try {
      setIsLoading(true);
      enqueueSnackbar("View and sign the message from your Laconic Wallet", {
        variant: "info",
      });
      const params = { transactionMessage, signer: laconicAddress };
      const responseFromWallet = await signClient!.request<{
        code: number;
      }>({
        topic: session!.topic,
        chainId: `laconic:${process.env.REACT_APP_LACONICD_CHAIN_ID}`,
        request: {
          method: "cosmos_sendTransaction",
          params,
        },
      });
      if (responseFromWallet.code !== 0) {
        enqueueSnackbar("Transaction not sent", { variant: "error" });
      } else {
        navigate("/onboarding-success", {
          state: {
            laconicAddress,
          },
        });
      }
    } catch (error) {
      console.error(error);
      enqueueSnackbar("Error in sending transaction", { variant: "error" });
    } finally {
      setIsLoading(false);
    }
  };
  const getBalances = useCallback(async () => {
    try {
      const laconicClient = await createLaconicClient(
        process.env.REACT_APP_LACONICD_RPC_ENDPOINT!,
      );
      const balance = await laconicClient.getBalance(
        laconicAddress!,
        process.env.REACT_APP_LACONICD_DENOM!,
      );
      setBalance(balance.amount);
    } catch (error) {
      console.error("Error fetching balance:", error);
      throw error;
    }
  }, [laconicAddress, createLaconicClient]);
  useEffect(() => {
    getBalances();
  }, [getBalances]);
  return (
    <>
      {!isTncAccepted && (
        <Layout
          title="Please accept the terms and conditions to continue"
          noBackButton
        >
          <SelectRoleCard
            handleAccept={() => setIsTncAccepted(true)}
            handleRoleChange={setRole}
          />
        </Layout>
      )}
      <Layout title="Send transaction to chain" noBackButton>
        <Typography>Laconic Account:</Typography>
        <Box sx={{ backgroundColor: "#29292E", p: 2, borderRadius: 1, mb: 2 }}>
          <Typography variant="body1">Address: {laconicAddress}</Typography>
          <Typography variant="body1">
            Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}
          </Typography>
        </Box>
        <LoadingButton
          variant="contained"
          onClick={handleTokenRequest}
          disabled={isTncAccepted ? isRequesting : !isTncAccepted}
          loading={isRequesting}
        >
          Request tokens from Faucet
        </LoadingButton>
        <Divider flexItem sx={{ my: 2 }} />
        <Typography variant="body1">Onboarding message:</Typography>
        <CodeBlock>{JSON.stringify(onboardParticipantMsg, null, 2)} </CodeBlock>
        <Box
          sx={{
            paddingBottom: 2,
            mt: 2,
          }}
        >
          <LoadingButton
            variant="contained"
            onClick={async () => {
              await sendTransaction(onboardParticipantMsg);
            }}
            loading={isLoading}
            disabled={isTncAccepted ? balance === "0" : !isTncAccepted}
          >
            Send transaction
          </LoadingButton>
        </Box>
      </Layout>
    </>
  );
 };
 export default SignWithLaconic;
--- a/src/pages/SignWithNitroKey.tsx
+++ b/src/pages/SignWithNitroKey.tsx
@ -1,44 +1,53 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
-import {
+import { Select, MenuItem, Box, Typography, Stack } from "@mui/material";
-  Select,
+import LoadingButton from "@mui/lab/LoadingButton";
  MenuItem,
  Box,
  Typography,
 } from "@mui/material";
 import LoadingButton from '@mui/lab/LoadingButton';
 import { utf8ToHex } from "@walletconnect/encoding";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
-import { ENABLE_KYC, SUBSCRIBER_ID_HASH_KEY } from "../constants";
+import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
 import { Layout } from "../layout/Layout";
 import { CodeBlock } from "../components/CodeBlock";
 const SignWithNitroKey = () => {
-
+  const { session, signClient, isSessionLoading } = useWalletConnectContext();
  const { session, signClient, checkPersistedState } =
    useWalletConnectContext();
  useEffect(() => {
    if (signClient && !session) {
      checkPersistedState(signClient);
    }
  }, [session, signClient, checkPersistedState]);
  const navigate = useNavigate();
  const location = useLocation();
  useEffect(() => {
    if (isSessionLoading) {
      return;
    }
    if (!session) {
      navigate("/connect-wallet?redirectTo=sign-with-nitro-key", {
        state: location.state,
      });
    }
  }, [session, isSessionLoading, navigate, location.state]);
  const [ethAddress, setEthAddress] = useState("");
  const [ethSignature, setEthSignature] = useState("");
-  const [cosmosAddress, setCosmosAddress] = useState("");
+  const [laconicAddress, setLaconicAddress] = useState("");
  const [isLoading, setIsLoading] = useState(false);
-  const subscriberIdHash = localStorage.getItem(SUBSCRIBER_ID_HASH_KEY);
+
  const subscriberIdHash = useMemo(() => {
    return localStorage.getItem(HASHED_SUBSCRIBER_ID_KEY);
  }, []);
  useEffect(() => {
    if (!subscriberIdHash) {
      setIsLoading(false);
-      enqueueSnackbar("Subscriber ID not found. Please verify your email and try again", { variant: "error" });
+      enqueueSnackbar(
        "Subscriber ID not found. Please verify your email and try again",
        { variant: "error" },
      );
    }
  }, [subscriberIdHash]);
@ -53,6 +62,11 @@ const SignWithNitroKey = () => {
    if (session && signClient) {
      try {
        setIsLoading(true);
        enqueueSnackbar("View and sign the message from your Laconic Wallet", {
          variant: "info",
        });
        const jsonMessage = canonicalStringify(message);
        const hexMsg = utf8ToHex(jsonMessage, true);
        const receivedEthSig: string = await signClient!.request({
@ -70,15 +84,15 @@ const SignWithNitroKey = () => {
          navigate("/user-verification", {
            state: {
              message,
-              cosmosAddress,
+              laconicAddress,
              receivedEthSig,
            },
          });
        } else {
-          navigate("/sign-with-cosmos", {
+          navigate("/sign-with-laconic", {
            state: {
              message,
-              cosmosAddress,
+              laconicAddress,
              receivedEthSig,
            },
          });
@ -92,24 +106,16 @@ const SignWithNitroKey = () => {
  };
  return (
-    <div>
+    <Layout title="New Session" noBackButton>
      {session ? (
-        <Box
+        <Stack spacing={2}>
          sx={{
            display: "flex",
            flexDirection: "column",
            marginTop: 6,
            gap: 1,
          }}
        >
          <Typography variant="h5">Sign with Nitro key</Typography>
          <Typography variant="body1">Select Laconic account:</Typography>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
-            value={cosmosAddress}
+            value={laconicAddress}
            onChange={(e: any) => {
-              setCosmosAddress(e.target.value);
+              setLaconicAddress(e.target.value);
            }}
            style={{ maxWidth: "600px", display: "block" }}
          >
@ -136,15 +142,9 @@ const SignWithNitroKey = () => {
            ))}
          </Select>
-          {(Boolean(ethAddress) && Boolean(cosmosAddress)) && (<Box
+          {Boolean(ethAddress) && Boolean(laconicAddress) && (
-            sx={{
+            <CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock>
-              backgroundColor: "lightgray",
+          )}
              padding: 3,
              wordWrap: "break-word",
            }}
          >
            <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{canonicalStringify(message, null, 2)} </pre>
          </Box>)}
          <Box>
            <LoadingButton
              variant="contained"
@ -156,11 +156,11 @@ const SignWithNitroKey = () => {
              Sign using Nitro key
            </LoadingButton>
          </Box>
-        </Box>
+        </Stack>
      ) : (
        <>Loading...</>
      )}
-    </div>
+    </Layout>
  );
 };
--- a/src/pages/Thanks.tsx
+++ b/src/pages/Thanks.tsx
@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { jwtDecode } from "jwt-decode";
+import { jwtDecode } from 'jwt-decode';
 import { ethers } from 'ethers';
 import { Box, colors, Typography } from '@mui/material';
-import { SUBSCRIBER_ID_HASH_KEY } from '../constants';
+import { HASHED_SUBSCRIBER_ID_KEY } from '../constants';
 interface JwtPayload {
  subscriber_id: string;
@ -25,7 +25,7 @@ const Thanks: React.FC = () => {
    const token = queryParams.get('jwt_token');
    try {
-      if(!token){
+      if (!token) {
        throw new Error("Invalid JWT Token");
      }
@ -43,9 +43,9 @@ const Thanks: React.FC = () => {
      const subscriberIdBytes = ethers.utils.toUtf8Bytes(decoded.subscriber_id);
      const subscriberIdHash = ethers.utils.sha256(subscriberIdBytes);
-      localStorage.setItem(SUBSCRIBER_ID_HASH_KEY, subscriberIdHash);
+      localStorage.setItem(HASHED_SUBSCRIBER_ID_KEY, subscriberIdHash);
-      navigate('/connect-wallet');
+      navigate('/sign-with-nitro-key');
    } catch (error) {
      setErr(String(error));
    }
--- a/src/pages/UserVerification.tsx
+++ b/src/pages/UserVerification.tsx
@ -18,13 +18,13 @@ const UserVerification = () => {
  const location = useLocation();
  const navigate = useNavigate();
-  const {message, cosmosAddress, receivedEthSig} = location.state as {
+  const {message, laconicAddress, receivedEthSig} = location.state as {
    message?: string;
-    cosmosAddress?: string;
+    laconicAddress?: string;
    receivedEthSig?: string;
  };
-  const userId = cosmosAddress;
+  const userId = laconicAddress;
  useEffect(() => {
    const getToken = async (userId: string) => {
@ -46,15 +46,15 @@ const UserVerification = () => {
    if (applicationSubmitted && kycId !== '') {
      const kycIdHash = ethers.utils.sha256(ethers.utils.toUtf8Bytes(kycId));
-      navigate("/sign-with-cosmos", {
+      navigate("/sign-with-laconic", {
        state: {
          message,
-          cosmosAddress,
+          laconicAddress,
          receivedEthSig,
          kycIdHash
        }});
    }
-  }, [applicationSubmitted, kycId, navigate, cosmosAddress, message, receivedEthSig]);
+  }, [applicationSubmitted, kycId, navigate, laconicAddress, message, receivedEthSig]);
  const messageHandler: MessageHandler = (event, payload) => {
    console.log('sumsubEvent:', event, payload);
--- a/src/pages/Validator.tsx
+++ b/src/pages/Validator.tsx
@ -0,0 +1,279 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { enqueueSnackbar } from "notistack";
 import { useNavigate } from "react-router-dom";
 import { MsgCreateValidator } from "cosmjs-types/cosmos/staking/v1beta1/tx";
 import {
  Box,
  Link,
  MenuItem,
  Select,
  TextField,
  Typography,
 } from "@mui/material";
 import { fromBech32, toBech32 } from "@cosmjs/encoding";
 import { LoadingButton } from "@mui/lab";
 import { EncodeObject, encodePubkey } from "@cosmjs/proto-signing";
 import { Registry } from "@cerc-io/registry-sdk";
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { Participant } from "../types";
 import { Layout } from "../layout/Layout";
 import { CodeBlock } from "../components/CodeBlock";
 const Validator = () => {
  const { session, signClient, isSessionLoading } = useWalletConnectContext();
  const navigate = useNavigate();
  const [laconicAddress, setLaconicAddress] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [moniker, setMoniker] = useState("");
  const [pubKey, setPubKey] = useState("");
  const [participant, setParticipant] = useState<Participant | null>(null);
  const [isError, setIsError] = useState(false);
  useEffect(() => {
    if (isSessionLoading) {
      return;
    }
    if (!session) {
      navigate("/connect-wallet?redirectTo=validator");
    }
  }, [session, navigate, isSessionLoading]);
  useEffect(() => {
    if (!laconicAddress) {
      setParticipant(null);
      return;
    }
    const fetchParticipant = async () => {
      const registry = new Registry(
        process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!,
      );
      try {
        const fetchedParticipant =
          await registry.getParticipantByAddress(laconicAddress);
        if (fetchedParticipant) {
          setParticipant(fetchedParticipant);
        } else {
          throw new Error("Participant not found");
        }
      } catch (error) {
        console.error("Error fetching participant", error);
        enqueueSnackbar("Error in fetching participant", { variant: "error" });
        setParticipant(null);
      }
    };
    fetchParticipant();
  }, [laconicAddress]);
  const isMonikerValid = useMemo(() => moniker.trim().length > 0, [moniker]);
  const isPubKeyValid = useMemo(() => pubKey.length === 44, [pubKey]);
  const msgCreateValidator: MsgCreateValidator = useMemo(() => {
    const encodedPubKey = encodePubkey({
      type: "tendermint/PubKeyEd25519",
      value: pubKey.length === 44 ? pubKey : "",
    });
    return {
      description: {
        moniker,
        identity: "",
        website: "",
        securityContact: "",
        details: "",
      },
      commission: {
        maxChangeRate: "10000000000000000", // 0.01
        maxRate: "200000000000000000", // 0.2
        rate: "100000000000000000", // 0.1
      },
      minSelfDelegation: "1",
      delegatorAddress: "",
      validatorAddress:
        laconicAddress &&
        toBech32("laconicvaloper", fromBech32(laconicAddress).data),
      pubkey: encodedPubKey,
      value: {
        amount: process.env.REACT_APP_STAKING_AMOUNT!,
        denom: process.env.REACT_APP_LACONICD_DENOM!,
      },
    };
  }, [laconicAddress, pubKey, moniker]);
  const msgCreateValidatorEncodeObject: EncodeObject = {
    typeUrl: "/cosmos.staking.v1beta1.MsgCreateValidator",
    value: MsgCreateValidator.toJSON(msgCreateValidator),
  };
  const sendTransaction = async () => {
    if (
      !isMonikerValid ||
      !isPubKeyValid ||
      !msgCreateValidator.validatorAddress
    ) {
      setIsError(true);
      return;
    }
    setIsLoading(true);
    enqueueSnackbar("View and sign the message from your Laconic Wallet", {
      variant: "info",
    });
    try {
      const params = {
        transactionMessage: msgCreateValidatorEncodeObject,
        signer: laconicAddress,
      };
      const response = await signClient!.request<{ code: number }>({
        topic: session!.topic,
        chainId: `laconic:${process.env.REACT_APP_LACONICD_CHAIN_ID}`,
        request: {
          method: "cosmos_sendTransaction",
          params,
        },
      });
      if (response.code !== 0) {
        throw new Error("Transaction not sent");
      } else {
        navigate("/validator-success", {
          state: { validatorAddress: msgCreateValidator.validatorAddress },
        });
      }
    } catch (error) {
      console.error("Error sending transaction", error);
      enqueueSnackbar("Error in sending transaction", { variant: "error" });
    } finally {
      setIsLoading(false);
    }
  };
  const replacer = (_key: string, value: any): any => {
    if (value instanceof Uint8Array) {
      return Buffer.from(value).toString("hex");
    }
    return value;
  };
  return (
    <Layout title="Create a validator">
      <Typography variant="body1">Select Laconic account:</Typography>
      <Select
        sx={{ marginBottom: 2 }}
        id="laconic-address-select"
        value={laconicAddress}
        onChange={(e) => setLaconicAddress(e.target.value)}
        style={{ maxWidth: "600px", display: "block" }}
      >
        {session?.namespaces.laconic.accounts.map((address, index) => (
          <MenuItem value={address.split(":")[2]} key={index}>
            {address.split(":")[2]}
          </MenuItem>
        ))}
      </Select>
      {Boolean(laconicAddress) && (
        <>
          {participant ? (
            <Typography>Onboarded participant</Typography>
          ) : (
            <Typography>No participant found</Typography>
          )}
          {participant && (
            <CodeBlock>
              Laconic Address: {participant.laconicAddress} <br />
              Nitro Address: {participant.nitroAddress} <br />
              Role: {participant.role} <br />
              KYC ID: {participant.kycId} <br />
            </CodeBlock>
          )}
          {participant?.role === "validator" && (
            <>
              <Box style={{ maxWidth: "600px" }}>
                <TextField
                  id="moniker"
                  label="Enter your node moniker (example: AliceNode)"
                  variant="outlined"
                  fullWidth
                  margin="normal"
                  value={moniker}
                  onChange={(e) => {
                    setIsError(false);
                    setMoniker(e.target.value);
                  }}
                  error={!isMonikerValid && isError}
                  helperText={
                    !isMonikerValid && isError ? "Moniker is required" : ""
                  }
                />
              </Box>
              <Typography sx={{ marginTop: 3 }}>
                Fetch your validator public key using the following command
                (refer&nbsp;
                <Link
                  href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-testnet-validator"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  this guide
                </Link>
                )
              </Typography>
              <CodeBlock>
                {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd cometbft show-validator" | jq -r .key`}
              </CodeBlock>
              <Box sx={{ maxWidth: "600px" }}>
                <TextField
                  id="pub-key"
                  label="Enter your validator public key"
                  variant="outlined"
                  fullWidth
                  margin="normal"
                  value={pubKey}
                  onChange={(e) => {
                    setIsError(false);
                    setPubKey(e.target.value);
                  }}
                  error={!isPubKeyValid && isError}
                  helperText={
                    !isPubKeyValid && isError
                      ? "Public key must be 44 characters"
                      : ""
                  }
                />
              </Box>
              <Typography>Send transaction to chain</Typography>
              <CodeBlock>
                {JSON.stringify(msgCreateValidator, replacer, 2)}
              </CodeBlock>
              <Box marginTop={1} marginBottom={1}>
                <LoadingButton
                  variant="contained"
                  onClick={sendTransaction}
                  loading={isLoading}
                  disabled={isError}
                >
                  Send transaction
                </LoadingButton>
              </Box>
            </>
          )}
        </>
      )}
    </Layout>
  );
 };
 export default Validator;
--- a/src/pages/ValidatorSuccess.tsx
+++ b/src/pages/ValidatorSuccess.tsx
@ -0,0 +1,35 @@
 import React from "react";
 import { useLocation } from "react-router-dom";
 import { Link, Typography } from "@mui/material";
 import { Layout } from "../layout/Layout";
 import { CodeBlock } from "../components/CodeBlock";
 const ValidatorSuccess = () => {
  const location = useLocation();
  const { validatorAddress } = location.state as {
    validatorAddress?: string;
  };
  return (
    <Layout title="Validator created successfully">
      <Typography sx={{ marginTop: 3 }}>
        You can view your validator details using the following command
        (Refer&nbsp;
        <Link
          href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-testnet-validator"
          target="_blank"
          rel="noopener noreferrer"
        >
          this guide
        </Link>
        )
      </Typography>
      <CodeBlock>
        {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
      </CodeBlock>
    </Layout>
  );
 };
 export default ValidatorSuccess;
--- a/src/types.ts
+++ b/src/types.ts
@ -0,0 +1,6 @@
 export interface Participant {
    laconicAddress: string;
    nitroAddress: string;
    role: string;
    kycId: string;
  }
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
IshaVenikar	e71d813a4a	Use laconic namespace	2024-08-14 18:29:42 +05:30
IshaVenikar	9e34835adf	Update registry-sdk version	2024-08-14 14:54:15 +05:30
IshaVenikar	5774c7b32d	Replace cosmos_address with laconic_address	2024-08-14 13:10:50 +05:30
zramsay	eba6cd5d68	Merge pull request 'Skin onboarding app' (#33 ) from style/vaidator into main Reviewed-on: cerc-io/testnet-onboarding-app#33	2024-08-11 21:05:04 +00:00
zramsay	5baccf3a84	bump version	2024-08-11 17:02:20 -04:00
Cody Bender	b39afe386f	style: validator success page	2024-08-11 12:34:35 -04:00
Cody Bender	565d1887e0	style: add codeblock and style validator page	2024-08-11 12:32:55 -04:00
zramsay	e6fa6aabd7	copy: fix role names	2024-08-11 15:53:43 +05:30
Cody Bender	3fe0576f34	style: add back t&c text and style pre block	2024-08-11 15:30:40 +05:30
Monkey	31e3b75dfa	remove width setting for terms and conditions	2024-08-11 15:29:59 +05:30
Cody Bender	bee7379e86	style: sign with cosmos	2024-08-11 15:29:58 +05:30
Cody Bender	bff5ab9f31	style: sign with nitro	2024-08-11 15:28:14 +05:30
Cody Bender	051de43480	chore: add dm mono	2024-08-11 15:28:14 +05:30
Cody Bender	ad614aff2f	style: remove disclaimer and center button	2024-08-11 15:28:14 +05:30
Cody Bender	c038085b87	style: first pass with dark mui theme	2024-08-11 15:28:09 +05:30
nabarun	09104b50bf	Add download button for terms and conditions PDF (#31 ) Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675) - Replace Cosmos address with Laconic address Co-authored-by: Shreerang Kale <shreerangkale@gmail.com> Reviewed-on: cerc-io/testnet-onboarding-app#31	2024-08-11 09:47:18 +00:00
nabarun	663eb42a74	Wait for session to load before redirecting (#29 ) Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675) Co-authored-by: Shreerang Kale <shreerangkale@gmail.com> Reviewed-on: cerc-io/testnet-onboarding-app#29	2024-08-09 13:00:30 +00:00
nabarun	8ba837b2f4	Add functionality to create a validator (#28 ) Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675) Co-authored-by: Adw8 <adwaitgharpure@gmail.com> Co-authored-by: Prathamesh Musale <prathamesh.musale0@gmail.com> Co-authored-by: IshaVenikar <ishavenikar7@gmail.com> Co-authored-by: Shreerang Kale <shreerangkale@gmail.com> Reviewed-on: cerc-io/testnet-onboarding-app#28	2024-08-09 10:18:13 +00:00
`@ -4,4 +4,4 @@ export const REDIRECT_EMAIL_MSG = 'Close this tab and the confirmation link in y`

	`export const ENABLE_KYC = false;`	`export const ENABLE_KYC = false;`

	`export const SUBSCRIBER_ID_HASH_KEY = 'subscriberIdHash';`	`export const HASHED_SUBSCRIBER_ID_KEY = 'subscriberIdHash';`