cerc-io/testnet-onboarding-app
17
0
Fork 2
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

[WIP] Replace cosmos_address with laconic_address #34

Draft
prathamesh wants to merge 2 commits from deep-stack/testnet-onboarding-app:iv-rename-cosmos-laconic into main
pull from: deep-stack/testnet-onboarding-app:iv-rename-cosmos-laconic
merge into: cerc-io:main
Conversation 0 Commits 2 Files Changed 9 +56 -56
9 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,5 +1,5 @@
# testnet-onboarding-app # 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 ## Setup for testnet-onboarding-app

2
package.json
View File

@ -3,7 +3,7 @@
"version": "0.1.2", "version": "0.1.2",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@cerc-io/registry-sdk": "^0.2.5", "@cerc-io/registry-sdk": "^0.2.6",
"@cosmjs/encoding": "^0.32.4", "@cosmjs/encoding": "^0.32.4",
"@cosmjs/proto-signing": "^0.32.4", "@cosmjs/proto-signing": "^0.32.4",
"@cosmjs/stargate": "^0.32.4", "@cosmjs/stargate": "^0.32.4",

4
src/App.tsx
View File

@ -3,7 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import ConnectWallet from "./pages/ConnectWallet"; import ConnectWallet from "./pages/ConnectWallet";
import SignWithNitroKey from "./pages/SignWithNitroKey"; import SignWithNitroKey from "./pages/SignWithNitroKey";
import SignWithCosmos from "./pages/SignWithCosmos"; import SignWithLaconic from "./pages/SignWithLaconic";
import PageNotFound from "./pages/PageNotFound"; import PageNotFound from "./pages/PageNotFound";
import OnboardingSuccess from "./pages/OnboardingSuccess"; import OnboardingSuccess from "./pages/OnboardingSuccess";
import SignPageLayout from "./layout/SignPageLayout"; import SignPageLayout from "./layout/SignPageLayout";
@ -111,7 +111,7 @@ function App() {
path="/user-verification" path="/user-verification"
element={<UserVerification />} element={<UserVerification />}
/> />
<Route path="/sign-with-cosmos" element={<SignWithCosmos />} /> <Route path="/sign-with-laconic" element={<SignWithLaconic />} />
<Route <Route
path="/onboarding-success" path="/onboarding-success"
element={<OnboardingSuccess />} element={<OnboardingSuccess />}

22
src/pages/OnboardingSuccess.tsx
View File

@ -21,8 +21,8 @@ const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);
const OnboardingSuccess = () => { const OnboardingSuccess = () => {
const location = useLocation(); const location = useLocation();
const { cosmosAddress } = location.state as { const { laconicAddress } = location.state as {
cosmosAddress?: string; laconicAddress?: string;
}; };
const [participant, setParticipant] = useState<Participant>(); const [participant, setParticipant] = useState<Participant>();
@ -36,14 +36,14 @@ const OnboardingSuccess = () => {
useEffect(() => { useEffect(() => {
const fetchParticipants = async () => { const fetchParticipants = async () => {
try { try {
if (!cosmosAddress) { if (!laconicAddress) {
enqueueSnackbar("Laconic address is not provided", { enqueueSnackbar("Laconic address is not provided", {
variant: "error", variant: "error",
}); });
return; return;
} }
const participant: Participant = const participant: Participant =
await registry.getParticipantByAddress(cosmosAddress); await registry.getParticipantByAddress(laconicAddress);
if (!participant) { if (!participant) {
enqueueSnackbar("Participant not found", { variant: "error" }); enqueueSnackbar("Participant not found", { variant: "error" });
return; return;
@ -58,7 +58,7 @@ const OnboardingSuccess = () => {
}; };
fetchParticipants(); fetchParticipants();
}, [cosmosAddress]); }, [laconicAddress]);
useEffect(() => { useEffect(() => {
const getToken = async (userId: string) => { const getToken = async (userId: string) => {
@ -67,13 +67,13 @@ const OnboardingSuccess = () => {
setLoading(false); setLoading(false);
}; };
if (cosmosAddress && ENABLE_KYC) { if (laconicAddress && ENABLE_KYC) {
getToken(cosmosAddress).catch((error) => { getToken(laconicAddress).catch((error) => {
console.error(error); console.error(error);
alert("Failed to fetch token"); alert("Failed to fetch token");
}); });
} }
}, [cosmosAddress]); }, [laconicAddress]);
return ( return (
<> <>
@ -92,7 +92,7 @@ const OnboardingSuccess = () => {
<CodeBlock> <CodeBlock>
{participant && ( {participant && (
<div> <div>
Laconic Address: {participant.cosmosAddress} <br /> Laconic Address: {participant.laconicAddress} <br />
Nitro Address: {participant.nitroAddress} <br /> Nitro Address: {participant.nitroAddress} <br />
Role: {participant.role} <br /> Role: {participant.role} <br />
KYC ID: {participant.kycId} <br /> KYC ID: {participant.kycId} <br />
@ -103,11 +103,11 @@ const OnboardingSuccess = () => {
{ENABLE_KYC ? ( {ENABLE_KYC ? (
<Box> <Box>
<Typography variant="h5">KYC Status</Typography> <Typography variant="h5">KYC Status</Typography>
{!loading && token && cosmosAddress && ( {!loading && token && laconicAddress && (
<SumsubWebSdk <SumsubWebSdk
accessToken={token} accessToken={token}
expirationHandler={getAccessTokenExpirationHandler( expirationHandler={getAccessTokenExpirationHandler(
cosmosAddress, laconicAddress,
)} )}
config={config} config={config}
options={options} options={options}

28
src/pages/SignWithCosmos.tsx → src/pages/SignWithLaconic.tsx
View File

@ -16,7 +16,7 @@ import { HASHED_SUBSCRIBER_ID_KEY } from "../constants";
import { Layout } from "../layout/Layout"; import { Layout } from "../layout/Layout";
import { CodeBlock } from "../components/CodeBlock"; import { CodeBlock } from "../components/CodeBlock";
const SignWithCosmos = () => { const SignWithLaconic = () => {
const { session, signClient } = useWalletConnectContext(); const { session, signClient } = useWalletConnectContext();
const location = useLocation(); const location = useLocation();
@ -30,21 +30,21 @@ const SignWithCosmos = () => {
const { const {
message: innerMessage, message: innerMessage,
cosmosAddress, laconicAddress,
receivedEthSig: ethSignature, receivedEthSig: ethSignature,
} = location.state as { } = location.state as {
message?: { message?: {
msg: string; msg: string;
address: string; address: string;
}; };
cosmosAddress?: string; laconicAddress?: string;
receivedEthSig?: string; receivedEthSig?: string;
}; };
const ethAddress = innerMessage!.address; const ethAddress = innerMessage!.address;
const subscriberIdHash = localStorage.getItem(HASHED_SUBSCRIBER_ID_KEY); const subscriberIdHash = localStorage.getItem(HASHED_SUBSCRIBER_ID_KEY);
const createCosmosClient = useCallback(async (endpoint: string) => { const createLaconicClient = useCallback(async (endpoint: string) => {
return await StargateClient.connect(endpoint); return await StargateClient.connect(endpoint);
}, []); }, []);
@ -53,14 +53,14 @@ const SignWithCosmos = () => {
return { return {
typeUrl: typeUrlMsgOnboardParticipant, typeUrl: typeUrlMsgOnboardParticipant,
value: { value: {
participant: cosmosAddress!, participant: laconicAddress!,
ethPayload: innerMessage, ethPayload: innerMessage,
ethSignature: ethSignature!, ethSignature: ethSignature!,
kycId: subscriberIdHash!, kycId: subscriberIdHash!,
role, role,
}, },
}; };
}, [cosmosAddress, innerMessage, ethSignature, subscriberIdHash, role]); }, [laconicAddress, innerMessage, ethSignature, subscriberIdHash, role]);
const handleTokenRequest = async () => { const handleTokenRequest = async () => {
try { try {
@ -73,7 +73,7 @@ const SignWithCosmos = () => {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
address: cosmosAddress, address: laconicAddress,
}), }),
}, },
); );
@ -115,7 +115,7 @@ const SignWithCosmos = () => {
variant: "info", variant: "info",
}); });
const params = { transactionMessage, signer: cosmosAddress }; const params = { transactionMessage, signer: laconicAddress };
const responseFromWallet = await signClient!.request<{ const responseFromWallet = await signClient!.request<{
code: number; code: number;
}>({ }>({
@ -131,7 +131,7 @@ const SignWithCosmos = () => {
} else { } else {
navigate("/onboarding-success", { navigate("/onboarding-success", {
state: { state: {
cosmosAddress, laconicAddress,
}, },
}); });
} }
@ -145,11 +145,11 @@ const SignWithCosmos = () => {
const getBalances = useCallback(async () => { const getBalances = useCallback(async () => {
try { try {
const cosmosClient = await createCosmosClient( const cosmosClient = await createLaconicClient(
process.env.REACT_APP_LACONICD_RPC_ENDPOINT!, process.env.REACT_APP_LACONICD_RPC_ENDPOINT!,
); );
const balance = await cosmosClient.getBalance( const balance = await cosmosClient.getBalance(
cosmosAddress!, laconicAddress!,
process.env.REACT_APP_LACONICD_DENOM!, process.env.REACT_APP_LACONICD_DENOM!,
); );
setBalance(balance.amount); setBalance(balance.amount);
@ -157,7 +157,7 @@ const SignWithCosmos = () => {
console.error("Error fetching balance:", error); console.error("Error fetching balance:", error);
throw error; throw error;
} }
}, [cosmosAddress, createCosmosClient]); }, [laconicAddress, createLaconicClient]);
useEffect(() => { useEffect(() => {
getBalances(); getBalances();
@ -179,7 +179,7 @@ const SignWithCosmos = () => {
<Layout title="Send transaction to chain" noBackButton> <Layout title="Send transaction to chain" noBackButton>
<Typography>Laconic Account:</Typography> <Typography>Laconic Account:</Typography>
<Box sx={{ backgroundColor: "#29292E", p: 2, borderRadius: 1, mb: 2 }}> <Box sx={{ backgroundColor: "#29292E", p: 2, borderRadius: 1, mb: 2 }}>
<Typography variant="body1">Address: {cosmosAddress}</Typography> <Typography variant="body1">Address: {laconicAddress}</Typography>
<Typography variant="body1"> <Typography variant="body1">
Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM} Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}
</Typography> </Typography>
@ -219,4 +219,4 @@ const SignWithCosmos = () => {
); );
}; };
export default SignWithCosmos; export default SignWithLaconic;

14
src/pages/SignWithNitroKey.tsx
View File

@ -33,7 +33,7 @@ const SignWithNitroKey = () => {
const [ethAddress, setEthAddress] = useState(""); const [ethAddress, setEthAddress] = useState("");
const [ethSignature, setEthSignature] = useState(""); const [ethSignature, setEthSignature] = useState("");
const [cosmosAddress, setCosmosAddress] = useState(""); const [laconicAddress, setLaconicAddress] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -84,15 +84,15 @@ const SignWithNitroKey = () => {
navigate("/user-verification", { navigate("/user-verification", {
state: { state: {
message, message,
cosmosAddress, laconicAddress,
receivedEthSig, receivedEthSig,
}, },
}); });
} else { } else {
navigate("/sign-with-cosmos", { navigate("/sign-with-laconic", {
state: { state: {
message, message,
cosmosAddress, laconicAddress,
receivedEthSig, receivedEthSig,
}, },
}); });
@ -113,9 +113,9 @@ const SignWithNitroKey = () => {
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={cosmosAddress} value={laconicAddress}
onChange={(e: any) => { onChange={(e: any) => {
setCosmosAddress(e.target.value); setLaconicAddress(e.target.value);
}} }}
style={{ maxWidth: "600px", display: "block" }} style={{ maxWidth: "600px", display: "block" }}
> >
@ -142,7 +142,7 @@ const SignWithNitroKey = () => {
))} ))}
</Select> </Select>
{Boolean(ethAddress) && Boolean(cosmosAddress) && ( {Boolean(ethAddress) && Boolean(laconicAddress) && (
<CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock> <CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock>
)} )}
<Box> <Box>

12
src/pages/UserVerification.tsx
View File

@ -18,13 +18,13 @@ const UserVerification = () => {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const {message, cosmosAddress, receivedEthSig} = location.state as { const {message, laconicAddress, receivedEthSig} = location.state as {
message?: string; message?: string;
cosmosAddress?: string; laconicAddress?: string;
receivedEthSig?: string; receivedEthSig?: string;
}; };
const userId = cosmosAddress; const userId = laconicAddress;
useEffect(() => { useEffect(() => {
const getToken = async (userId: string) => { const getToken = async (userId: string) => {
@ -46,15 +46,15 @@ const UserVerification = () => {
if (applicationSubmitted && kycId !== '') { if (applicationSubmitted && kycId !== '') {
const kycIdHash = ethers.utils.sha256(ethers.utils.toUtf8Bytes(kycId)); const kycIdHash = ethers.utils.sha256(ethers.utils.toUtf8Bytes(kycId));
navigate("/sign-with-cosmos", { navigate("/sign-with-laconic", {
state: { state: {
message, message,
cosmosAddress, laconicAddress,
receivedEthSig, receivedEthSig,
kycIdHash kycIdHash
}}); }});
} }
}, [applicationSubmitted, kycId, navigate, cosmosAddress, message, receivedEthSig]); }, [applicationSubmitted, kycId, navigate, laconicAddress, message, receivedEthSig]);
const messageHandler: MessageHandler = (event, payload) => { const messageHandler: MessageHandler = (event, payload) => {
console.log('sumsubEvent:', event, payload); console.log('sumsubEvent:', event, payload);

26
src/pages/Validator.tsx
View File

@ -25,7 +25,7 @@ const Validator = () => {
const { session, signClient, isSessionLoading } = useWalletConnectContext(); const { session, signClient, isSessionLoading } = useWalletConnectContext();
const navigate = useNavigate(); const navigate = useNavigate();
const [cosmosAddress, setCosmosAddress] = useState(""); const [laconicAddress, setLaconicAddress] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [moniker, setMoniker] = useState(""); const [moniker, setMoniker] = useState("");
const [pubKey, setPubKey] = useState(""); const [pubKey, setPubKey] = useState("");
@ -43,7 +43,7 @@ const Validator = () => {
}, [session, navigate, isSessionLoading]); }, [session, navigate, isSessionLoading]);
useEffect(() => { useEffect(() => {
if (!cosmosAddress) { if (!laconicAddress) {
setParticipant(null); setParticipant(null);
return; return;
} }
@ -55,7 +55,7 @@ const Validator = () => {
try { try {
const fetchedParticipant = const fetchedParticipant =
await registry.getParticipantByAddress(cosmosAddress); await registry.getParticipantByAddress(laconicAddress);
if (fetchedParticipant) { if (fetchedParticipant) {
setParticipant(fetchedParticipant); setParticipant(fetchedParticipant);
} else { } else {
@ -69,7 +69,7 @@ const Validator = () => {
}; };
fetchParticipant(); fetchParticipant();
}, [cosmosAddress]); }, [laconicAddress]);
const isMonikerValid = useMemo(() => moniker.trim().length > 0, [moniker]); const isMonikerValid = useMemo(() => moniker.trim().length > 0, [moniker]);
const isPubKeyValid = useMemo(() => pubKey.length === 44, [pubKey]); const isPubKeyValid = useMemo(() => pubKey.length === 44, [pubKey]);
@ -96,15 +96,15 @@ const Validator = () => {
minSelfDelegation: "1", minSelfDelegation: "1",
delegatorAddress: "", delegatorAddress: "",
validatorAddress: validatorAddress:
cosmosAddress && laconicAddress &&
toBech32("laconicvaloper", fromBech32(cosmosAddress).data), toBech32("laconicvaloper", fromBech32(laconicAddress).data),
pubkey: encodedPubKey, pubkey: encodedPubKey,
value: { value: {
amount: process.env.REACT_APP_STAKING_AMOUNT!, amount: process.env.REACT_APP_STAKING_AMOUNT!,
denom: process.env.REACT_APP_LACONICD_DENOM!, denom: process.env.REACT_APP_LACONICD_DENOM!,
}, },
}; };
}, [cosmosAddress, pubKey, moniker]); }, [laconicAddress, pubKey, moniker]);
const msgCreateValidatorEncodeObject: EncodeObject = { const msgCreateValidatorEncodeObject: EncodeObject = {
typeUrl: "/cosmos.staking.v1beta1.MsgCreateValidator", typeUrl: "/cosmos.staking.v1beta1.MsgCreateValidator",
@ -129,7 +129,7 @@ const Validator = () => {
try { try {
const params = { const params = {
transactionMessage: msgCreateValidatorEncodeObject, transactionMessage: msgCreateValidatorEncodeObject,
signer: cosmosAddress, signer: laconicAddress,
}; };
const response = await signClient!.request<{ code: number }>({ const response = await signClient!.request<{ code: number }>({
topic: session!.topic, topic: session!.topic,
@ -167,9 +167,9 @@ const Validator = () => {
<Typography variant="body1">Select Laconic account:</Typography> <Typography variant="body1">Select Laconic account:</Typography>
<Select <Select
sx={{ marginBottom: 2 }} sx={{ marginBottom: 2 }}
id="cosmos-address-select" id="laconic-address-select"
value={cosmosAddress} value={laconicAddress}
onChange={(e) => setCosmosAddress(e.target.value)} onChange={(e) => setLaconicAddress(e.target.value)}
style={{ maxWidth: "600px", display: "block" }} style={{ maxWidth: "600px", display: "block" }}
> >
{session?.namespaces.cosmos.accounts.map((address, index) => ( {session?.namespaces.cosmos.accounts.map((address, index) => (
@ -179,7 +179,7 @@ const Validator = () => {
))} ))}
</Select> </Select>
{Boolean(cosmosAddress) && ( {Boolean(laconicAddress) && (
<> <>
{participant ? ( {participant ? (
<Typography>Onboarded participant</Typography> <Typography>Onboarded participant</Typography>
@ -189,7 +189,7 @@ const Validator = () => {
{participant && ( {participant && (
<CodeBlock> <CodeBlock>
Laconic Address: {participant.cosmosAddress} <br /> Laconic Address: {participant.laconicAddress} <br />
Nitro Address: {participant.nitroAddress} <br /> Nitro Address: {participant.nitroAddress} <br />
Role: {participant.role} <br /> Role: {participant.role} <br />
KYC ID: {participant.kycId} <br /> KYC ID: {participant.kycId} <br />

2
src/types.ts
View File

@ -1,5 +1,5 @@
export interface Participant { export interface Participant {
cosmosAddress: string; laconicAddress: string;
nitroAddress: string; nitroAddress: string;
role: string; role: string;
kycId: string; kycId: string;