Jmaa/pbc-defi-ui
1
0
Fork 0
Code

Login is now possible

Browse Source
This commit is contained in:
Jon Michael Aanes 2024-06-10 00:23:28 +02:00
parent cc442b3a2e
commit a812a42bde
Signed by: Jmaa
SSH Key Fingerprint: SHA256:Ab0GfHGCblESJx7JRE4fj4bFy/KRpeLhi41y4pF3sNA
4 changed files with 37 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/swap/Main.ts
View File

@ -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<TokenSt
}
function setup() {
// Setup wallet widget
setupWalletWidget();
// Setup routes
for (let router of ROUTERS) {
console.log(router);
get_contract_state(router, deserializeRouterState).then((state) => {

18
src/main/token/AppState.ts
View File

@ -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);
};

55
src/main/token/Main.ts
View File

@ -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 = <Element>document.querySelector("#wallet-connect-btn");
connectWallet.addEventListener("click", connectMpcWalletClick);
// Setup event listener to connect to the MetaMask snap
const metaMaskConnect = <Element>document.querySelector("#metamask-connect-btn");
metaMaskConnect.addEventListener("click", connectMetaMaskWalletClick);
// Setup event listener to connect to the ledger snap
const ledgerConnect = <Element>document.querySelector("#ledger-connect-btn");
ledgerConnect.addEventListener("click", connectLedgerWalletClick);
const ledgerConnectValidate = <Element>document.querySelector("#connection-link-ledger-validate");
ledgerConnectValidate.addEventListener("click", validateLedgerConnectionClick);
// Setup event listener to login using private key
const pkConnect = <Element>document.querySelector("#private-key-connect-btn");
pkConnect.addEventListener("click", connectPrivateKeyWalletClick);
// Setup event listener to drop the connection again
const disconnectWallet = <Element>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 = <Element>document.querySelector("#address-btn");
addressBtn.addEventListener("click", contractAddressClick);
const updateStateBtn = <Element>document.querySelector("#update-state-btn");
updateStateBtn.addEventListener("click", updateContractState);
const getBalanceBtn = <Element>document.querySelector("#get-balance-btn");
getBalanceBtn.addEventListener("click", getBalance);
const loadMoreBtn = <Element>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 = <HTMLInputElement>document.querySelector("#address-to");
const amount = <HTMLInputElement>document.querySelector("#amount");
const memo = <HTMLInputElement>document.querySelector("#memo");
transactionErrorMessage.innerHTML = '<div class="loader"></div>';
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;
});
}
}

127
src/main/token/WalletIntegration.ts
View File

@ -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<ConnectedWallet>) => {
// 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<ConnectedWallet>) => {
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<ConnectedWallet>) => {
* 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 = <HTMLElement>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 = <HTMLInputElement>document.querySelector("#refresh-loader");
refreshLoader.classList.remove("hidden");
if (tokenApi.basicState != undefined) {
tokenApi.basicState(address).then((state) => {
const stateHeader = <HTMLInputElement>document.querySelector("#state-header");
const updateStateButton = <HTMLInputElement>document.querySelector("#update-state");
stateHeader.classList.remove("hidden");
updateStateButton.classList.remove("hidden");
const name = <HTMLElement>document.querySelector("#name");
name.innerHTML = `${state.name}`;
const decimals = <HTMLElement>document.querySelector("#decimals");
decimals.innerHTML = `${state.decimals}`;
const symbol = <HTMLElement>document.querySelector("#symbol");
symbol.innerHTML = `${state.symbol}`;
const owner = <HTMLElement>document.querySelector("#owner");
owner.innerHTML = `${state.owner.asString()}`;
const totalSupply = <HTMLElement>document.querySelector("#total-supply");
totalSupply.innerHTML = `${state.totalSupply}`;
const contractState = <HTMLElement>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 = <HTMLElement>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 = <Element>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 = <Element>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 = `<span class="address">${tokenOwner.asString()}</span>: ${amount}`;
ALL_BALANCES_LIST.appendChild(balance);
});
setContractLastBalanceKey(balancesResult.next_cursor);
// Setup event listener to connect to the ledger snap
const ledgerConnect = <Element>document.querySelector("#ledger-connect-btn");
ledgerConnect.addEventListener("click", connectLedgerWalletClick);
const loadMoreBtn = <Element>document.querySelector("#balances-load-more-btn");
if (balancesResult.next_cursor === undefined) {
loadMoreBtn.classList.add("hidden");
} else {
loadMoreBtn.classList.remove("hidden");
}
});
};
const ledgerConnectValidate = <Element>document.querySelector("#connection-link-ledger-validate");
ledgerConnectValidate.addEventListener("click", validateLedgerConnectionClick);
// Setup event listener to login using private key
const pkConnect = <Element>document.querySelector("#private-key-connect-btn");
pkConnect.addEventListener("click", connectPrivateKeyWalletClick);
// Setup event listener to drop the connection again
const disconnectWallet = <Element>document.querySelector("#wallet-disconnect-btn");
disconnectWallet.addEventListener("click", disconnectWalletClick);
}