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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@ -231,6 +232,99 @@
|
|||||||
</header>
|
</header>
|
||||||
<div id="transaction_result_popup__content" class="grid gap-2"></div>
|
<div id="transaction_result_popup__content" class="grid gap-2"></div>
|
||||||
</sm-popup>
|
</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>
|
<script>
|
||||||
/* Constants for FLO blockchain operations !!Make sure to add this at beginning!! */
|
/* Constants for FLO blockchain operations !!Make sure to add this at beginning!! */
|
||||||
const floGlobals = {
|
const floGlobals = {
|
||||||
@ -317,6 +411,9 @@
|
|||||||
document.addEventListener("popupclosed", (e) => {
|
document.addEventListener("popupclosed", (e) => {
|
||||||
zIndex--;
|
zIndex--;
|
||||||
switch (e.target.id) {
|
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.
|
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
|
||||||
@ -555,8 +652,7 @@
|
|||||||
if (!value)
|
if (!value)
|
||||||
return {
|
return {
|
||||||
isValid: false,
|
isValid: false,
|
||||||
errorText:
|
errorText: "Please enter a Solana address",
|
||||||
"Please enter a Solana address",
|
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
isValid: (() => {
|
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",
|
selector: "#wallet_address_input",
|
||||||
customValidation: (value) => {
|
customValidation: (value) => {
|
||||||
@ -771,7 +896,7 @@
|
|||||||
<ul id="searched_addresses_list" class="grid gap-0-5"></ul>
|
<ul id="searched_addresses_list" class="grid gap-0-5"></ul>
|
||||||
</aside>
|
</aside>
|
||||||
<section id="balance_section" class="grid gap-1-5">
|
<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>
|
<sm-form>
|
||||||
<div id="input_wrapper">
|
<div id="input_wrapper">
|
||||||
<sm-input
|
<sm-input
|
||||||
@ -1020,7 +1145,8 @@
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const walletBalance = await getWalletBalance(walletAddress);
|
const walletBalance = await getWalletBalance(walletAddress);
|
||||||
const solBalance = walletBalance / solanaWeb3.LAMPORTS_PER_SOL;
|
const solBalance =
|
||||||
|
(await walletBalance) / solanaWeb3.LAMPORTS_PER_SOL;
|
||||||
|
|
||||||
// Interact with IndexedDB
|
// Interact with IndexedDB
|
||||||
const contactExists = await compactIDB.readData(
|
const contactExists = await compactIDB.readData(
|
||||||
@ -1041,7 +1167,7 @@
|
|||||||
<div class="label">Solana Wallet Address</div>
|
<div class="label">Solana Wallet Address</div>
|
||||||
<sm-copy id="sol_address">${walletAddress}</sm-copy>
|
<sm-copy id="sol_address">${walletAddress}</sm-copy>
|
||||||
</div>
|
</div>
|
||||||
${walletBalance === solBalance
|
${solBalance >= 0
|
||||||
? html`
|
? html`
|
||||||
<div class="grid gap-1">
|
<div class="grid gap-1">
|
||||||
<h4>Balance</h4>
|
<h4>Balance</h4>
|
||||||
@ -1366,7 +1492,7 @@
|
|||||||
: floSolana.solanaSeed2SolanaSecret(secret);
|
: floSolana.solanaSeed2SolanaSecret(secret);
|
||||||
let privateKey = floSolana.solanaSecret2UsableInCode(pKey);
|
let privateKey = floSolana.solanaSecret2UsableInCode(pKey);
|
||||||
console.log("private key", privateKey);
|
console.log("private key", privateKey);
|
||||||
const senderPrivateKeyArray = privateKey
|
const senderPrivateKeyArray = privateKey;
|
||||||
const senderKeypair = solanaWeb3.Keypair.fromSecretKey(
|
const senderKeypair = solanaWeb3.Keypair.fromSecretKey(
|
||||||
senderPrivateKeyArray
|
senderPrivateKeyArray
|
||||||
);
|
);
|
||||||
@ -1539,35 +1665,56 @@
|
|||||||
html`
|
html`
|
||||||
<div class="grid gap-1">
|
<div class="grid gap-1">
|
||||||
<h2>
|
<h2>
|
||||||
Don't have a Solana Address OR Bitcoin Private Key OR FLO Private Key?
|
Don't have an Solana Address OR Bitcoin Private Key OR FLO
|
||||||
Create one.
|
Private Key? Create one
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<section class="create-buttons">
|
||||||
class="button button--primary interactive gap-0-5 margin-right-auto"
|
<button
|
||||||
onclick=${generateNewID}
|
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"
|
|
||||||
>
|
>
|
||||||
<g>
|
<svg
|
||||||
<rect fill="none" height="24" width="24" />
|
class="icon"
|
||||||
</g>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<g>
|
enable-background="new 0 0 24 24"
|
||||||
|
height="24px"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24px"
|
||||||
|
fill="#000000"
|
||||||
|
>
|
||||||
<g>
|
<g>
|
||||||
<path
|
<rect fill="none" height="24" width="24" />
|
||||||
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>
|
||||||
</g>
|
<g>
|
||||||
</svg>
|
<g>
|
||||||
Generate new address
|
<path
|
||||||
</button>
|
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>
|
||||||
<div id="created_address_wrapper" class="grid gap-1"></div>
|
<div id="created_address_wrapper" class="grid gap-1"></div>
|
||||||
`
|
`
|
||||||
@ -1611,6 +1758,20 @@
|
|||||||
|
|
||||||
return uint8Array;
|
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() {
|
function generateNewID() {
|
||||||
const solanaKeyPair = floSolana.generateSolanaKeyPair();
|
const solanaKeyPair = floSolana.generateSolanaKeyPair();
|
||||||
renderElem(
|
renderElem(
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user