diff --git a/.env.development b/.env.development index c3859e76..9e9c0ccf 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,6 @@ VITE_ENV = development -VITE_NODE_TYPE="nexus" -VITE_TWITTER_CLIENT_ID = eGQtUDNsTjIxbktrVWdaUzRzbU86MTpjaQ -VITE_TWITTER_CALLBACK_URL = https://test.app.zklink.io/aggregation-parade +VITE_NODE_TYPE="nexus-goerli" +VITE_TWITTER_CLIENT_ID = QWpDMDlpX0VuZ0hEdUFDdEFTaUY6MTpjaQ +VITE_TWITTER_CALLBACK_URL = https://goerli.app.zklink.io/aggregation-parade +VITE_IS_VALID_TWITTER_ACCESS = 0 # 0: not valid, 1: valid diff --git a/.env.production b/.env.production index ea91cff8..e7fdbecf 100644 --- a/.env.production +++ b/.env.production @@ -2,6 +2,7 @@ VITE_ENV = production VITE_NODE_TYPE="nexus" VITE_TWITTER_CLIENT_ID = UWlzSnJfQlVzdzlNc1c3ckdpY0U6MTpjaQ,RThINUVuNm9XdGFKVUpvejU1bFU6MTpjaQ,eFVmRGpWTEtMbGxjUGE2Y09KdHM6MTpjaQ VITE_TWITTER_CALLBACK_URL = https://app.zklink.io/aggregation-parade +VITE_IS_VALID_TWITTER_ACCESS = 1 # 0: not valid, 1: valid # For: test.app.zklink.io # VITE_TWITTER_CLIENT_ID = eGQtUDNsTjIxbktrVWdaUzRzbU86MTpjaQ diff --git a/package-lock.json b/package-lock.json index d5f1bd5d..01a85970 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5895,8 +5895,6 @@ }, "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/napi-wasm/-/napi-wasm-1.1.0.tgz", - "integrity": "sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==", "inBundle": true, "license": "MIT" }, diff --git a/public/img/icon-wallet-white.svg b/public/img/icon-wallet-white.svg new file mode 100644 index 00000000..dc86de89 --- /dev/null +++ b/public/img/icon-wallet-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/img/navbar-bg.png b/public/img/navbar-bg.png new file mode 100644 index 00000000..7c1ae9b4 Binary files /dev/null and b/public/img/navbar-bg.png differ diff --git a/src/api/index.ts b/src/api/index.ts index 64e6fb52..996c86e2 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,4 +1,5 @@ import http from "@/utils/http"; +import qs from "qs"; type Response = { status: string; @@ -11,6 +12,7 @@ type Response = { export const BASE_URL_API = "/api"; export const BASE_URL_POINTS = "/points"; export const BASE_URL_TOKENS = "/tokens"; +export const BASE_URL_TWITTER = "/twitter"; export type BindInviteCodeWithAddressParams = { address: string; @@ -193,7 +195,7 @@ export type RegisterAccountParams = { address: string; code?: string | null; siganture: string; - accessToken: string; + accessToken?: string | null; chainId: string | number; txHash: string; }; @@ -209,3 +211,40 @@ export const registerAccount = ( ...data, }); }; + +export type AccessTokenParams = { + code: string; + grant_type: string; + client_id: string; + redirect_uri: string; + code_verifier: string; +}; +export type AccessTokenResponse = { + token_type: string; + expires_in: number; + access_token: string; + scope: string; +}; +export const getTwitterAccessToken = ( + params: AccessTokenParams +): Promise => + http.post("/twitter/2/oauth2/token", qs.stringify({ ...params }), { + headers: { "Content-Type": "application/x-www-form-urlencoded" }, + }); + +export type TwitterUserResponse = { + data: { + id: string; + name: string; + username: string; + }; +}; +export const getTwitterUser = ( + accessToken: string +): Promise => + http.get("/twitter/2/users/me", { + headers: { + // "Content-Type": "application/json", + Authorization: `Bearer ${accessToken}`, + }, + }); diff --git a/src/components/AssetsTable.tsx b/src/components/AssetsTable.tsx index b31f8cec..31deeebc 100644 --- a/src/components/AssetsTable.tsx +++ b/src/components/AssetsTable.tsx @@ -412,7 +412,7 @@ export default function AssetsTable(props: IAssetsTableProps) { return ( <> -
+
{assetTabList.map((item, index) => ( - + - + {(onClose) => ( <> Bridge diff --git a/src/components/Bridge.tsx b/src/components/Bridge.tsx index 3bcdf652..efced1b8 100644 --- a/src/components/Bridge.tsx +++ b/src/components/Bridge.tsx @@ -142,7 +142,6 @@ const Trans = styled.div` const Container = styled.div` background: #313841; - padding: 32px; border-radius: 12px; `; const SelectBox = styled.div` @@ -167,6 +166,15 @@ const SelectBox = styled.div` height: 38px; } } + .title { + color: #a0a5ad; + font-family: Satoshi; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 200% */ + letter-spacing: -0.5px; + } `; const LoyaltyBoostBox = styled.div` @@ -259,6 +267,7 @@ export default function Bridge(props: IBridgeComponentProps) { const [category, setCategory] = useState(AssetTypes[0].value); const [tokenFiltered, setTokenFiltered] = useState([]); const [bridgeTokenInited, setBridgeTokenInited] = useState(false); + const [openTooltip, setOpenTooltip] = useState(false); const dispatch = useDispatch(); @@ -578,8 +587,8 @@ export default function Bridge(props: IBridgeComponentProps) { return ( <> - - + +
From
- +
Nova Points @@ -707,7 +716,7 @@ export default function Bridge(props: IBridgeComponentProps) { content={ContentForMNTDeposit} isDisabled={actionBtnTooltipForMantleDisabeld} > - + */} + + + + + ) : ( + + )} +
+ {isFirstDeposit && showNoPointsTip && ( +
+ +

+ Should you wish to participate in the Aggregation Parade, the + minimum deposit value should be {minDepositValue} ETH. +

+
+ )} + + + +
+ From +
fromModal.onOpen()} + > + + {fromList[fromActive].label} + {fromModal.isOpen ? : } +
+
+
+

Assets

+
tokenModal.onOpen()} + > + + {tokenFiltered[tokenActive]?.symbol} + {tokenModal.isOpen ? : } +
+
+ +
+
+
Amount
+
+ Balance:{" "} + {tokenFiltered[tokenActive]?.formatedBalance} +
+
+
+ e.preventDefault()} + errorMessage="" + /> +
+
+
+
+ Nova Points + + + + +
+ 10x Boost +
+ {loyalPoints > 0 && ( + +

+ Thank you for your continued support of zkLink. As our + loyal user, we're delighted to offer you{" "} + {loyalPoints}{" "} + addtional Nova Points.{" "} +

+ + Learn more. + + + } + > + Loyalty Boost + + )} +
+
+ + {showNoPointsTip + ? 0 + : points < 0.01 && points > 0 + ? "< 0.01" + : points.toFixed(2)} + + {loyalPoints > 0 && ( +
+ + {loyalPoints}{" "} +
+ )} +
+
+ + {networkKey && NexusEstimateArrivalTimes[networkKey] && ( +
+ Estimated Time of Arrival + + ~ {NexusEstimateArrivalTimes[networkKey]} minutes + +
+ )} + {/*
+ Est.fee + 0.002 ETH +
*/} + +
+ {isConnected ? ( + + {/* */} + + + ) : ( + + ) : ( + + )} +
+ {isFirstDeposit && showNoPointsTip && ( +
+ +

+ Should you wish to participate in the Aggregation Parade, the + minimum deposit value should be {minDepositValue} ETH. +

+
+ )} + + {isFirstDeposit && address && txhashes[address]?.[0] && ( +
+ +
+ Click to verify your transaction. + +
+ + +
+ Latest tx hash +
+ +
+
+ item.rpcUrl === txhashes[address][0]?.rpcUrl + )?.icon + } + className="w-6 h-6 mr-1 rounded-full" + /> + + {formatTxHash(txhashes[address][0]?.txhash)} + +
+ +
+ +
+
+
+ //
+ //
+ // Latest tx hash: + // + // You can use this tx hash to verify in Aggregation Parade page + // + //
+ //
+ // item.rpcUrl === txhashes[address][0]?.rpcUrl + // )?.icon + // } + // className="w-6 h-6 mr-1 rounded-full" + // /> + // + // + // {formatTxHash(txhashes[address][0]?.txhash)} + // + // + // + //
+ //
+ )} + + + + From + + + {fromList.map((item, index) => ( + handleFrom(index)} + > +
+ + {item.label} +
+ + {index === fromActive && } + + ))} + + + + + + + + Choose Token + + + {/*
+ + } + /> +
*/} +

Category

+ setCategory(key as string)} + > + {AssetTypes.map((item) => ( + + ))} + +
+ {tokenFiltered.map((item, index) => ( + handeToken(index)} + > +
+ + {item?.symbol} +
+ + {item?.formatedBalance} + + ))} +
+ + + + + + + + +
Depositing
+
+ Please sign the transaction in your wallet. +
+ + + + + + + + + +
Transaction Submitted
+
+ Please allow a few minutes for your deposit to be confirmed on + zkLink Nova. +
+ + View in explorer + + + + + + + + + + +
Transaction Failed
+
{failMessage}
+
+ If you have any questions regarding this transaction, please{" "} + + contact us + {" "} + for help +
+ + + + + + ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 738535ed..93a81943 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -31,6 +31,7 @@ import { import { useDispatch, useSelector } from "react-redux"; import { useBridgeTx } from "@/hooks/useBridgeTx"; import { getInvite } from "@/api"; +import { FaBars, FaTimes } from "react-icons/fa"; const nodeType = import.meta.env.VITE_NODE_TYPE; const NavNet = styled.div` @@ -89,7 +90,7 @@ const LogoBox = styled.div` `; const ButtonText = styled.span` - color: #03d498; + // color: #03d498; font-family: Heebo; font-size: 1rem; font-style: normal; @@ -108,7 +109,7 @@ export default function Header() { isActiveUser, signatureAddress, inviteCode, - } = useSelector((store: { airdrop: airdropState }) => store.airdrop) + } = useSelector((store: { airdrop: airdropState }) => store.airdrop); const { getDepositL2TxHash } = useBridgeTx(); const dispatch = useDispatch(); @@ -216,7 +217,9 @@ export default function Header() { <> - {/* mobile toggle button */} - - {/* */} dispatch(setTwitterAccessToken(""))}> @@ -243,7 +240,7 @@ export default function Header() { }} > {/* zk.Link */} @@ -252,7 +249,7 @@ export default function Header() {
Mainnet Live
 - {/* */} + {/* */} - + Explorer @@ -373,7 +367,7 @@ export default function Header() { )} )} - + {/* @@ -381,7 +375,7 @@ export default function Header() { src="/img/icon-twitter.svg" className="w-[1.25rem] h-[1.25rem]" /> - + */} {address && !depositStatus && ( + {/* mobile toggle button */} + : } + /> { setIsMenuOpen(false); }} > - + Aggregation Parade @@ -436,13 +458,13 @@ export default function Header() { )} */} - + Leaderboard - + About - + Bridge @@ -454,10 +476,7 @@ export default function Header() { - + Explorer @@ -475,6 +494,35 @@ export default function Header() { */} + {/* Footer: nav links */} + diff --git a/src/components/TotalTvlCard.tsx b/src/components/TotalTvlCard.tsx index 0511417b..fb55cd84 100644 --- a/src/components/TotalTvlCard.tsx +++ b/src/components/TotalTvlCard.tsx @@ -6,7 +6,7 @@ import styled from "styled-components"; const TvlBox = styled.div` .tvl-num-item { // padding: 0 0.5rem; - line-height: 3.875rem; + // line-height: 3.875rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(15.800000190734863px); @@ -63,7 +63,7 @@ export default function TotalTvlCard() { {tvlArr.map((item, index) => ( diff --git a/src/components/VerifyTxHashModal.tsx b/src/components/VerifyTxHashModal.tsx index 6bf5fd09..299e871e 100644 --- a/src/components/VerifyTxHashModal.tsx +++ b/src/components/VerifyTxHashModal.tsx @@ -92,7 +92,7 @@ const VerifyTxHashModal = (props: IProps) => { isOpen={modal.isOpen} onOpenChange={modal.onOpenChange} > - + Verify you deposit diff --git a/src/constants/index.ts b/src/constants/index.ts index 63d185e4..80456e28 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -35,3 +35,5 @@ export const NexusEstimateArrivalTimes: Record = { export const NexusGoerliEstimateArrivalTimes = {}; export const IS_MAINNET = nodeType === "nexus"; + +export const TWEET_SHARE_TEXT = 'ZkLink Nova Campaign blablablablabla' \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 2b83dc5d..550088d7 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -16,16 +16,16 @@ const queryClient = new QueryClient(); // Create Web3Modal createWeb3Modal({ - featuredWalletIds: [ - // "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",rainbow - // "971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709", // okx wallet - "8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4", // binance web3 wallet - "c7708575a2c3c9e6a8ab493d56cdcc56748f03956051d021b8cd8d697d9a3fd2", // fox wallet - ], - excludeWalletIds: [ - "541d5dcd4ede02f3afaf75bf8e3e4c4f1fb09edb5fa6c4377ebf31c2785d9adf", // ronin wallet - ], - allWallets: "HIDE", + // featuredWalletIds: [ + // // "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",rainbow + // // "971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709", // okx wallet + // "8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4", // binance web3 wallet + // "c7708575a2c3c9e6a8ab493d56cdcc56748f03956051d021b8cd8d697d9a3fd2", // fox wallet + // ], + // excludeWalletIds: [ + // "541d5dcd4ede02f3afaf75bf8e3e4c4f1fb09edb5fa6c4377ebf31c2785d9adf", // ronin wallet + // ], + // allWallets: "HIDE", wagmiConfig, projectId, themeMode: "dark", diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx index 6283ed3e..7b105615 100644 --- a/src/pages/About/index.tsx +++ b/src/pages/About/index.tsx @@ -84,6 +84,12 @@ const BgBox = styled.div` background: url(), lightgray 50% / cover no-repeat; margin-right: 55px; } + + @media (max-width: 768px) { + .big { + font-size: 28px; + } + } `; const BannerText = styled.div` @@ -110,12 +116,18 @@ const BannerText = styled.div` text-transform: capitalize; white-space: nowrap; } + + @media (max-width: 768px) { + .text { + font-size: 26px; + } + } `; export default function About() { return ( -
+
diff --git a/src/pages/AggregationParade/SoftKYC.tsx b/src/pages/AggregationParade/SoftKYC.tsx index 9fb826e4..6395fa6a 100644 --- a/src/pages/AggregationParade/SoftKYC.tsx +++ b/src/pages/AggregationParade/SoftKYC.tsx @@ -1,6 +1,7 @@ import { checkInviteCode, getInvite, + getTwitterAccessToken, getTxByTxHash, registerAccount, } from "@/api"; @@ -15,15 +16,9 @@ import { setIsCheckedInviteCode, setSignature, setSignatureAddress, - setTwitter, } from "@/store/modules/airdrop"; import { CardBox, FooterTvlText } from "@/styles/common"; -import { - getProviderWithRpcUrl, - getRandomNumber, - postData, - showAccount, -} from "@/utils"; +import { getProviderWithRpcUrl, getRandomNumber, showAccount } from "@/utils"; import { Avatar, Button, @@ -39,7 +34,7 @@ import { } from "@nextui-org/react"; import { useWeb3Modal } from "@web3modal/wagmi/react"; import qs from "qs"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import toast from "react-hot-toast"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate, useSearchParams } from "react-router-dom"; @@ -52,16 +47,20 @@ import fromList, { import Loading from "@/components/Loading"; import { useVerifyStore } from "@/hooks/useVerifyTxHashSotre"; import { IS_MAINNET } from "@/constants"; +import Toast from "@/components/Toast"; -// const verifyFromList = [ -// ...fromList, -// IS_MAINNET ? NOVA_NETWORK : NOVA_GOERLI_NETWORK, -// ]; +const verifyFromList = [ + ...fromList, + IS_MAINNET ? NOVA_NETWORK : NOVA_GOERLI_NETWORK, +]; -const verifyFromList = [...fromList]; +// const verifyFromList = [...fromList]; const twitterClientId = import.meta.env.VITE_TWITTER_CLIENT_ID; const twitterCallbackURL = import.meta.env.VITE_TWITTER_CALLBACK_URL; const env = import.meta.env.VITE_ENV; +const isValidTwitterAccess = Boolean( + +import.meta.env.VITE_IS_VALID_TWITTER_ACCESS +); const BgBox = styled.div` position: relative; @@ -75,21 +74,79 @@ const BgBox = styled.div` background-repeat: no-repeat; background-size: cover; background-position: top; + @media (max-width: 768px) { + background: linear-gradient( + 0deg, + rgba(102, 154, 255, 0.56) 0%, + rgba(12, 14, 17, 0.56) 100% + ); + .carBox { + width: 100%; + flex-direction: column; + height: auto; + padding: 1.5rem; + .input-wrap { + width: 100%; + flex-direction: column; + } + .input-item { + max-width: 100%; + width: 100%; + } + .gradient-btn { + width: 100%; + } + .btn-default { + background: rgba(0, 0, 0, 0.4); + } + .stepItem { + display: flex; + } + .step-num { + position: relative; + padding-right: 1.5rem; + margin-right: 1.5rem; + &::after { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + content: ""; + width: 1px; + height: 5rem; + opacity: 0.48; + background: linear-gradient( + 180deg, + rgba(86, 88, 90, 0) 0%, + #85878b 48%, + rgba(183, 187, 192, 0) 100% + ); + } + } + } + } `; const TitleText = styled.h4` color: #c2e2ff; - text-align: center; + // text-align: center; font-family: Satoshi; font-size: 2.5rem; font-style: normal; font-weight: 900; line-height: 2.5rem; /* 100% */ letter-spacing: -0.03125rem; + @media (max-width: 768px) { + & { + font-size: 2rem; + line-height: 2rem; + margin-bottom: 1.5rem; + } + } `; const SubTitleText = styled.p` color: #c6d3dd; - text-align: center; + // text-align: center; font-family: Satoshi; font-size: 1rem; font-style: normal; @@ -170,6 +227,7 @@ export default function SoftKYC() { const [inviteCodeValue, setInviteCodeValue] = useState(inviteCode || ""); const [isInviteCodeLoading, setIsInviteCodeLoading] = useState(false); + const [twitterAuthCode, setTwitterAuthCode] = useState(""); const [twitterAccessToken, setTwitterAccessToken] = useState(""); const [twitterLoading, setTwitterLoading] = useState(false); const [selectedChainId, setSelectedChainId] = useState( @@ -231,7 +289,7 @@ export default function SoftKYC() { if (env === "production") { const clientIds = twitterClientId.split(","); - const widgetClientIds = new Array(37).fill(clientIds[0]); + const widgetClientIds = new Array(98).fill(clientIds[0]); const randomClientIds = clientIds.concat(widgetClientIds); const index = getRandomNumber(0, randomClientIds.length - 1); clientId = randomClientIds[index]; @@ -251,7 +309,8 @@ export default function SoftKYC() { redirect_uri: twitterCallbackURL, // client_id: "RTUyVmlpTzFjTFhWWVB4b2tyb0k6MTpjaQ", // redirect_uri: "http://localhost:3000/aggregation-parade", - scope: "tweet.read%20users.read%20follows.read%20follows.write", + scope: + "tweet.read%20tweet.write%20like.write%20users.read%20follows.read%20follows.write", state: "state", code_challenge: "challenge", code_challenge_method: "plain", @@ -262,6 +321,64 @@ export default function SoftKYC() { window.location.href = url.href; }; + const toastTwitterError = (text?: string) => { + console.error("Could not connect to Twitter. Try again."); + toast.error(text || "Could not connect to Twitter. Try again.", { + duration: 3000, + }); + setTwitterLoading(false); + }; + + const getTwitterUserFunc = async (code: string) => { + setTwitterLoading(true); + + const clientId = getTwitterClientId(); + const params = { + code, + grant_type: "authorization_code", + // client_id: "RTUyVmlpTzFjTFhWWVB4b2tyb0k6MTpjaQ", + // redirect_uri: "http://localhost:3000/aggregation-parade", + client_id: clientId, + redirect_uri: twitterCallbackURL, + code_verifier: "challenge", + }; + try { + const { access_token } = await getTwitterAccessToken(params); + console.log(!access_token, isValidTwitterAccess); + + if (access_token) { + setTwitterAccessToken(access_token); + /** + * Get twitter user info (if use) + * // const { data } = await getTwitterUser(access_token); + */ + return; + } + + if (isValidTwitterAccess && !access_token) { + toastTwitterError(); + } + } catch (error: any) { + console.error(error); + if (isValidTwitterAccess) { + toastTwitterError(); + } + } finally { + setTwitterAuthCode(code); + setTwitterLoading(false); + } + }; + + const [isCheckedTwitter, setIsCheckedTwitter] = useState(false); + + useEffect(() => { + setIsCheckedTwitter( + isValidTwitterAccess + ? Boolean(twitterAccessToken) + : Boolean(twitterAuthCode) + ); + }, [isValidTwitterAccess, twitterAuthCode, twitterAccessToken]); + const handleConnectAndSign = async () => { if (!isConnected || !address) { setIsHandleSign(true); @@ -289,6 +406,7 @@ export default function SoftKYC() { } ); }; + useEffect(() => { if (isConnected && isHandleSign) { handleConnectAndSign(); @@ -323,78 +441,6 @@ export default function SoftKYC() { })(); }, [depositTxHash]); - const toastTwitterError = (text?: string) => { - toast.error(text || "Could not connect to Twitter. Try again."); - setTwitterLoading(false); - }; - - const getTwitterAPI = async (code: string) => { - const clientId = getTwitterClientId(); - setTwitterLoading(true); - postData("/twitter/2/oauth2/token", { - code, - grant_type: "authorization_code", - // client_id: "RTUyVmlpTzFjTFhWWVB4b2tyb0k6MTpjaQ", - // redirect_uri: "http://localhost:3000/aggregation-parade", - client_id: clientId, - redirect_uri: twitterCallbackURL, - code_verifier: "challenge", - }) - .then((res) => { - if (res?.error) { - toastTwitterError(); - return; - } - - const { access_token } = res; - - if (access_token && access_token !== "") { - fetch("/twitter/2/users/me", { - method: "GET", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${access_token}`, - }, - }) - .then(async (res: any) => { - let { data } = await res.json(); - if (data?.username) { - setTwitterLoading(false); - dispatch(setTwitter(data)); - setTwitterAccessToken(access_token); - } else { - toastTwitterError(); - } - - // TODO: valid twitter ? - // if (data?.username) { - // console.log(data?.username); - // const res = await validTwitter(data?.username, address); - - // if (res.result) { - // setTwitterLoading(false); - // setTwitterAccessToken(access_token); - // console.log("twitter account", access_token); - // // setSearchParams(""); - // } else { - // toastTwitterError( - // "Sorry, this Twitter account has already been bound." - // ); - // } - // } - }) - .catch((e) => { - console.error(e); - toastTwitterError(); - }); - } - }) - .catch((error) => { - console.error(error); - toastTwitterError(); - }); - }; - /** * Verify deposit hash */ @@ -477,7 +523,7 @@ export default function SoftKYC() { address: address, code: inviteCodeValue, siganture: signature, - accessToken: twitterAccessToken, + accessToken: twitterAccessToken || null, chainId: depositChainId, txHash: depositTx, }); @@ -518,12 +564,13 @@ export default function SoftKYC() { } if (error) { - toast.error("Could not connect to Twitter. Try again."); + toastTwitterError(); + setSearchParams(""); return; } if (code) { - getTwitterAPI(code); + getTwitterUserFunc(code); setSearchParams(""); } }, [searchParams]); @@ -537,14 +584,14 @@ export default function SoftKYC() { useEffect(() => { if ( validInviteCode(inviteCodeValue) && - twitterAccessToken && + isCheckedTwitter && depositTx && isConnected && signature ) { setSubmitStatus(true); } - }, [inviteCodeValue, twitterAccessToken, depositTx, isConnected, signature]); + }, [inviteCodeValue, isCheckedTwitter, depositTx, isConnected, signature]); useEffect(() => { if (!inviteCodeValue || inviteCodeValue?.length !== 6) { @@ -554,46 +601,58 @@ export default function SoftKYC() { return ( + {isLoading && }
{/* Title */} -
- YOU’RE ALMOST THERE - To join the zkLink Aggregation Parade +
+ + YOU’RE ALMOST THERE + + + To join the zkLink Aggregation Parade +
-
+
{/* Setp 1: invite code */}
- + 01 - -

Enter Invite Code

-

- Search{" "} - - #zkLinkNovaAggParade - {" "} - on Twitter -

+ + 01 +
+

Enter Invite Code

+

+ Search{" "} + + #zkLinkNovaAggParade + {" "} + on Twitter +

+
-
+
- + 02 - -

Connect your wallet

-

- Prove your ownership of the address -

+ + 02 +
+

Connect your wallet

+

+ Prove your ownership of the address +

+
-
+
{isConnected && ( - {showAccount(address)} + {showAccount(address)} )} @@ -665,21 +729,26 @@ export default function SoftKYC() { {/* Step 3: Bridge */}
- + 03 - -

Bridge and Earn

-

- {"Minimum deposit amount ≥ 0.1 ETH or equivalent"} -

+ + 03 +
+

Bridge and Earn

+

+ {"Minimum deposit amount ≥ 0.1 ETH or equivalent"} +

+
-
+
{/* Total tvl */} -
- TVL +
+ + TVL +
{/* Verify deposit modal */} - + Verify your deposit

- Enter your deposit transaction hash and select the network on - which you made the deposit. + Enter your deposit tx hash, and we'll automatically select the + network for you.

-
+