Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change mnemonic display #22

Merged
merged 2 commits into from
Dec 11, 2023
Merged

Change mnemonic display #22

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ff9c34
display mnemonics like keys
Dec 7, 2023
e174e88
simplify styling by removing padding and border
Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 3 additions & 75 deletions export/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,16 +405,12 @@ <h2>Message log</h2>
});

const style = {
padding: "10px",
borderRadius: "8px",
borderWidth: "1px",
borderStyle: "solid",
borderColor: "rgba(216, 219, 227, 1)",
border: "none",
color: "#555b64",
fontWeight: "400",
fontSize: ".875rem",
lineHeight: "1.25rem",
fontFamily: "\"iA Writer Mono\", SFMono-Regular, Menlo, Consolas, monospace;",
fontFamily: "\"iA Writer Mono\", SFMono-Regular, Menlo, Consolas, monospace",
};

// Create a new div with the key material and append the new div to the body
Expand All @@ -427,74 +423,6 @@ <h2>Message log</h2>
document.body.appendChild(keyDiv);
}

/**
* Hide every HTML element in <body> except any <script> elements.
* Then append an element containing the wallet's mnemonic in a
* 3-column table where each row contains 3 words and their
* corresponding index.
* @param wallet
*
* TODO: Append element for passphrase after import is released
*/
const displayWallet = wallet => {
Array.from(document.body.children).forEach(child => {
if (child.tagName !== "SCRIPT") {
child.style.display = 'none';
}
});

const words = wallet.mnemonic.split(" ");

const numberCellStyle = {
backgroundColor: "#f9fbff",
border: "1px solid #ebedf2",
padding: "10px",
width: "20px",
color: "#6c727e",
height: "20px",
};

const wordCellStyle = {
border: "1px solid #ebedf2",
padding: "10px",
height: "20px",
}

const table = document.createElement("table");
const tbody = document.createElement("tbody");
tbody.id = "mnemonic-tbody";
table.id = "mnemonic-table";
table.appendChild(tbody);
table.style.borderCollapse = "collapse";
table.style.marginLeft = "auto";
table.style.marginRight = "auto";

for (let i = 0; i < words.length; i += 3) {
let row = document.createElement("tr");
for (let j = 0; j < 3; j++) {
if (i + j < words.length) {
let cellIndex = document.createElement("td");
cellIndex.innerText = i + j + 1;
for (let styleKey in numberCellStyle) {
cellIndex.style[styleKey] = numberCellStyle[styleKey];
}
row.appendChild(cellIndex);

let cellWord = document.createElement("td");
cellWord.innerText = words[i + j];
for (let styleKey in wordCellStyle) {
cellWord.style[styleKey] = wordCellStyle[styleKey];
}
row.appendChild(cellWord);
}
}

tbody.appendChild(row);
}

document.body.appendChild(table);
}

/**
* Parse and decrypt the export bundle.
* The `bundle` param is a JSON string of the encapsulated public
Expand Down Expand Up @@ -545,7 +473,7 @@ <h2>Message log</h2>
const wallet = TKHQ.parseWallet(new Uint8Array(walletBytes));

// Display only the wallet's mnemonic
displayWallet(wallet);
displayKey(wallet.mnemonic);

// Send up BUNDLE_INJECTED message
TKHQ.sendMessageUp("BUNDLE_INJECTED", true)
Expand Down
Loading