Update index.html
This commit is contained in:
SaketAnand
parent
8c11d87c9b
commit
cdbf6ca5bc
223
index.html
223
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(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user