forked from LaconicNetwork/icns-frontend
461 lines
12 KiB
TypeScript
461 lines
12 KiB
TypeScript
// React
|
|
import { useEffect, useState } from "react";
|
|
|
|
// Types
|
|
import {
|
|
ChainItemType,
|
|
IcnsVerificationResponse,
|
|
RegisteredAddresses,
|
|
TwitterAuthInfoResponse,
|
|
TwitterProfileType,
|
|
} from "../../types";
|
|
import { request } from "../../utils/url";
|
|
|
|
// Styles
|
|
import styled from "styled-components";
|
|
import color from "../../styles/color";
|
|
|
|
// Components
|
|
import { Logo } from "../../components/logo";
|
|
import { SkeletonChainList } from "../../components/skeleton";
|
|
|
|
import { PrimaryButton } from "../../components/primary-button";
|
|
import { TwitterProfile } from "../../components/twitter-profile";
|
|
import { ChainList } from "../../components/chain-list";
|
|
import { useRouter } from "next/router";
|
|
import { ContractFee } from "../../constants/wallet";
|
|
import {
|
|
getKeplrFromWindow,
|
|
KeplrWallet,
|
|
makeCosmwasmExecMsg,
|
|
sendMsgs,
|
|
simulateMsgs,
|
|
} from "../../wallets";
|
|
import { ChainIdHelper } from "@keplr-wallet/cosmos";
|
|
|
|
import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg";
|
|
import { AllChainsItem } from "../../components/chain-list/all-chains-item";
|
|
import { SearchInput } from "../../components/search-input";
|
|
import {
|
|
MainChainId,
|
|
REGISTRAR_ADDRESS,
|
|
RESOLVER_ADDRESS,
|
|
REST_URL,
|
|
} from "../../constants/icns";
|
|
|
|
import {
|
|
fetchTwitterInfo,
|
|
queryAddressesFromTwitterName,
|
|
queryRegisteredTwitterId,
|
|
} from "../../repository";
|
|
|
|
export default function VerificationPage() {
|
|
const router = useRouter();
|
|
const [twitterAuthInfo, setTwitterAuthInfo] = useState<TwitterProfileType>();
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [wallet, setWallet] = useState<KeplrWallet>();
|
|
const [allChains, setAllChains] = useState<ChainItemType>();
|
|
const [chainList, setChainList] = useState<ChainItemType[]>([]);
|
|
const [registeredAddressList, setRegisteredAddressList] = useState<string[]>(
|
|
[],
|
|
);
|
|
const [checkedItems, setCheckedItems] = useState(new Set());
|
|
const [allChecked, setAllChecked] = useState(false);
|
|
const [searchValue, setSearchValue] = useState("");
|
|
|
|
const fetchUrlQueryParameter = (): { state: string; code: string } => {
|
|
// Twitter state, auth code check
|
|
const [, state, code] =
|
|
window.location.search.match(
|
|
/^(?=.*state=([^&]+)|)(?=.*code=([^&]+)|).+$/,
|
|
) || [];
|
|
|
|
return {
|
|
state,
|
|
code,
|
|
};
|
|
};
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
if (window.location.search) {
|
|
// Twitter Login Error Check
|
|
if (window.location.search.match("error")) {
|
|
await router.push("/");
|
|
return;
|
|
}
|
|
|
|
const { state, code } = fetchUrlQueryParameter();
|
|
|
|
try {
|
|
// Initialize Wallet
|
|
await initWallet();
|
|
|
|
// Fetch Twitter Profile
|
|
const twitterInfo = await fetchTwitterInfo(state, code);
|
|
|
|
const registeredQueryResponse = await queryRegisteredTwitterId(
|
|
twitterInfo.id,
|
|
);
|
|
|
|
setTwitterAuthInfo({
|
|
...twitterInfo,
|
|
isRegistered: "data" in registeredQueryResponse,
|
|
});
|
|
|
|
if ("data" in registeredQueryResponse) {
|
|
const addressesQueryResponse = await queryAddressesFromTwitterName(
|
|
registeredQueryResponse.data.name,
|
|
);
|
|
|
|
setRegisteredAddressList(
|
|
addressesQueryResponse.data.addresses.map(
|
|
(address) => address.address,
|
|
),
|
|
);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
init();
|
|
}, []);
|
|
|
|
const initWallet = async () => {
|
|
const keplr = await getKeplrFromWindow();
|
|
|
|
if (keplr) {
|
|
const keplrWallet = new KeplrWallet(keplr);
|
|
setWallet(keplrWallet);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// After Wallet Initialize
|
|
if (wallet) {
|
|
fetchChainList();
|
|
}
|
|
}, [wallet]);
|
|
|
|
useEffect(() => {
|
|
const filteredChainList = chainList.filter((chain) => {
|
|
return registeredAddressList.includes(chain.address);
|
|
});
|
|
|
|
setCheckedItems(new Set(filteredChainList));
|
|
}, [registeredAddressList]);
|
|
|
|
const fetchChainList = async () => {
|
|
if (wallet) {
|
|
const chainIds = (await wallet.getChainInfosWithoutEndpoints()).map(
|
|
(c) => c.chainId,
|
|
);
|
|
const chainKeys = await Promise.all(
|
|
chainIds.map((chainId) => wallet.getKey(chainId)),
|
|
);
|
|
|
|
const chainInfos = (await wallet.getChainInfosWithoutEndpoints()).map(
|
|
(chainInfo) => {
|
|
return {
|
|
chainId: chainInfo.chainId,
|
|
chainName: chainInfo.chainName,
|
|
prefix: chainInfo.bech32Config.bech32PrefixAccAddr,
|
|
chainImageUrl: `https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/${
|
|
ChainIdHelper.parse(chainInfo.chainId).identifier
|
|
}/chain.png`,
|
|
};
|
|
},
|
|
);
|
|
|
|
const chainArray = [];
|
|
for (let i = 0; i < chainKeys.length; i++) {
|
|
chainArray.push({
|
|
address: chainKeys[i].bech32Address,
|
|
...chainInfos[i],
|
|
});
|
|
}
|
|
|
|
// remove duplicated item
|
|
const filteredChainList = chainArray.filter((nextChain, index, self) => {
|
|
return (
|
|
index ===
|
|
self.findIndex((prevChain) => {
|
|
const isDuplicated = prevChain.prefix === nextChain.prefix;
|
|
|
|
if (isDuplicated && prevChain.chainName !== nextChain.chainName) {
|
|
console.log(
|
|
`${nextChain.chainName} has been deleted due to a duplicate name with ${prevChain.chainName}`,
|
|
);
|
|
}
|
|
|
|
return isDuplicated;
|
|
})
|
|
);
|
|
});
|
|
|
|
setAllChains({
|
|
chainId: "all chains",
|
|
prefix: `all chains(${filteredChainList.length})`,
|
|
address: chainInfos.map((chainInfo) => chainInfo.chainName).join(", "),
|
|
chainImageUrl: AllChainsIcon,
|
|
});
|
|
|
|
setChainList(filteredChainList);
|
|
}
|
|
};
|
|
|
|
const verifyTwitterAccount = async (accessToken: string) => {
|
|
if (wallet) {
|
|
const key = await wallet.getKey(MainChainId);
|
|
|
|
return (
|
|
await request<IcnsVerificationResponse>("/api/icns-verification", {
|
|
method: "post",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
claimer: key.bech32Address,
|
|
authToken: accessToken,
|
|
}),
|
|
})
|
|
).verificationList;
|
|
}
|
|
};
|
|
|
|
const checkAdr36 = async () => {
|
|
if (twitterAuthInfo && wallet) {
|
|
const key = await wallet.getKey(MainChainId);
|
|
|
|
const chainIds = Array.from(checkedItems).map((chain) => {
|
|
return (chain as ChainItemType).chainId;
|
|
});
|
|
|
|
return await wallet.signICNSAdr36(
|
|
MainChainId,
|
|
RESOLVER_ADDRESS,
|
|
key.bech32Address,
|
|
twitterAuthInfo.username,
|
|
chainIds,
|
|
);
|
|
}
|
|
};
|
|
|
|
const onClickRegistration = async () => {
|
|
const { state, code } = fetchUrlQueryParameter();
|
|
const twitterInfo = await fetchTwitterInfo(state, code);
|
|
|
|
const adr36Infos = await checkAdr36();
|
|
|
|
const icnsVerificationList = await verifyTwitterAccount(
|
|
twitterInfo.accessToken,
|
|
);
|
|
|
|
if (wallet && icnsVerificationList && adr36Infos) {
|
|
const key = await wallet.getKey(MainChainId);
|
|
|
|
const registerMsg = makeCosmwasmExecMsg(
|
|
key.bech32Address,
|
|
REGISTRAR_ADDRESS,
|
|
{
|
|
claim: {
|
|
name: twitterInfo.username,
|
|
verifying_msg:
|
|
icnsVerificationList[0].status === "fulfilled"
|
|
? icnsVerificationList[0].value.data.verifying_msg
|
|
: "",
|
|
verifications: icnsVerificationList.map((verification) => {
|
|
if (verification.status === "fulfilled") {
|
|
return {
|
|
public_key: verification.value.data.public_key,
|
|
signature: verification.value.data.signature,
|
|
};
|
|
}
|
|
}),
|
|
},
|
|
},
|
|
[ContractFee],
|
|
);
|
|
|
|
const addressMsgs = adr36Infos.map((adr36Info) => {
|
|
return makeCosmwasmExecMsg(
|
|
key.bech32Address,
|
|
RESOLVER_ADDRESS,
|
|
{
|
|
set_record: {
|
|
name: twitterInfo.username,
|
|
bech32_prefix: adr36Info.bech32Prefix,
|
|
adr36_info: {
|
|
signer_bech32_address: adr36Info.bech32Address,
|
|
address_hash: adr36Info.addressHash,
|
|
pub_key: Buffer.from(adr36Info.pubKey).toString("base64"),
|
|
signature: Buffer.from(adr36Info.signature).toString("base64"),
|
|
signature_salt: adr36Info.signatureSalt.toString(),
|
|
},
|
|
},
|
|
},
|
|
[],
|
|
);
|
|
});
|
|
|
|
const aminoMsgs = twitterAuthInfo?.isRegistered
|
|
? []
|
|
: [registerMsg.amino];
|
|
const protoMsgs = twitterAuthInfo?.isRegistered
|
|
? []
|
|
: [registerMsg.proto];
|
|
|
|
for (const addressMsg of addressMsgs) {
|
|
aminoMsgs.push(addressMsg.amino);
|
|
protoMsgs.push(addressMsg.proto);
|
|
}
|
|
|
|
console.log(aminoMsgs);
|
|
|
|
const chainInfo = {
|
|
chainId: MainChainId,
|
|
rest: REST_URL,
|
|
};
|
|
|
|
const simulated = await simulateMsgs(
|
|
chainInfo,
|
|
key.bech32Address,
|
|
{
|
|
proto: protoMsgs,
|
|
},
|
|
{
|
|
amount: [],
|
|
},
|
|
);
|
|
|
|
const txHash = await sendMsgs(
|
|
wallet,
|
|
chainInfo,
|
|
key.bech32Address,
|
|
{
|
|
amino: aminoMsgs,
|
|
proto: protoMsgs,
|
|
},
|
|
{
|
|
amount: [],
|
|
gas: Math.floor(simulated.gasUsed * 1.5).toString(),
|
|
},
|
|
);
|
|
|
|
router.push({
|
|
pathname: "complete",
|
|
query: { txHash: Buffer.from(txHash).toString("hex") },
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container>
|
|
<Logo />
|
|
|
|
<MainContainer>
|
|
{isLoading ? (
|
|
<SkeletonChainList />
|
|
) : (
|
|
<ContentContainer>
|
|
<TwitterProfile twitterProfileInformation={twitterAuthInfo} />
|
|
|
|
<ChainListTitleContainer>
|
|
<ChainListTitle>Chain List</ChainListTitle>
|
|
<SearchInput
|
|
searchValue={searchValue}
|
|
setSearchValue={setSearchValue}
|
|
/>
|
|
</ChainListTitleContainer>
|
|
|
|
{allChains && !searchValue ? (
|
|
<AllChainsItem
|
|
allChecked={allChecked}
|
|
setAllChecked={setAllChecked}
|
|
chainItem={allChains}
|
|
/>
|
|
) : null}
|
|
|
|
<ChainList
|
|
allChecked={allChecked}
|
|
setAllChecked={setAllChecked}
|
|
chainList={chainList.filter(
|
|
(chain) =>
|
|
chain.chainId.includes(searchValue) ||
|
|
chain.address.includes(searchValue) ||
|
|
chain.prefix.includes(searchValue),
|
|
)}
|
|
checkedItems={checkedItems}
|
|
setCheckedItems={setCheckedItems}
|
|
/>
|
|
|
|
<ButtonContainer>
|
|
<PrimaryButton
|
|
disabled={checkedItems.size < 1}
|
|
onClick={onClickRegistration}
|
|
>
|
|
Register
|
|
</PrimaryButton>
|
|
</ButtonContainer>
|
|
</ContentContainer>
|
|
)}
|
|
</MainContainer>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
const Container = styled.div`
|
|
width: 100vw;
|
|
height: 100vh;
|
|
`;
|
|
|
|
const MainContainer = styled.div`
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
color: white;
|
|
`;
|
|
|
|
export const ContentContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
width: 40rem;
|
|
|
|
margin-top: 5rem;
|
|
`;
|
|
|
|
export const ButtonContainer = styled.div`
|
|
width: 12rem;
|
|
height: 4rem;
|
|
|
|
margin-top: 2rem;
|
|
`;
|
|
|
|
export const ChainListTitleContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
`;
|
|
|
|
const ChainListTitle = styled.div`
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
line-height: 1.9rem;
|
|
|
|
color: ${color.white};
|
|
`;
|