diff --git a/docs/index.html b/docs/index.html index 321e97c..9c90208 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,125 +2,46 @@ The Mysterious Fox - + + - +
- -

Ask the mysterious 🦊 a question

-

›

-

You need MetaMask Flask to use this dapp.
Get MetaMask Flask

+ +

+ Ask the mysterious + Hazle tu pregunta al + 🦊 + a question + misterioso +

+

› + +

+

+ You need MetaMask Flask to use this dapp. + Necesitas usar MetaMask Flask con este sitio. +
+ + Get MetaMask Flask + Descargar MetaMask Flask + +

- - + + \ No newline at end of file diff --git a/docs/page.js b/docs/page.js new file mode 100644 index 0000000..2e6a8ab --- /dev/null +++ b/docs/page.js @@ -0,0 +1,110 @@ + +const getLanguage = () => navigator.userLanguage || (navigator.languages && navigator.languages.length && navigator.languages[0]) || navigator.language || navigator.browserLanguage || navigator.systemLanguage || 'en'; + +const language = getLanguage(); + +if(language.startsWith('es')) { + const esItems = document.querySelectorAll('span.lang-es'); + esItems.forEach((span) => { + span.style.display = 'inline'; + }); + const enItems = document.querySelectorAll('span.lang-en'); + enItems.forEach((span) => { + span.style.display = 'none'; + }); + document.getElementById('questionInput').style.width = '20rem'; +} + +if(window.ethereum===undefined) { + document.getElementById('connect').style.display = 'none'; + document.getElementById('content').style.borderWidth = '1px'; + document.getElementById('unavailable').style.display = 'block'; +} +const snapId = `npm:mystery-fox`; +const snapVersion = '2.0.0'; + +const connectButton = document.getElementById('connect') +const queryText = document.getElementById('questionInput'); +const queryButton = document.getElementById('query') + +document.getElementById('fox').addEventListener('click', (e) => { + getRandom(); +}) + +connectButton.addEventListener('click', connect) +queryText.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + getAnswer() + } +}) +queryButton.addEventListener('click', getAnswer) + +// here we get permissions to interact with and install the snap +async function connect () { + let requestParams = {}; + requestParams[snapId] = { + version: snapVersion + }; + const result = await ethereum.request({ + method: 'wallet_requestSnaps', + params: requestParams, + }); + + if(result) { + // user is now connected, enable the dApp UI + var elements = document.getElementsByClassName("disconnected"); + for (var i = 0; i < elements.length; i++) { + var el = elements.item(i); + el.style.display = 'none'; + } + document.getElementById('content').style.borderWidth = '1px'; + elements = document.getElementsByClassName("connected"); + for (i = 0; i < elements.length; i++) { + var el = elements.item(i); + el.style.display = 'block'; + } + document.getElementById('questionInput').focus(); + } +} + +async function getRandom () { + try { + const response = await ethereum.request({ + method: 'wallet_invokeSnap', + params: { + snapId: snapId, + request: { + method: 'random', + } + } + }); + alert("Result: " + response); + } catch (err) { + console.error(err); + alert('Problem happened: ' + err.message || err); + } +} + +async function getAnswer () { + try { + const question = document.getElementById('questionInput').value + if(question.length > 0) { + const response = await ethereum.request({ + method: 'wallet_invokeSnap', + params: { + snapId: snapId, + request: { + method: 'mystery', + params: { + question: question, + } + } + } + }); + document.getElementById('questionInput').value = ''; + document.getElementById('questionInput').focus(); + } + } catch (err) { + console.error(err); + } +} \ No newline at end of file diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 0000000..567040f --- /dev/null +++ b/docs/style.css @@ -0,0 +1,11 @@ +body { background:#222; color:#fafafa; margin:0; padding:0; font-family:'VT323', monospace; } +#page { width:100vw; height:100vh; display:flex; justify-content:center; align-items:center;} +#content { max-width:30rem; padding:18px; border:0 solid #fafafa; border-radius:2px; } +h1, p, input, button { font-size:1.5rem; font-weight:400; font-family:inherit; } +a, a:visited, a:focus { color:#fafafa; } +input { font-size:1.2rem; background-color:#222; color:#fafafa; border-width:0 0 1px 0; border-color:#fafafa; padding-bottom:2px; outline:none; } +#questionInput { width:24rem; } +button { background-color:#222; color:#fafafa; border:1px solid #fafafa; border-radius:2px; padding:3px 6px; cursor:pointer; } +button:active { border-color:#aaa; color:#aaa; } +.connected, #unavailable { display:none; } +.lang-es { display:none; } \ No newline at end of file