From f70f23335b34ad1b99419fa3ccbe3ddfc9f2b9ee Mon Sep 17 00:00:00 2001
From: Jon Michael Aanes <jonjmaa@gmail.com>
Date: Mon, 10 Jun 2024 00:02:31 +0200
Subject: [PATCH] Swap WIP

---
 src/main/swap/Main.ts    | 37 ++++++++++++++++++++++++++++++++++---
 src/main/swap/index.html | 33 ++++++++++++++++++++++++++++++---
 2 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/src/main/swap/Main.ts b/src/main/swap/Main.ts
index 6fd8263..6f7ae5c 100644
--- a/src/main/swap/Main.ts
+++ b/src/main/swap/Main.ts
@@ -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;
 }
 
diff --git a/src/main/swap/index.html b/src/main/swap/index.html
index 7cf2fff..0eef885 100644
--- a/src/main/swap/index.html
+++ b/src/main/swap/index.html
@@ -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>