diff --git a/src/main/swap/Main.ts b/src/main/swap/Main.ts index 3324108..b07e3be 100644 --- a/src/main/swap/Main.ts +++ b/src/main/swap/Main.ts @@ -2,6 +2,9 @@ * Copyright (C) 2024 Jon Michael Aanes */ +import { + setupWalletWidget, +} from "../token/WalletIntegration"; import BN from "bn.js"; import { LittleEndianByteInput } from "@secata-public/bitmanipulation-ts"; import { BlockchainAddress, StateBytes } from "@partisiablockchain/abi-client"; @@ -217,6 +220,10 @@ async function get_token_state(tokenAddress: BlockchainAddress): Promise { diff --git a/src/main/token/AppState.ts b/src/main/token/AppState.ts index 5fc2f90..c2ef9d5 100644 --- a/src/main/token/AppState.ts +++ b/src/main/token/AppState.ts @@ -21,7 +21,6 @@ import { ContractAbi, BlockchainAddress } from "@partisiablockchain/abi-client"; import { ShardedClient } from "../client/ShardedClient"; import { TokenContract } from "../shared/TokenContract"; import { TransactionApi } from "../client/TransactionApi"; -import { updateContractState } from "./WalletIntegration"; import { NETWORK } from "../constant"; export const CLIENT = new ShardedClient(NETWORK.node_base_url, NETWORK.network_shards); @@ -33,7 +32,6 @@ type TokenContractCreator = ( let lastBalanceKey: string | undefined; let contractAddress: BlockchainAddress | undefined; -let currentAccount: ConnectedWallet | undefined; let contractAbi: ContractAbi | undefined; let tokenApi: TokenContract | undefined; @@ -47,19 +45,6 @@ export function setTokenContractType(creator: TokenContractCreator) { tokenContractCreator = creator; } -export const setAccount = (account: ConnectedWallet | undefined) => { - currentAccount = account; - setTokenApi(); -}; - -export const resetAccount = () => { - currentAccount = undefined; -}; - -export const isConnected = () => { - return currentAccount != null; -}; - export const setContractAbi = (abi: ContractAbi) => { contractAbi = abi; setTokenApi(); @@ -71,9 +56,6 @@ export const getContractAbi = () => { const setTokenApi = () => { let transactionApi = undefined; - if (currentAccount != undefined) { - transactionApi = new TransactionApi(CLIENT, currentAccount, updateContractState); - } tokenApi = tokenContractCreator(CLIENT, transactionApi); }; diff --git a/src/main/token/Main.ts b/src/main/token/Main.ts index 1aacd1e..886bb41 100644 --- a/src/main/token/Main.ts +++ b/src/main/token/Main.ts @@ -20,19 +20,10 @@ import { setTokenContractType, getTokenApi, getContractAddress, - isConnected, setContractAddress, } from "./AppState"; import { - connectMetaMaskWalletClick, - connectMpcWalletClick, - connectLedgerWalletClick, - connectPrivateKeyWalletClick, - validateLedgerConnectionClick, - disconnectWalletClick, - fetchAndDisplayMoreBalances, - updateContractState, - updateInteractionVisibility, + setupWalletWidget, } from "./WalletIntegration"; import { TokenV1Contract } from "./contract/TokenV1Contract"; import { TokenV2Contract } from "./contract/TokenV2Contract"; @@ -43,28 +34,8 @@ import { TransactionFailedError } from "../client/TransactionApi"; import { PutTransactionWasSuccessful } from "../client/TransactionData"; import { NETWORK } from "../constant"; -// Setup event listener to connect to the MPC wallet browser extension -const connectWallet = document.querySelector("#wallet-connect-btn"); -connectWallet.addEventListener("click", connectMpcWalletClick); - -// Setup event listener to connect to the MetaMask snap -const metaMaskConnect = document.querySelector("#metamask-connect-btn"); -metaMaskConnect.addEventListener("click", connectMetaMaskWalletClick); - -// Setup event listener to connect to the ledger snap -const ledgerConnect = document.querySelector("#ledger-connect-btn"); -ledgerConnect.addEventListener("click", connectLedgerWalletClick); - -const ledgerConnectValidate = document.querySelector("#connection-link-ledger-validate"); -ledgerConnectValidate.addEventListener("click", validateLedgerConnectionClick); - -// Setup event listener to login using private key -const pkConnect = document.querySelector("#private-key-connect-btn"); -pkConnect.addEventListener("click", connectPrivateKeyWalletClick); - -// Setup event listener to drop the connection again -const disconnectWallet = document.querySelector("#wallet-disconnect-btn"); -disconnectWallet.addEventListener("click", disconnectWalletClick); +// Setup wallet widget +setupWalletWidget(); // Setup event listener that sends a transfer transaction to the contract. // This requires that a wallet has been connected. @@ -75,15 +46,9 @@ transferBtn.addEventListener("click", transferAction); const addressBtn = document.querySelector("#address-btn"); addressBtn.addEventListener("click", contractAddressClick); -const updateStateBtn = document.querySelector("#update-state-btn"); -updateStateBtn.addEventListener("click", updateContractState); - const getBalanceBtn = document.querySelector("#get-balance-btn"); getBalanceBtn.addEventListener("click", getBalance); -const loadMoreBtn = document.querySelector("#balances-load-more-btn"); -loadMoreBtn.addEventListener("click", fetchAndDisplayMoreBalances); - function setModeText(modeText: string) { let items = document.querySelectorAll("title"); items.forEach((item) => { @@ -125,8 +90,6 @@ function setContractAddressUI(address: BlockchainAddress) { currentAddress.href = `${NETWORK.browser_base_url}/contracts/${address.asString()}`; inputAddress.value = address.asString(); setContractAddress(address); - updateInteractionVisibility(); - updateContractState(); } /** Function for the contract address form. @@ -159,23 +122,13 @@ function setTransactionLink(transaction: PutTransactionWasSuccessful) { function transferAction() { const api = getTokenApi(); const contractAddress = getContractAddress(); - if (isConnected() && api !== undefined && contractAddress !== undefined) { + if (false && api !== undefined && contractAddress !== undefined) { const to = document.querySelector("#address-to"); const amount = document.querySelector("#amount"); const memo = document.querySelector("#memo"); transactionErrorMessage.innerHTML = '
'; transactionLinkElement.innerText = ""; - api - .transfer(contractAddress, BlockchainAddress.fromString(to.value), new BN(amount.value, 10), memo.value) - .then(setTransactionLink) - .catch((error) => { - console.error(error); - if (error instanceof TransactionFailedError) { - setTransactionLink(error.putTransaction); - } - transactionErrorMessage.innerText = error; - }); } } diff --git a/src/main/token/WalletIntegration.ts b/src/main/token/WalletIntegration.ts index fde0fbe..44cd7d1 100644 --- a/src/main/token/WalletIntegration.ts +++ b/src/main/token/WalletIntegration.ts @@ -16,15 +16,6 @@ * */ -import { - resetAccount, - setAccount, - getContractAddress, - isConnected, - getContractLastBalanceKey, - setContractLastBalanceKey, - getTokenApi, -} from "./AppState"; import { ConnectedWallet } from "../shared/ConnectedWallet"; import { connectMetaMask } from "../shared/MetaMaskIntegration"; import { connectMpcWallet } from "../shared/MpcWalletIntegration"; @@ -32,6 +23,8 @@ import { connectLedger, validateLedgerConnection } from "../shared/LedgerIntegra import { connectPrivateKey } from "../shared/PrivateKeyIntegration"; import { CryptoUtils } from "../client/CryptoUtils"; +let CURRENT_ACCOUNT: ConnectedWallet | undefined; + /** * Function for connecting to the MPC wallet and setting the connected wallet in the app state. */ @@ -78,11 +71,11 @@ export const connectPrivateKeyWalletClick = () => { */ const handleWalletConnect = (connect: Promise) => { // Clean up state - resetAccount(); + CURRENT_ACCOUNT = undefined; setConnectionStatus("Connecting..."); connect .then((userAccount) => { - setAccount(userAccount); + CURRENT_ACCOUNT = userAccount; // Fix UI setConnectionStatus("Logged in: ", userAccount.address); @@ -91,7 +84,6 @@ const handleWalletConnect = (connect: Promise) => { setVisibility("#ledger-connect", false); setVisibility("#private-key-connect", false); setVisibility("#wallet-disconnect", true); - updateInteractionVisibility(); }) .catch((error) => { console.error(error); @@ -107,7 +99,7 @@ const handleWalletConnect = (connect: Promise) => { * Reset state to disconnect current user. */ export const disconnectWalletClick = () => { - resetAccount(); + CURRENT_ACCOUNT = undefined; setConnectionStatus("Disconnected account"); setVisibility("#wallet-connect", true); setVisibility("#metamask-connect", true); @@ -115,58 +107,6 @@ export const disconnectWalletClick = () => { setVisibility("#private-key-connect", true); setVisibility("#wallet-disconnect", false); setVisibility("#connection-link-ledger-validate", false); - updateInteractionVisibility(); -}; - -const ALL_BALANCES_LIST = document.querySelector("#all-balances"); - -/** - * Write some of the state to the UI. - */ -export const updateContractState = () => { - const address = getContractAddress(); - if (address === undefined) { - throw new Error("No address provided"); - } - const tokenApi = getTokenApi(); - if (tokenApi === undefined) { - throw new Error("Token API not setup"); - } - - const refreshLoader = document.querySelector("#refresh-loader"); - refreshLoader.classList.remove("hidden"); - - if (tokenApi.basicState != undefined) { - tokenApi.basicState(address).then((state) => { - const stateHeader = document.querySelector("#state-header"); - const updateStateButton = document.querySelector("#update-state"); - stateHeader.classList.remove("hidden"); - updateStateButton.classList.remove("hidden"); - - const name = document.querySelector("#name"); - name.innerHTML = `${state.name}`; - - const decimals = document.querySelector("#decimals"); - decimals.innerHTML = `${state.decimals}`; - - const symbol = document.querySelector("#symbol"); - symbol.innerHTML = `${state.symbol}`; - - const owner = document.querySelector("#owner"); - owner.innerHTML = `${state.owner.asString()}`; - - const totalSupply = document.querySelector("#total-supply"); - totalSupply.innerHTML = `${state.totalSupply}`; - - const contractState = document.querySelector("#contract-state"); - contractState.classList.remove("hidden"); - refreshLoader.classList.add("hidden"); - }); - } - - setContractLastBalanceKey(undefined); - ALL_BALANCES_LIST.innerHTML = ""; - fetchAndDisplayMoreBalances(); }; function setConnectionStatus(status: string, address: string | undefined = undefined) { @@ -190,42 +130,27 @@ const setVisibility = (selector: string, visible: boolean) => { } }; -export const updateInteractionVisibility = () => { - const contractInteraction = document.querySelector("#contract-interaction"); - if (isConnected() && getContractAddress() !== undefined) { - contractInteraction.classList.remove("hidden"); - } else { - contractInteraction.classList.add("hidden"); - } -}; +export function setupWalletWidget() { + // Setup event listener to connect to the MPC wallet browser extension + const connectWallet = document.querySelector("#wallet-connect-btn"); + connectWallet.addEventListener("click", connectMpcWalletClick); -export const fetchAndDisplayMoreBalances = () => { - const address = getContractAddress(); - if (address == undefined) { - throw new Error("Address not set"); - } - const tokenApi = getTokenApi(); - if (tokenApi === undefined) { - throw new Error("Token API not setup"); - } - if (tokenApi.tokenBalances == undefined) { - return; // Contract doesn't support tokenBalances - } + // Setup event listener to connect to the MetaMask snap + const metaMaskConnect = document.querySelector("#metamask-connect-btn"); + metaMaskConnect.addEventListener("click", connectMetaMaskWalletClick); - const lastKey = getContractLastBalanceKey(); - tokenApi.tokenBalances(address, lastKey).then((balancesResult) => { - balancesResult.balances.forEach((amount, tokenOwner) => { - const balance = document.createElement("li"); - balance.innerHTML = `${tokenOwner.asString()}: ${amount}`; - ALL_BALANCES_LIST.appendChild(balance); - }); - setContractLastBalanceKey(balancesResult.next_cursor); + // Setup event listener to connect to the ledger snap + const ledgerConnect = document.querySelector("#ledger-connect-btn"); + ledgerConnect.addEventListener("click", connectLedgerWalletClick); - const loadMoreBtn = document.querySelector("#balances-load-more-btn"); - if (balancesResult.next_cursor === undefined) { - loadMoreBtn.classList.add("hidden"); - } else { - loadMoreBtn.classList.remove("hidden"); - } - }); -}; + const ledgerConnectValidate = document.querySelector("#connection-link-ledger-validate"); + ledgerConnectValidate.addEventListener("click", validateLedgerConnectionClick); + + // Setup event listener to login using private key + const pkConnect = document.querySelector("#private-key-connect-btn"); + pkConnect.addEventListener("click", connectPrivateKeyWalletClick); + + // Setup event listener to drop the connection again + const disconnectWallet = document.querySelector("#wallet-disconnect-btn"); + disconnectWallet.addEventListener("click", disconnectWalletClick); +}