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

Swap WIP

Browse Source
This commit is contained in:
Jon Michael Aanes 2024-06-10 00:02:31 +02:00
parent 93c6385517
commit f70f23335b
Signed by: Jmaa
SSH Key Fingerprint: SHA256:Ab0GfHGCblESJx7JRE4fj4bFy/KRpeLhi41y4pF3sNA
2 changed files with 64 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,12 @@ interface ContractState {
type: ContractType | null,
}
interface Route {
from: BlockchainAddress | null,
to: BlockchainAddress | null,
swaps: BlockchainAddress[],
}
const ROUTERS: BlockchainAddress[] = [BlockchainAddress.fromString("02f8eb18e09dfe6797880c952527747202560338bf")];
type BlockchainAddressKey = string;
@ -38,6 +44,8 @@ const TOKENS: Record<BlockchainAddressKey, ContractState> = {};
const SWAPS: Record<BlockchainAddressKey, ContractState> = {};
const CURRENT_ROUTE: Route = { from: null, to: null, swaps: [] };
const SHARDED_CLIENT: ShardedClient = new ShardedClient(NETWORK.node_base_url, NETWORK.network_shards);
const AVL_CLIENT:AvlClient = new AvlClient(NETWORK .node_base_url, NETWORK.network_shards);;
@ -62,27 +70,51 @@ function address_to_url(address: BlockchainAddress): string {
return `${NETWORK.browser_base_url}/contracts/${address.asString()}`;
}
function ui_show_route() {
}
function reroute() {
// Do not route if from or to are not assigned yet.
if (CURRENT_ROUTE.from == null || CURRENT_ROUTE.to == null) {
return;
}
// Perform routing.
// TODO
}
function routeFrom(address: BlockchainAddress) {
CURRENT_ROUTE.from = address;
reroute();
}
function routeTo(address: BlockchainAddress) {
CURRENT_ROUTE.to = address;
reroute();
}
function ui_add_token(tokenState: TokenStateV1 | TokenStateV2, address: BlockchainAddress) {
const spanFrom = document.createElement("div");
spanFrom.innerHTML = `
<form class="pure-form" onSubmit="return false;">
<input
class="pure-button pure-button-primary"
id="private-key-connect-btn"
type="submit"
value="From" />
</form>
`;
spanFrom.addEventListener("click", () => routeFrom(address));
const spanTo = document.createElement("div");
spanTo.innerHTML = `
<form class="pure-form" onSubmit="return false;">
<input
class="pure-button pure-button-primary"
id="private-key-connect-btn"
type="submit"
value="To" />
</form>
`;
spanFrom.addEventListener("click", () => routeTo(address));
const spanSymbol= document.createElement("a");
spanSymbol.innerText = tokenState.symbol;
spanSymbol.title = tokenState.name;
@ -121,7 +153,6 @@ const RATE_DECIMALS = new BN(10000);
async function get_current_exchange_rate(swapAddress: BlockchainAddress): Promise<BN> {
const liquidity: TokenBalance = await get_current_liquidity(swapAddress);
const result = liquidity.aTokens.mul(RATE_DECIMALS).div(liquidity.bTokens);
console.log(`${liquidity.aTokens}.mul(${RATE_DECIMALS}).div(${liquidity.bTokens}) = ${result}`);
return result;
}

33
src/main/swap/index.html
View File

@ -14,6 +14,8 @@
max-width: 1200px;
width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
}
div {
@ -52,7 +54,18 @@
display: grid;
grid-template-columns: auto auto auto 1fr;
grid-gap: 1em;
max-width: 400px;
}
#route {
display: grid;
grid-template-columns: auto auto;
grid-gap: 1em;
align-content: start;
text-align: center;
}
.route-list {
grid-column: 1 / 3;
}
</style>
@ -64,10 +77,11 @@
</head>
<body>
<header style="text-align: center">
<h1>Dumb Defi UI</h1>
</header>
<div class="pure-g">
<div class="pure-u-1-1">
<h1>Dumb Defi UI</h1>
<div id="overview">
<h2>Token Overview</h2>
<div id="token-list">
@ -82,6 +96,19 @@
</div>
</div>
<div id="route">
<div data-input-token="">A</div>
<div data-output-token="">B</div>
<input data-input-amount="" type="number"/>
<input data-output-amount="" type="number"/>
<div class="route-list">
<div>1000 A to 3000 B (0.3% fee)</div>
<div>3000 B to 9000 C (0.3% fee)</div>
</div>
</div>
<div id="account">
<h2>Account</h2>
<p>