Skip to content

Commit

Permalink
fix: check connect
Browse files Browse the repository at this point in the history
  • Loading branch information
@quangdz1704
quangdz1704 committed Jul 19, 2024
1 parent e0134ee commit f2cf1c6
Show file tree
Hide file tree
Showing 10 changed files with 345 additions and 132 deletions.
Binary file removed app/favicon.ico
View file
Binary file not shown.
58 changes: 58 additions & 0 deletions app/favicon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function RootLayout({
return (
<html lang="en">
<head>
<link rel="icon" href="./favicon.ico" sizes="any" />
<link rel="icon" href="./favicon.svg" sizes="any" />
</head>
<body className={inter.className}>
<AppProvider>
Expand Down
6 changes: 6 additions & 0 deletions app/not-found.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import Link from "next/link";
import { redirect } from "next/navigation";

export default function NotFound() {
redirect("/");
}
264 changes: 138 additions & 126 deletions components/layout/connectButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
toUserFriendlyAddress,
} from "@tonconnect/sdk";
import classNames from "classnames";
import { FC, useEffect, useRef, useState } from "react";
import { FC, useCallback, useEffect, useRef, useState } from "react";
import ConnectedInfo from "../connectedInfo";
import styles from "./index.module.scss";

Expand Down Expand Up @@ -68,7 +68,14 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => {
walletType: OraiWallet // WalletType | "eip191"
) => {
setConnectStatus(walletType);

try {
const isNotInstall = !hasInstalledWallet(walletType);
console.log("isNotInstalled", isNotInstall);
if (isNotInstall) {
throw `${walletType} is not installed`;
}

window.Keplr = new Keplr(walletType);
setStorageKey("typeWallet", walletType);
await initClient();
Expand All @@ -77,8 +84,13 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => {
handleSetOraiWallet({ oraiWallet: walletType });
setStep(2);
} catch (error) {
console.trace({ errorCosmos: error });
throw new Error(error?.message ?? JSON.stringify(error));
console.log({ errorCosmos: error });
displayToast;
// throw new Error(error?.message ?? JSON.stringify(error));

displayToast(TToastType.TX_FAILED, {
message: error?.message ?? JSON.stringify(error),
});
} finally {
setConnectStatus("init");
}
Expand Down Expand Up @@ -136,32 +148,6 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => {
}
};

const hasInstalledWallet = (wallet: OraiWallet | TonWallet) => {
if (typeof window === "undefined") {
return false;
}

// @ts-ignore
const isCheckOwallet = window.owallet?.isOwallet;
const version = window?.keplr?.version;
const isCheckKeplr = !!version && keplrCheck("keplr");
const isMetamask = window?.ethereum?.isMetaMask;
//@ts-ignore

switch (wallet) {
case OraiWallet.Keplr:
return isCheckKeplr;
case OraiWallet.Metamask:
return isMetamask;
case OraiWallet.OWallet:
return isCheckOwallet;

default:
// case ton connect. for @ton-connect/ui-react handle
return true;
}
};

useEffect(() => {
connector.onStatusChange(
(wallet) => {
Expand Down Expand Up @@ -201,6 +187,37 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => {
// }
// }, [open]);

// @ts-ignore
const isCheckOwallet =
typeof window !== "undefined" && window?.owallet?.["isOwallet"];
const version = typeof window !== "undefined" && window?.keplr?.version;
const isCheckKeplr = !!version && keplrCheck("keplr");
const isMetamask =
typeof window !== "undefined" && window?.ethereum?.isMetaMask;

const hasInstalledWallet = useCallback(
(wallet: OraiWallet | TonWallet) => {
if (typeof window === "undefined") {
return true;
}

//@ts-ignore
switch (wallet) {
case OraiWallet.Keplr:
return isCheckKeplr;
case OraiWallet.Metamask:
return isMetamask;
case OraiWallet.OWallet:
return isCheckOwallet;

default:
// case ton connect. for @ton-connect/ui-react handle
return true;
}
},
[isCheckOwallet, isCheckKeplr, isMetamask]
);

return (
<div
className={classNames(styles.wrapperConnect, {
Expand All @@ -214,110 +231,105 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => {
) : (
<ConnectedInfo onClick={() => setOpen(true)} setStep={setStep} />
)}
<div
className={classNames(styles.modalConnectWrapper, {
[styles.active]: open,
})}
// onClick={() => setOpen(false)}
>
<div className={styles.content} ref={ref}>
<div className={styles.header}>
<span>{step}/2</span>

<CloseIcon
onClick={() => setOpen(false)}
className={styles.close}
/>
</div>
<div className={styles.wallet}>
<div className={styles.left}>
<h1>Connect to Wallets</h1>
<p>
You’ll need to connect both your Oraichain and <br /> TON
wallets to get started
</p>
<div className={styles.step}>
<div
className={classNames(styles.stepItem, styles.active)}
onClick={() => setStep(1)}
>
<OraiIcon /> <span>ORAICHAIN</span>
</div>
<StepLineIcon />
<div
className={classNames(styles.stepItem, {
[styles.active]: step !== 1,
})}
onClick={() => setStep(2)}
>
<TonNetworkICon /> <span>TON</span>
{open && (
<div
className={classNames(styles.modalConnectWrapper, {
[styles.active]: open,
})}
// onClick={() => setOpen(false)}
>
<div className={styles.content} ref={ref}>
<div className={styles.header}>
<span>{step}/2</span>

<CloseIcon
onClick={() => setOpen(false)}
className={styles.close}
/>
</div>
<div className={styles.wallet}>
<div className={styles.left}>
<h1>Connect to Wallets</h1>
<p>
You’ll need to connect both your Oraichain and <br /> TON
wallets to get started
</p>
<div className={styles.step}>
<div
className={classNames(styles.stepItem, styles.active)}
onClick={() => setStep(1)}
>
<OraiIcon /> <span>ORAICHAIN</span>
</div>
<StepLineIcon />
<div
className={classNames(styles.stepItem, {
[styles.active]: step !== 1,
})}
onClick={() => setStep(2)}
>
<TonNetworkICon /> <span>TON</span>
</div>
</div>
</div>
</div>
<div className={styles.right}>
{(step === 1 ? OraichainWallet : TonNetWorkWallet).map(
(e, ind) => {
const isConnected =
(oraiAddress && oraiWallet === e.id) ||
(tonAddress && tonWallet === e.id); //connector.connected &&
const isNotInstall = !hasInstalledWallet(e.id);

// console.log(
// "isConnected",
// connector.connected,
// tonAddress,
// tonWallet === e.id
// );

return (
<button
disabled={isNotInstall}
key={`${e.id}-${ind}`}
className={classNames(styles.walletItem, {
[styles.notInstalled]: isNotInstall,
})}
title={
isNotInstall
? `${e.name} is not installed!`
: `${e.name}`
}
onClick={() => {
if (isConnected) {
step === 1
? handleDisconnectOraichain(e.id)
: handleDisconnectTon(e.id);

return;
}

if (step === 1) {
handleConnectWalletInOraichainNetwork(e.id);
} else {
console.log("connect Ton", e.id);
handleConnectWalletInTonNetwork(e.id);
}
}}
>
<e.icon />
<span>{e.name}</span>
<div
className={classNames(styles.status, {
[styles.connected]: isConnected,
<div className={styles.right}>
{(step === 1 ? OraichainWallet : TonNetWorkWallet).map(
(e, ind) => {
const isConnected =
(oraiAddress && oraiWallet === e.id) ||
(tonAddress && tonWallet === e.id); //connector.connected &&
const isNotInstall = !hasInstalledWallet(e.id);

return (
<button
disabled={isNotInstall}
key={`${e.id}-${ind}`}
className={classNames(styles.walletItem, {
[styles.notInstalled]: isNotInstall,
})}
title={
isNotInstall
? `${e.name} is not installed!`
: `${e.name}`
}
onClick={() => {
if (isConnected) {
step === 1
? handleDisconnectOraichain(e.id)
: handleDisconnectTon(e.id);

return;
}

if (step === 1) {
handleConnectWalletInOraichainNetwork(e.id);
} else {
console.log("connect Ton", e.id);
handleConnectWalletInTonNetwork(e.id);
}
}}
>
{connectStatus === e.id && (
<Loader width={14} height={14} />
)}
{isConnected ? "Connected" : "Connect"}
</div>
</button>
);
}
)}
<e.icon />
<span>{e.name}</span>
<div
className={classNames(styles.status, {
[styles.connected]: isConnected,
})}
>
{connectStatus === e.id && (
<Loader width={14} height={14} />
)}
{isConnected ? "Connected" : "Connect"}
</div>
</button>
);
}
)}
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
};
Expand Down
Loading

0 comments on commit f2cf1c6

Please sign in to comment.