Skip to content

Commit 9e26bd6

Browse files
committed
wip: handle connect button
1 parent a93041d commit 9e26bd6

File tree

5 files changed

+115
-78
lines changed

5 files changed

+115
-78
lines changed

frontend/src/App.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ function App() {
119119
</Routes>
120120
</main>
121121
<Footer />
122-
{isMobile && disableDesktopOnMobile && (
122+
{/* {isMobile && disableDesktopOnMobile && (
123123
<ActionModal
124124
isOpen={isMobileRestrictionModalOpen}
125125
title="Mobile website restriction"
@@ -130,7 +130,7 @@ function App() {
130130
submitAction={openTelegramBot}
131131
cancelAction={handleisMobileRestrictionModalClose}
132132
/>
133-
)}
133+
)} */}
134134
</div>
135135
);
136136
}

frontend/src/components/layout/header/Header.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import useLockBodyScroll from '@/hooks/useLockBodyScroll';
88
import MobDropdownMenu from '@/components/layout/mob-dropdown-menu/MobDropdownMenu';
99
import { ReportBugButton } from '@/components/report-button/ReportBugButton';
1010
import { ReportBugModal } from '@/components/report-modal/ReportBugModal';
11+
import { useArgentWallet } from '@/hooks/useArgentWallet';
1112

1213
const STICKY_ROUTES = [
1314
'/overview',
@@ -82,6 +83,7 @@ const LogoSection = () => (
8283
function Header({ onConnectWallet, onLogout }) {
8384
const location = useLocation();
8485
const makeNavStick = STICKY_ROUTES.includes(location.pathname);
86+
const {handleConnect} = useArgentWallet()
8587

8688
const { isMenuOpen, toggleMenu, closeMenu } = useMenuHandling(location.pathname);
8789
const { isModalOpen, openModal, closeModal } = useModalHandling();
@@ -100,7 +102,7 @@ function Header({ onConnectWallet, onLogout }) {
100102
<div className="relative block lg:hidden">
101103
<MobDropdownMenu isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
102104
</div>
103-
<WalletSection onConnectWallet={onConnectWallet} onLogout={onLogout} />
105+
<WalletSection onConnectWallet={handleConnect} onLogout={onLogout} />
104106
</div>
105107
</div>
106108
</Navigation>

frontend/src/components/layout/wallet-section/WalletSection.jsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect, useRef } from 'react';
22
import { Button } from '@/components/ui/custom-button/Button';
33
import { useWalletStore } from '@/stores/useWalletStore';
4+
import { useArgentWallet } from '@/hooks/useArgentWallet';
45

56
// TODO: Improve this component
67

@@ -9,6 +10,7 @@ const WalletSection = ({ onConnectWallet, onLogout }) => {
910
const [isMenuOpen, setIsMenuOpen] = useState(false);
1011
const [isMobile, setIsMobile] = useState(window.innerWidth < 1025);
1112
const menuRef = useRef(null);
13+
const {handleConnect} = useArgentWallet()
1214

1315
const toggleMenu = () => {
1416
setIsMenuOpen((prevState) => !prevState);
@@ -75,14 +77,14 @@ const WalletSection = ({ onConnectWallet, onLogout }) => {
7577

7678
{isMenuOpen && (
7779
<div className="bg-header-button-bg absolute top-20 right-0 z-50 flex w-[300px] flex-col items-center justify-start rounded-[10px] p-4 transition-all duration-300 md:w-[285px]">
78-
{isMobile && !walletId && (
80+
{/* {isMobile && !walletId && ( */}
7981
<Button
8082
className="h-[48px] w-[238px] text-sm md:h-[46px] md:w-[226px] md:text-xs"
81-
onClick={onConnectWallet}
83+
onClick={handleConnect}
8284
>
83-
<span>Connect Wallet</span>
85+
<span>iuyiuyiuyiuConnect Wallet</span>
8486
</Button>
85-
)}
87+
{/* // )} */}
8688

8789
{walletId && (
8890
<div className="relative p-[1px]">
@@ -105,11 +107,11 @@ const WalletSection = ({ onConnectWallet, onLogout }) => {
105107
</div>
106108
)}
107109

108-
{!isMobile && !walletId && (
109-
<Button variant="primary" size="md" onClick={onConnectWallet}>
110-
<span>Connect Wallet </span>
110+
{/* {!isMobile && !walletId && ( */}
111+
<Button variant="primary" size="md" onClick={handleConnect}>
112+
<span>Connect Walletyuyguyu </span>
111113
</Button>
112-
)}
114+
{/* // )} */}
113115
</div>
114116
);
115117
};
Lines changed: 98 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,105 @@
1-
// import { useState, useEffect, useCallback } from "react";
2-
// import { ArgentWebWallet} from "@argent/webwallet-sdk";
3-
// import { RpcProvider } from "starknet";
4-
// // import { toast } from "sonner";
1+
import { useState, useEffect, useCallback } from "react";
2+
import { ArgentWebWallet} from "@argent/webwallet-sdk";
3+
import { RpcProvider } from "starknet";
4+
// import { toast } from "sonner";
55

6-
// const ARGENT_DUMMY_CONTRACT_ADDRESS = "0x07557a2fbe051e6327ab603c6d1713a91d2cfba5382ac6ca7de884d3278636d7";
7-
// const ARGENT_DUMMY_CONTRACT_ENTRYPOINT = "increase_number";
6+
const ARGENT_DUMMY_CONTRACT_ADDRESS = "0x07557a2fbe051e6327ab603c6d1713a91d2cfba5382ac6ca7de884d3278636d7";
7+
const ARGENT_DUMMY_CONTRACT_ENTRYPOINT = "increase_number";
88

9-
// const provider = new RpcProvider({});
9+
const provider = new RpcProvider({});
1010

11-
// const argentWebWallet = ArgentWebWallet.init({
12-
// appName: "hackbot",
13-
// environment: "dev",
14-
// sessionParams: {
15-
// allowedMethods: [
16-
// {
17-
// contract: ARGENT_DUMMY_CONTRACT_ADDRESS,
18-
// selector: ARGENT_DUMMY_CONTRACT_ENTRYPOINT,
19-
// },
20-
// ],
21-
// },
22-
// });
11+
const argentWebWallet = ArgentWebWallet.init({
12+
appName: "hackbot",
13+
environment: "dev",
14+
sessionParams: {
15+
allowedMethods: [
16+
{
17+
contract: ARGENT_DUMMY_CONTRACT_ADDRESS,
18+
selector: ARGENT_DUMMY_CONTRACT_ENTRYPOINT,
19+
},
20+
],
21+
},
22+
});
2323

24-
// export const useArgentWallet = () => {
25-
// const [account, setAccount] = useState<undefined>(undefined);
26-
// const [isLoading, setIsLoading] = useState(false);
27-
// const [txHash, setTxHash] = useState<string | undefined>(undefined);
24+
export const useArgentWallet = () => {
25+
const [account, setAccount] = useState(undefined);
26+
const [isLoading, setIsLoading] = useState(false);
27+
const [txHash, setTxHash] = useState(undefined);
2828

29-
// const connect = useCallback(async () => {
30-
// try {
31-
// const response = await argentWebWallet.requestConnection({
32-
// callbackData: "custom_callback_data",
33-
// approvalRequests: [
34-
// {
35-
// tokenAddress: "0x049D36570D4e46f48e99674bd3fcc84644DdD6b96F7C741B1562B82f9e004dC7",
36-
// amount: BigInt("100000000000000000").toString(),
37-
// spender: "0x7e00d496e324876bbc8531f2d9a82bf154d1a04a50218ee74cdd372f75a551a",
38-
// },
39-
// ],
40-
// });
41-
// setAccount(response.account);
42-
// } catch (err) {
43-
// console.error("Failed to connect to Argent Web Wallet", err);
44-
// }
45-
// }, []);
29+
useEffect(() => {
30+
argentWebWallet
31+
.connect()
32+
.then((res) => {
33+
34+
if (!res) {
35+
console.log("Not connected");
36+
return;
37+
}
4638

47-
// const submitTransaction = useCallback(async () => {
48-
// if (!account) {
49-
// console.error("Account not connected");
50-
// return;
51-
// }
52-
// setIsLoading(true);
53-
// try {
54-
// const call = {
55-
// contractAddress: ARGENT_DUMMY_CONTRACT_ADDRESS,
56-
// entrypoint: ARGENT_DUMMY_CONTRACT_ENTRYPOINT,
57-
// calldata: ["0x1"],
58-
// };
59-
// const { transaction_hash } = await account.execute(call, {
60-
// version: "0x3",
61-
// // resourceBounds: { ... },
62-
// });
63-
// setTxHash(transaction_hash);
64-
// await account.waitForTransaction(transaction_hash);
65-
// } catch (error) {
66-
// console.error("Transaction failed", error);
67-
// } finally {
68-
// setIsLoading(false);
69-
// }
70-
// }, [account]);
39+
console.log("Connected to Argent Web Wallet", res);
40+
const { account, callbackData, approvalTransactionHash } = res;
7141

72-
// return { account, isLoading, txHash, connect, submitTransaction };
73-
// };
42+
if (account.getSessionStatus() !== "VALID") {
43+
console.log("Session is not valid");
44+
return;
45+
}
46+
47+
setAccount(account);
48+
console.log("Callback data", callbackData); // -- custom_callback_string
49+
console.log("Approval transaction hash", approvalTransactionHash); // -- custom_callback_string
50+
})
51+
.catch((err) => {
52+
console.error("Failed to connect to Argent Web Wallet", err);
53+
});
54+
}, []);
55+
56+
const submitTransaction = useCallback(async () => {
57+
if (!account) {
58+
console.error("Account not connected");
59+
return;
60+
}
61+
setIsLoading(true);
62+
try {
63+
const call = {
64+
contractAddress: ARGENT_DUMMY_CONTRACT_ADDRESS,
65+
entrypoint: ARGENT_DUMMY_CONTRACT_ENTRYPOINT,
66+
calldata: ["0x1"],
67+
};
68+
const { transaction_hash } = await account.execute(call, {
69+
version: "0x3",
70+
// resourceBounds: { ... },
71+
});
72+
setTxHash(transaction_hash);
73+
await account.waitForTransaction(transaction_hash);
74+
} catch (error) {
75+
console.error("Transaction failed", error);
76+
} finally {
77+
setIsLoading(false);
78+
}
79+
}, [account]);
80+
81+
82+
const handleConnect = async () => {
83+
try {
84+
const response = await argentWebWallet.requestConnection({
85+
callbackData: "custom_callback_data",
86+
approvalRequests: [
87+
{
88+
tokenAddress: "0x049D36570D4e46f48e99674bd3fcc84644DdD6b96F7C741B1562B82f9e004dC7",
89+
amount: BigInt("100000000000000000").toString(),
90+
// Your dapp contract
91+
spender: "0x7e00d496e324876bbc8531f2d9a82bf154d1a04a50218ee74cdd372f75a551a",
92+
},
93+
],
94+
});
95+
96+
const { account: sessionAccount } = response
97+
console.log(sessionAccount);
98+
setAccount(sessionAccount);
99+
} catch (err) {
100+
console.error(err);
101+
}
102+
};
103+
104+
return { account, isLoading, txHash, submitTransaction, handleConnect };
105+
};

frontend/src/utils/constants.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export const kSTRK_ADDRESS = '0x045cd05ee2caaac3459b87e5e2480099d201be2f62243f83
1313

1414
export const ONE_HOUR_IN_MILLISECONDS = 3600000;
1515

16-
export const TELEGRAM_BOT_LINK = 'https://t.me/emarc99bot'
16+
export const TELEGRAM_BOT_LINK = 'https://t.me/spotnet_bot';
17+
// 'https://t.me/emarc99bot'
1718
// 'https://t.me/spotnet_bot';
1819

1920
export function getDeployContractData(walletId) {

0 commit comments

Comments
 (0)