From cdbf6ca5bc928dfdb7a3e01d12d6d6ad445e7b5e Mon Sep 17 00:00:00 2001
From: SaketAnand <saketurfrnd@gmail.com>
Date: Sun, 7 Jul 2024 15:29:48 +0530
Subject: [PATCH] Update index.html

---
 index.html | 223 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 192 insertions(+), 31 deletions(-)
diff --git a/index.html b/index.html
index 199c132..452066d 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -231,6 +232,99 @@
       </header>
       <div id="transaction_result_popup__content" class="grid gap-2"></div>
     </sm-popup>
+    <sm-popup id="retrieve_btc_addr_popup">
+      <header slot="header" class="popup__header">
+        <div class="flex align-center">
+          <button class="popup__header__close" onclick="closePopup()">
+            <svg
+              class="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+              />
+            </svg>
+          </button>
+        </div>
+      </header>
+      <section class="grid gap-1-5">
+        <div class="grid gap-0-5">
+          <h4>Did you forget your Solana Address?</h4>
+          <p>
+            If you have your Solana Seed, enter it here and recover your Solana
+            Address.
+          </p>
+        </div>
+        <sm-form>
+          <div id="recovered_btc_addr_wrapper" class="hidden">
+            <h5>Recovered Solana Address</h5>
+            <sm-copy id="recovered_btc_addr"></sm-copy>
+          </div>
+          <sm-input
+            id="retrieve_btc_addr_field"
+            type="password"
+            placeholder="Solana Seed"
+            class="password-field"
+            data-seed-key
+            required
+            autofocus
+          >
+            <label slot="right" class="interact">
+              <input
+                type="checkbox"
+                class="hidden"
+                autocomplete="off"
+                readonly
+                onchange="togglePrivateKeyVisibility(this)"
+              />
+              <svg
+                class="icon invisible"
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <title>Hide password</title>
+                <path
+                  d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
+                />
+              </svg>
+              <svg
+                class="icon visible"
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <title>Show password</title>
+                <path d="M0 0h24v24H0z" fill="none" />
+                <path
+                  d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                />
+              </svg>
+            </label>
+          </sm-input>
+          <button
+            class="button button--primary cta"
+            type="submit"
+            onclick="retrieveSolanaAddr()"
+          >
+            Recover
+          </button>
+        </sm-form>
+      </section>
+    </sm-popup>
     <script>
       /* Constants for FLO blockchain operations !!Make sure to add this at beginning!! */
       const floGlobals = {
@@ -317,6 +411,9 @@
       document.addEventListener("popupclosed", (e) => {
         zIndex--;
         switch (e.target.id) {
+          case 'retrieve_btc_addr_popup':
+                    getRef('recovered_btc_addr_wrapper').classList.add('hidden')
+                    break;
         }
       });
       //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
@@ -555,8 +652,7 @@
               if (!value)
                 return {
                   isValid: false,
-                  errorText:
-                    "Please enter a Solana address",
+                  errorText: "Please enter a Solana address",
                 };
               return {
                 isValid: (() => {
@@ -603,6 +699,35 @@
               };
             },
           },
+          {
+            selector: "[data-seed-key]",
+            customValidation: (value) => {
+              if (!value)
+                return {
+                  isValid: false,
+                  errorText:
+                    "Please enter a Solana Seed",
+                };
+              return {
+                isValid: (() => {
+                  try {
+                    const secret = floSolana.solanaSeed2SolanaSecret(value);
+                    const secretKey =
+                      floSolana.solanaSecret2UsableInCode(secret);
+                    const keypair = solanaWeb3.Keypair.fromSecretKey(
+                      Uint8Array.from(
+                        secretKey.toString().split(",").map(Number)
+                      )
+                    );
+                    return true;
+                  } catch (err) {
+                    return false;
+                  }
+                })(),
+                errorText: `Invalid Solana Seed. Please check and try again`,
+              };
+            },
+          },
           {
             selector: "#wallet_address_input",
             customValidation: (value) => {
@@ -771,7 +896,7 @@
               <ul id="searched_addresses_list" class="grid gap-0-5"></ul>
             </aside>
             <section id="balance_section" class="grid gap-1-5">
-              <h2>Check Solana Wallet SOL balance</h2>
+              <h2>Check Solana wallet SOL balance</h2>
               <sm-form>
                 <div id="input_wrapper">
                   <sm-input
@@ -1020,7 +1145,8 @@
 
         try {
           const walletBalance = await getWalletBalance(walletAddress);
-          const solBalance = walletBalance / solanaWeb3.LAMPORTS_PER_SOL;
+          const solBalance =
+            (await walletBalance) / solanaWeb3.LAMPORTS_PER_SOL;
 
           // Interact with IndexedDB
           const contactExists = await compactIDB.readData(
@@ -1041,7 +1167,7 @@
                 <div class="label">Solana Wallet Address</div>
                 <sm-copy id="sol_address">${walletAddress}</sm-copy>
               </div>
-              ${walletBalance === solBalance
+              ${solBalance >= 0
                 ? html`
                     <div class="grid gap-1">
                       <h4>Balance</h4>
@@ -1366,7 +1492,7 @@
               : floSolana.solanaSeed2SolanaSecret(secret);
           let privateKey = floSolana.solanaSecret2UsableInCode(pKey);
           console.log("private key", privateKey);
-          const senderPrivateKeyArray = privateKey
+          const senderPrivateKeyArray = privateKey;
           const senderKeypair = solanaWeb3.Keypair.fromSecretKey(
             senderPrivateKeyArray
           );
@@ -1539,35 +1665,56 @@
           html`
             <div class="grid gap-1">
               <h2>
-                Don't have a Solana Address OR Bitcoin Private Key OR FLO Private Key?
-                Create one.
+                Don't have an Solana Address OR Bitcoin Private Key OR FLO
+                Private Key? Create one
               </h2>
-              <button
-                class="button button--primary interactive gap-0-5 margin-right-auto"
-                onclick=${generateNewID}
-              >
-                <svg
-                  class="icon"
-                  xmlns="http://www.w3.org/2000/svg"
-                  enable-background="new 0 0 24 24"
-                  height="24px"
-                  viewBox="0 0 24 24"
-                  width="24px"
-                  fill="#000000"
+              <section class="create-buttons">
+                <button
+                  class="button button--primary interactive gap-0-5 margin-right-auto"
+                  onclick=${generateNewID}
                 >
-                  <g>
-                    <rect fill="none" height="24" width="24" />
-                  </g>
-                  <g>
+                  <svg
+                    class="icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    enable-background="new 0 0 24 24"
+                    height="24px"
+                    viewBox="0 0 24 24"
+                    width="24px"
+                    fill="#000000"
+                  >
                     <g>
-                      <path
-                        d="M18.32,4.26C16.84,3.05,15.01,2.25,13,2.05v2.02c1.46,0.18,2.79,0.76,3.9,1.62L18.32,4.26z M19.93,11h2.02 c-0.2-2.01-1-3.84-2.21-5.32L18.31,7.1C19.17,8.21,19.75,9.54,19.93,11z M18.31,16.9l1.43,1.43c1.21-1.48,2.01-3.32,2.21-5.32 h-2.02C19.75,14.46,19.17,15.79,18.31,16.9z M13,19.93v2.02c2.01-0.2,3.84-1,5.32-2.21l-1.43-1.43 C15.79,19.17,14.46,19.75,13,19.93z M13,12V7h-2v5H7l5,5l5-5H13z M11,19.93v2.02c-5.05-0.5-9-4.76-9-9.95s3.95-9.45,9-9.95v2.02 C7.05,4.56,4,7.92,4,12S7.05,19.44,11,19.93z"
-                      />
+                      <rect fill="none" height="24" width="24" />
                     </g>
-                  </g>
-                </svg>
-                Generate new address
-              </button>
+                    <g>
+                      <g>
+                        <path
+                          d="M18.32,4.26C16.84,3.05,15.01,2.25,13,2.05v2.02c1.46,0.18,2.79,0.76,3.9,1.62L18.32,4.26z M19.93,11h2.02 c-0.2-2.01-1-3.84-2.21-5.32L18.31,7.1C19.17,8.21,19.75,9.54,19.93,11z M18.31,16.9l1.43,1.43c1.21-1.48,2.01-3.32,2.21-5.32 h-2.02C19.75,14.46,19.17,15.79,18.31,16.9z M13,19.93v2.02c2.01-0.2,3.84-1,5.32-2.21l-1.43-1.43 C15.79,19.17,14.46,19.75,13,19.93z M13,12V7h-2v5H7l5,5l5-5H13z M11,19.93v2.02c-5.05-0.5-9-4.76-9-9.95s3.95-9.45,9-9.95v2.02 C7.05,4.56,4,7.92,4,12S7.05,19.44,11,19.93z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                  Generate new address
+                </button>
+                <button
+                  class="button button--primary interactive gap-0-5 margin-right-auto"
+                  onclick="openPopup('retrieve_btc_addr_popup')"
+                >
+                  <svg
+                    class="icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="24px"
+                    viewBox="0 0 24 24"
+                    width="24px"
+                    fill="#000000"
+                  >
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                      d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"
+                    />
+                  </svg>
+                  Retrieve Solana address
+                </button>
+              </section>
             </div>
             <div id="created_address_wrapper" class="grid gap-1"></div>
           `
@@ -1611,6 +1758,20 @@
 
         return uint8Array;
       }
+      function retrieveSolanaAddr() {
+            function retrieve() {
+                let seed = getRef('retrieve_btc_addr_field').value.trim();
+                getRef('recovered_btc_addr_wrapper').classList.remove('hidden')
+                getRef('recovered_btc_addr').value = floSolana.solanaSeed2SolanaAddress(seed);
+            }
+            if (document.startViewTransition) {
+                document.startViewTransition(() => {
+                    retrieve()
+                })
+            } else
+                retrieve()
+        }
+
       function generateNewID() {
         const solanaKeyPair = floSolana.generateSolanaKeyPair();
         renderElem(
