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 +55 -55
8 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5774c7b32d - Show all commits

2
README.md
View File

@ -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

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 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";
@ -111,7 +111,7 @@ function App() {
path="/user-verification"
element={<UserVerification />}
/>
<Route path="/sign-with-cosmos" element={<SignWithCosmos />} />
<Route path="/sign-with-laconic" element={<SignWithLaconic />} />
<Route
path="/onboarding-success"
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 location = useLocation();
const { cosmosAddress } = location.state as {
cosmosAddress?: string;
const { laconicAddress } = location.state as {
laconicAddress?: string;
};
const [participant, setParticipant] = useState<Participant>();
@ -36,14 +36,14 @@ const OnboardingSuccess = () => {
useEffect(() => {
const fetchParticipants = async () => {
try {
if (!cosmosAddress) {
if (!laconicAddress) {
enqueueSnackbar("Laconic address is not provided", {
variant: "error",
});
return;
}
const participant: Participant =
await registry.getParticipantByAddress(cosmosAddress);
await registry.getParticipantByAddress(laconicAddress);
if (!participant) {
enqueueSnackbar("Participant not found", { variant: "error" });
return;
@ -58,7 +58,7 @@ const OnboardingSuccess = () => {
};
fetchParticipants();
}, [cosmosAddress]);
}, [laconicAddress]);
useEffect(() => {
const getToken = async (userId: string) => {
@ -67,13 +67,13 @@ const OnboardingSuccess = () => {
setLoading(false);
};
if (cosmosAddress && ENABLE_KYC) {
getToken(cosmosAddress).catch((error) => {
if (laconicAddress && ENABLE_KYC) {
getToken(laconicAddress).catch((error) => {
console.error(error);
alert("Failed to fetch token");
});
}
}, [cosmosAddress]);
}, [laconicAddress]);
return (
<>
@ -92,7 +92,7 @@ const OnboardingSuccess = () => {
<CodeBlock>
{participant && (
<div>
Laconic Address: {participant.cosmosAddress} <br />
Laconic Address: {participant.laconicAddress} <br />
Nitro Address: {participant.nitroAddress} <br />
Role: {participant.role} <br />
KYC ID: {participant.kycId} <br />
@ -103,11 +103,11 @@ const OnboardingSuccess = () => {
{ENABLE_KYC ? (
<Box>
<Typography variant="h5">KYC Status</Typography>
{!loading && token && cosmosAddress && (
{!loading && token && laconicAddress && (
<SumsubWebSdk
accessToken={token}
expirationHandler={getAccessTokenExpirationHandler(
cosmosAddress,
laconicAddress,
)}
config={config}
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 { CodeBlock } from "../components/CodeBlock";
const SignWithCosmos = () => {
const SignWithLaconic = () => {
const { session, signClient } = useWalletConnectContext();
const location = useLocation();
@ -30,21 +30,21 @@ const SignWithCosmos = () => {
const {
message: innerMessage,
cosmosAddress,
laconicAddress,
receivedEthSig: ethSignature,
} = location.state as {
message?: {
msg: string;
address: string;
};
cosmosAddress?: string;
laconicAddress?: string;
receivedEthSig?: string;
};
const ethAddress = innerMessage!.address;
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);
}, []);
@ -53,14 +53,14 @@ const SignWithCosmos = () => {
return {
typeUrl: typeUrlMsgOnboardParticipant,
value: {
participant: cosmosAddress!,
participant: laconicAddress!,
ethPayload: innerMessage,
ethSignature: ethSignature!,
kycId: subscriberIdHash!,
role,
},
};
}, [cosmosAddress, innerMessage, ethSignature, subscriberIdHash, role]);
}, [laconicAddress, innerMessage, ethSignature, subscriberIdHash, role]);
const handleTokenRequest = async () => {
try {
@ -73,7 +73,7 @@ const SignWithCosmos = () => {
"Content-Type": "application/json",
},
body: JSON.stringify({
address: cosmosAddress,
address: laconicAddress,
}),
},
);
@ -115,7 +115,7 @@ const SignWithCosmos = () => {
variant: "info",
});
const params = { transactionMessage, signer: cosmosAddress };
const params = { transactionMessage, signer: laconicAddress };
const responseFromWallet = await signClient!.request<{
code: number;
}>({
@ -131,7 +131,7 @@ const SignWithCosmos = () => {
} else {
navigate("/onboarding-success", {
state: {
cosmosAddress,
laconicAddress,
},
});
}
@ -145,11 +145,11 @@ const SignWithCosmos = () => {
const getBalances = useCallback(async () => {
try {
const cosmosClient = await createCosmosClient(
const cosmosClient = await createLaconicClient(
process.env.REACT_APP_LACONICD_RPC_ENDPOINT!,
);
const balance = await cosmosClient.getBalance(
cosmosAddress!,
laconicAddress!,
process.env.REACT_APP_LACONICD_DENOM!,
);
setBalance(balance.amount);
@ -157,7 +157,7 @@ const SignWithCosmos = () => {
console.error("Error fetching balance:", error);
throw error;
}
}, [cosmosAddress, createCosmosClient]);
}, [laconicAddress, createLaconicClient]);
useEffect(() => {
getBalances();
@ -179,7 +179,7 @@ const SignWithCosmos = () => {
<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: {cosmosAddress}</Typography>
<Typography variant="body1">Address: {laconicAddress}</Typography>
<Typography variant="body1">
Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}
</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 [ethSignature, setEthSignature] = useState("");
const [cosmosAddress, setCosmosAddress] = useState("");
const [laconicAddress, setLaconicAddress] = useState("");
const [isLoading, setIsLoading] = useState(false);
@ -84,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,
},
});
@ -113,9 +113,9 @@ const SignWithNitroKey = () => {
<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" }}
>
@ -142,7 +142,7 @@ const SignWithNitroKey = () => {
))}
</Select>
{Boolean(ethAddress) && Boolean(cosmosAddress) && (
{Boolean(ethAddress) && Boolean(laconicAddress) && (
<CodeBlock>{canonicalStringify(message, null, 2)} </CodeBlock>
)}
<Box>

12
src/pages/UserVerification.tsx
View File

@ -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);

26
src/pages/Validator.tsx
View File

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

2
src/types.ts
View File

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