LP Utility Page

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
+    "bech32": "^2.0.0",
     "bignumber.js": "^9.1.2",
     "framer-motion": "^11.0.5",
     "grpc_tools_node_protoc_ts": "^5.3.3",

src/pages/lp/utils.tsx

@@ -0,0 +1,68 @@
+// pages/lp/utils.tsx
+
+import React, { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import styles from "../../../styles/Home.module.css";
+import { testnetConstants } from "../../constants/configConstants";
+import Layout from "../../components/layout";
+import { VStack, Text, Spinner, Center, Box, HStack, Input, Button } from "@chakra-ui/react";
+import { innerToBech32Address, bech32ToInner } from "../../utils/math/bech32";
+
+export default function Utils() {
+  const [innerAddress, setInnerAddress] = useState("");
+  const [bech32Address, setBech32Address] = useState("");
+  const [innerToBech32Output, setInnerToBech32Output] = useState("");
+  const [bech32ToInnerOutput, setBech32ToInnerOutput] = useState("");
+
+  const handleInnerToBech32 = () => {
+    const bech32 = innerToBech32Address(innerAddress, "plpid");
+    setInnerToBech32Output(bech32);
+  };
+
+  const handleBech32ToInner = () => {
+    const inner = bech32ToInner(bech32Address);
+    setBech32ToInnerOutput(inner);
+  };
+
+  return (
+    <Layout pageTitle="Utils">
+      <Center height="100vh">
+        <VStack spacing={4}>
+          <HStack spacing={2}>
+            <Input
+              placeholder="Enter B64 encoded Inner String"
+              value={innerAddress}
+              onChange={(e) => setInnerAddress(e.target.value)}
+              width={"40em"}
+            />
+            <Button
+              colorScheme="purple"
+              onClick={handleInnerToBech32}
+              width={"20em"}
+            >
+              Convert to Bech32
+            </Button>
+          </HStack>
+          {innerToBech32Output && <Text>Bech32: {innerToBech32Output}</Text>}
+          <VStack paddingBottom={"5em"}/>
+          <HStack spacing={2}>
+            <Input
+              placeholder="Enter Bech32 Address"
+              value={bech32Address}
+              onChange={(e) => setBech32Address(e.target.value)}
+              width={"40em"}
+            />
+            <Button
+              colorScheme="purple"
+              onClick={handleBech32ToInner}
+              width={"20em"}
+            >
+              Convert to B64 Inner
+            </Button>
+          </HStack>
+          {bech32ToInnerOutput && <Text>Inner: {bech32ToInnerOutput}</Text>}
+        </VStack>
+      </Center>
+    </Layout>
+  );
+}

src/utils/math/bech32.ts

@@ -0,0 +1,15 @@
+import { bech32m } from "bech32";
+import { uint8ArrayToBase64, base64ToUint8Array } from "./base64";
+
+export const innerToBech32Address = (inner: string, prefix: string): string => {
+  return bech32m.encode(prefix, bech32m.toWords(base64ToUint8Array(inner)));
+};
+
+export const bech32ToInner = (addr: string): string => {
+  const decodeAddress = bech32m.decode(
+    addr,
+  );
+  return uint8ArrayToBase64(
+    new Uint8Array(bech32m.fromWords(decodeAddress.words))
+  );
+};