diff --git a/frontend/src/tabs/account/Account.js b/frontend/src/tabs/account/Account.js
index 3f0e547c..17e82133 100644
--- a/frontend/src/tabs/account/Account.js
+++ b/frontend/src/tabs/account/Account.js
@@ -1,11 +1,10 @@
import React, { useState, useEffect } from 'react';
-import { useDisconnect, useContractWrite } from '@starknet-react/core';
+import { constants } from 'starknet';
import './Account.css';
import BasicTab from '../BasicTab.js';
import '../../utils/Styles.css';
import { backendUrl, devnetMode } from '../../utils/Consts.js';
import { fetchWrapper } from '../../services/apiService.js';
-import { encodeToLink } from '../../utils/encodeToLink';
import BeggarRankImg from '../../resources/ranks/Beggar.png';
import OwlRankImg from '../../resources/ranks/Owl.png';
import CrownRankImg from '../../resources/ranks/Crown.png';
@@ -90,7 +89,6 @@ const Account = (props) => {
// TODO: Connect wallet page if no connectors
let [availableConnectors, setAvailableConnectors] = useState([]);
- const { disconnect } = useDisconnect();
const [addressShort, setAddressShort] = useState('');
useEffect(() => {
@@ -152,29 +150,57 @@ const Account = (props) => {
}
}, [showClaimInfo, userAwards]);
- const [calls, setCalls] = useState([]);
- const claimCall = (username) => {
+ const claimCall = async (username) => {
if (devnetMode) return;
- if (!props.address || !props.usernameContract) return;
+ if (!props.address || !props.usernameContract || !props.account) return;
if (username === '') return;
- setCalls(
- props.usernameContract.populateTransaction['claim_username'](
- toHex(username)
- )
+ const usernameCallData = props.usernameContract.populate('claim_username', {
+ key: toHex(username)
+ });
+ const { suggestedMaxFee } = await props.estimateInvokeFee({
+ contractAddress: props.usernameContract.address,
+ entrypoint: 'claim_username',
+ calldata: usernameCallData.calldata
+ });
+ /* global BigInt */
+ const maxFee = (suggestedMaxFee * BigInt(15)) / BigInt(10);
+ const result = await props.usernameContract.claim_username(
+ usernameCallData.calldata,
+ {
+ maxFee
+ }
);
+ console.log(result);
};
- const changeCall = (username) => {
+
+ const changeCall = async (username) => {
if (devnetMode) return;
- if (!props.address || !props.usernameContract) return;
+ if (!props.address || !props.usernameContract || !props.account) return;
if (username === '') return;
- setCalls(
- props.usernameContract.populateTransaction['change_username'](
- toHex(username)
- )
+ const usernameCallData = props.usernameContract.populate(
+ 'change_username',
+ {
+ new_username: toHex(username)
+ }
);
+ const { suggestedMaxFee } = await props.estimateInvokeFee({
+ contractAddress: props.usernameContract.address,
+ entrypoint: 'change_username',
+ calldata: usernameCallData.calldata
+ });
+ const maxFee = (suggestedMaxFee * BigInt(15)) / BigInt(10);
+ const result = await props.usernameContract.change_username(
+ usernameCallData.calldata,
+ {
+ maxFee
+ }
+ );
+ // TODO: Success message
+ console.log(result);
};
useEffect(() => {
+ if (!props.connectors) return;
if (devnetMode) {
setAvailableConnectors(props.connectors);
return;
@@ -193,29 +219,6 @@ const Account = (props) => {
checkIfAvailable();
}, [props.connectors]);
- const disconnectWallet = () => {
- if (devnetMode) {
- props.setConnected(false);
- return;
- }
- disconnect();
- };
-
- useEffect(() => {
- const usernameCall = async () => {
- if (devnetMode) return;
- if (calls.length === 0) return;
- await writeAsync();
- console.log('Username call successful:', data, isPending);
- // TODO: Update the UI with the new vote count
- };
- usernameCall();
- }, [calls]);
-
- const { writeAsync, data, isPending } = useContractWrite({
- calls
- });
-
// TODO: Pending & ... options for edit
const handleSubmit = async (event) => {
event.preventDefault();
@@ -234,9 +237,9 @@ const Account = (props) => {
if (!devnetMode) {
setUsername(username.trim());
if (usernameBeforeEdit === '') {
- claimCall(username.trim());
+ await claimCall(username.trim());
} else {
- changeCall(username.trim());
+ await changeCall(username.trim());
}
setUsernameSaved(true);
setIsEditing(false);
@@ -362,7 +365,7 @@ const Account = (props) => {
}, [pixelCount]);
const [starknetWalletMode, setStarknetWalletMode] = useState(false);
- const connectStarknetWallet = async () => {
+ const _connectStarknetWallet = async () => {
setStarknetWalletMode(true);
};
@@ -390,9 +393,9 @@ const Account = (props) => {
- StarkNet Login
+ Starknet Login
{
Network
- {props.chain.network.toUpperCase()}
+ {process.env.REACT_APP_CHAIN_ID === constants.NetworkName.SN_MAIN
+ ? 'Mainnet'
+ : 'Sepolia'}
@@ -603,18 +608,32 @@ const Account = (props) => {
-
+ {!props.usingSessionKeys && props.isSessionable ? (
+
+ Tired of approving each pixel? Create a session!
+
+ ) : (
+
+ Session active
+
+ )}
-
disconnectWallet()}
- >
- Logout
+
+ {!props.usingSessionKeys && props.isSessionable && (
+
props.startSession()}
+ >
+ New Session
+
+ )}
+
props.disconnectWallet()}
+ >
+ Logout
+
diff --git a/frontend/src/tabs/canvas/ExtraPixelsPanel.js b/frontend/src/tabs/canvas/ExtraPixelsPanel.js
index f739046b..749cd94b 100644
--- a/frontend/src/tabs/canvas/ExtraPixelsPanel.js
+++ b/frontend/src/tabs/canvas/ExtraPixelsPanel.js
@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-import { useContractWrite } from '@starknet-react/core';
+import React from 'react';
import './ExtraPixelsPanel.css';
import canvasConfig from '../../configs/canvas.config.json';
import { fetchWrapper } from '../../services/apiService.js';
@@ -22,40 +21,39 @@ const ExtraPixelsPanel = (props) => {
props.setSelectedColorId(-1);
};
- const [calls, setCalls] = useState([]);
- const extraPixelPlaceCall = (positions, colors, now) => {
+ const extraPixelPlaceCall = async (positions, colors, now) => {
if (devnetMode) return;
- if (!props.address || !props.artPeaceContract) return;
+ if (!props.address || !props.artPeaceContract || !props.account) return;
// TODO: Validate inputs
- setCalls(
- props.artPeaceContract.populateTransaction['place_extra_pixels'](
- positions,
- colors,
- now
- )
+ const placeExtraPixelsCallData = props.artPeaceContract.populate(
+ 'place_extra_pixels',
+ {
+ positions: positions,
+ colors: colors,
+ now: now
+ }
+ );
+ const { suggestedMaxFee } = await props.estimateInvokeFee({
+ contractAddress: props.artPeaceContract.address,
+ entrypoint: 'place_extra_pixels',
+ calldata: placeExtraPixelsCallData.calldata
+ });
+ /* global BigInt */
+ const maxFee = (suggestedMaxFee * BigInt(15)) / BigInt(10);
+ const result = await props.artPeaceContract.place_extra_pixels(
+ placeExtraPixelsCallData.calldata,
+ {
+ maxFee
+ }
);
+ console.log(result);
};
- useEffect(() => {
- const extraPixelsPlaced = async () => {
- if (devnetMode) return;
- if (calls.length === 0) return;
- await writeAsync();
- console.log('Extra pixels placed successful:', data, isPending);
- // TODO: Update the UI with the new vote count
- };
- extraPixelsPlaced();
- }, [calls]);
-
- const { writeAsync, data, isPending } = useContractWrite({
- calls
- });
-
// TODO: Is rounding down the time always okay?
const submit = async () => {
let timestamp = Math.floor(Date.now() / 1000);
if (!devnetMode) {
- extraPixelPlaceCall(
+ await extraPixelPlaceCall(
props.extraPixelsData.map(
(pixel) => pixel.x + pixel.y * canvasConfig.canvas.width
),
@@ -423,12 +421,18 @@ const ExtraPixelsPanel = (props) => {
})}
- submit()}
+ >
+ Submit {props.availablePixelsUsed}/{props.availablePixels} pxs
+
+ ) : (
+