mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 09:23:21 +01:00
refactor & change html pages
This commit is contained in:
pldespaigne
parent
987e58d103
commit
2d58cfc7a0
52
app/404.html
52
app/404.html
@ -1,52 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>MetaMask</title>
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
}
|
||||
html, body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.app{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
h2{
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
left: 0;
|
||||
color: #1b243d;
|
||||
text-align: center;
|
||||
}
|
||||
h2 > a{
|
||||
color: #1b243d;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<img src="./images/404.png" alt="">
|
||||
<h2>Powered by <a href="https://www.portal.network/">Portal Network</a></h2>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,79 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>MetaMask Error</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet">
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
}
|
||||
html, body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@keyframes logoAmin{
|
||||
from {transform: scale(1);}
|
||||
50%{transform: scale(1.1);}
|
||||
to {transform: scale(1);}
|
||||
}
|
||||
.errorBox{
|
||||
width: 70%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
background-image: url("./images/deadface.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
background-size: auto 90%;
|
||||
padding: 5px;
|
||||
}
|
||||
.errorBox > img{
|
||||
width: 100px;
|
||||
height: auto;
|
||||
margin-bottom: 25px;
|
||||
animation: logoAmin 1s infinite linear;
|
||||
}
|
||||
.errorBox > h1, .errorBox > h2{
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.errorBox > h1{
|
||||
color: #9b9b9b;
|
||||
font-size: 40px;
|
||||
}
|
||||
.errorBox > h2{
|
||||
color: #1b243d;
|
||||
font-size: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.errorBox > h2 >a{
|
||||
color: #1b243d;
|
||||
}
|
||||
.errorBox > h2 >a:hover{
|
||||
color: #44588e;
|
||||
}
|
||||
|
||||
.errorBox > h1 > span{
|
||||
color: #33559f;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="errorBox">
|
||||
<img src="./images/logo.png" alt="">
|
||||
<h1><span id="name"></span> not found</h1>
|
||||
<h2>Powered by <a href="https://www.portal.network/">Portal Network</a></h2>
|
||||
</div>
|
||||
<script>
|
||||
let index = location.href.lastIndexOf("?name=")
|
||||
let name = location.href.slice(index + 6)
|
||||
document.getElementById("name").innerHTML = name
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
app/images/enslogo.svg
Normal file
1
app/images/enslogo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72.52 80.95"><defs><style>.cls-3{fill:#a0a8d4}</style><linearGradient id="linear-gradient" x1="41.95" y1="2.57" x2="12.57" y2="34.42" gradientUnits="userSpaceOnUse"><stop offset=".58" stop-color="#a0a8d4"/><stop offset=".73" stop-color="#8791c7"/><stop offset=".91" stop-color="#6470b4"/></linearGradient><linearGradient id="linear-gradient-2" x1="42.57" y1="81.66" x2="71.96" y2="49.81" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="42.26" y1="1.24" x2="42.26" y2="82.84" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#513eff"/><stop offset=".18" stop-color="#5157ff"/><stop offset=".57" stop-color="#5298ff"/><stop offset="1" stop-color="#52e5ff"/></linearGradient></defs><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><path d="M15.28 34.39c.8 1.71 2.78 5.09 2.78 5.09L40.95 1.64l-22.34 15.6a9.75 9.75 0 0 0-3.18 3.5 16.19 16.19 0 0 0-.15 13.65z" transform="translate(-6 -1.64)" fill="url(#linear-gradient)"/><path class="cls-3" d="M6.21 46.85a25.47 25.47 0 0 0 10 18.51l24.71 17.23s-15.46-22.28-28.5-44.45a22.39 22.39 0 0 1-2.62-7.56 12.1 12.1 0 0 1 0-3.63c-.34.63-1 1.92-1 1.92a29.35 29.35 0 0 0-2.67 8.55 52.28 52.28 0 0 0 .08 9.43z" transform="translate(-6 -1.64)"/><path d="M69.25 49.84c-.8-1.71-2.78-5.09-2.78-5.09L43.58 82.59 65.92 67a9.75 9.75 0 0 0 3.18-3.5 16.19 16.19 0 0 0 .15-13.66z" transform="translate(-6 -1.64)" fill="url(#linear-gradient-2)"/><path class="cls-3" d="M78.32 37.38a25.47 25.47 0 0 0-10-18.51L43.61 1.64s15.45 22.28 28.5 44.45a22.39 22.39 0 0 1 2.61 7.56 12.1 12.1 0 0 1 0 3.63c.34-.63 1-1.92 1-1.92a29.35 29.35 0 0 0 2.67-8.55 52.28 52.28 0 0 0-.07-9.43z" transform="translate(-6 -1.64)"/><path d="M15.43 20.74a9.75 9.75 0 0 1 3.18-3.5l22.34-15.6-22.89 37.85s-2-3.38-2.78-5.09a16.19 16.19 0 0 1 .15-13.66zM6.21 46.85a25.47 25.47 0 0 0 10 18.51l24.71 17.23s-15.46-22.28-28.5-44.45a22.39 22.39 0 0 1-2.62-7.56 12.1 12.1 0 0 1 0-3.63c-.34.63-1 1.92-1 1.92a29.35 29.35 0 0 0-2.67 8.55 52.28 52.28 0 0 0 .08 9.43zm63 3c-.8-1.71-2.78-5.09-2.78-5.09L43.58 82.59 65.92 67a9.75 9.75 0 0 0 3.18-3.5 16.19 16.19 0 0 0 .15-13.66zm9.07-12.46a25.47 25.47 0 0 0-10-18.51L43.61 1.64s15.45 22.28 28.5 44.45a22.39 22.39 0 0 1 2.61 7.56 12.1 12.1 0 0 1 0 3.63c.34-.63 1-1.92 1-1.92a29.35 29.35 0 0 0 2.67-8.55 52.28 52.28 0 0 0-.07-9.43z" transform="translate(-6 -1.64)" style="mix-blend-mode:color" fill="url(#linear-gradient-3)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -11,10 +11,10 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 256px;
|
||||
text-align: center;
|
||||
}
|
||||
#logo {
|
||||
width: 100%;
|
||||
width: 256px;
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
@ -33,13 +33,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="div-logo">
|
||||
<img id="logo" src="./images/loginglogo.svg">
|
||||
<img id="logo" src="./images/enslogo.svg">
|
||||
<h1 class="center">MetaMask is querying ENS ...</h1>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
// redirect to 404 after one minute
|
||||
setTimeout(() => {
|
||||
location.href = './404.html'
|
||||
}, 60000)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -37,33 +37,25 @@ function setupEnsIpfsResolver ({ provider }) {
|
||||
|
||||
async function attemptResolve ({ tabId, name, path, search }) {
|
||||
extension.tabs.update(tabId, { url: `loading.html` })
|
||||
let url = `https://manager.ens.domains/name/${name}`
|
||||
try {
|
||||
let url = '400.html'
|
||||
const {type, hash} = await resolveEnsToIpfsContentId({ provider, name })
|
||||
if (type === 'ipfs-ns') {
|
||||
url = `https://gateway.ipfs.io/ipfs/${hash}${path}${search || ''}`
|
||||
const resolvedUrl = `https://gateway.ipfs.io/ipfs/${hash}${path}${search || ''}`
|
||||
try {
|
||||
// check if ipfs gateway has result
|
||||
const response = await fetch(url, { method: 'HEAD' })
|
||||
// if failure, redirect to 404 page
|
||||
if (response.status !== 200) {
|
||||
extension.tabs.update(tabId, { url: '404.html' })
|
||||
return
|
||||
}
|
||||
// otherwise redirect to the correct page
|
||||
extension.tabs.update(tabId, { url })
|
||||
const response = await fetch(resolvedUrl, { method: 'HEAD' })
|
||||
if (response.status === 200) url = resolvedUrl
|
||||
} catch (err) {
|
||||
console.warn(err)
|
||||
// if HEAD fetch failed, redirect so user can see relevant error page
|
||||
extension.tabs.update(tabId, { url })
|
||||
}
|
||||
} else if (type === 'swarm-ns') {
|
||||
url = `https://swarm-gateways.net/bzz:/${hash}${path}${search || ''}`
|
||||
}
|
||||
extension.tabs.update(tabId, { url })
|
||||
} catch (err) {
|
||||
console.warn(err)
|
||||
extension.tabs.update(tabId, { url: `error.html?name=${name}` })
|
||||
} finally {
|
||||
extension.tabs.update(tabId, { url })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user