Skip to content
This repository has been archived by the owner on Sep 27, 2023. It is now read-only.

Commit

Permalink
Add link to source code
Browse files Browse the repository at this point in the history
  • Loading branch information
@chadoh
chadoh committed Sep 17, 2020
1 parent 090e90a commit 9812013
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 131 deletions.
264 changes: 134 additions & 130 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,66 @@
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<nav style="display: flex; align-items: stretch; position: absolute; right: 0.5em; top: 0.5em; z-index: 2">
<div data-behavior="signed-in" id="transfers" class="dropdown" aria-live="polite" style="display: none">
<button aria-controls="transfers">
<div data-behavior="transfers-none">
<picture>
<source srcset="img/bell-white.svg" media="(prefers-color-scheme: dark)">
<img style="width: 1em; vertical-align: middle" alt="no transfers" src="img/bell-black.svg">
</picture>
</div>
<div data-behavior="transfers-in-progress" style="display: none">
<picture>
<source srcset="img/rainbow-black.gif" media="(prefers-color-scheme: dark)">
<img style="width: 4em; vertical-align: middle" alt="view transfers" src="img/rainbow-white.gif">
</picture>
</div>
<div data-behavior="transfers-all-complete" style="display: none">
<picture>
<source srcset="img/bell-white.svg" media="(prefers-color-scheme: dark)">
<img style="width: 1em; vertical-align: middle" alt="no transfers" src="img/bell-black.svg">
</picture>
<div class="notification-indicator">
<span data-behavior="notification-count">#</span>
<span class="visually-hidden">notifications</span>
</div>
</div>
</button>
<div class="right">
<div data-behavior="transfers-none">
<div style="
display: flex;
flex-direction: column;
height: 3em;
justify-content: space-around;
text-align: center;
width: 10em;
">
No transfers
</div>
</div>
<div data-behavior="transfers-container"></div>
</div>
</div>
<div id="menu" class="dropdown" aria-live="polite" style="font-size: 0.8em">
<button class="menu-icon" aria-controls="menu">
<div></div>
<span class="visually-hidden">menu</span>
</button>
<div class="right" style="width: 7em">
<div>
<a href="https://github.com/near-examples/erc20-to-nep21">View source</a>
</div>
<div data-behavior="signed-in" style="display: none; margin-top: 0.5em">
<button class="link" data-behavior="logout">
Sign out
</button>
</div>
</div>
</div>
</nav>

<div data-behavior="signed-out">
<h1 class="title">Eth→NEAR Fungible Tokens</h1>
<div style="margin: 0 auto; max-width: 25em">
Expand All @@ -36,140 +96,84 @@ <h1 class="title">Eth→NEAR Fungible Tokens</h1>
</div>
</div>

<div data-behavior="signed-in" style="display: none; height: 100%; flex-direction: column; justify-content: space-between">
<nav style="display: flex; align-items: stretch; position: absolute; right: 0.5em; top: 0.5em; z-index: 2">
<div id="transfers" class="dropdown" aria-live="polite">
<button aria-controls="transfers">
<div data-behavior="transfers-none">
<picture>
<source srcset="img/bell-white.svg" media="(prefers-color-scheme: dark)">
<img style="width: 1em; vertical-align: middle" alt="no transfers" src="img/bell-black.svg">
</picture>
</div>
<div data-behavior="transfers-in-progress" style="display: none">
<picture>
<source srcset="img/rainbow-black.gif" media="(prefers-color-scheme: dark)">
<img style="width: 4em; vertical-align: middle" alt="view transfers" src="img/rainbow-white.gif">
</picture>
</div>
<div data-behavior="transfers-all-complete" style="display: none">
<picture>
<source srcset="img/bell-white.svg" media="(prefers-color-scheme: dark)">
<img style="width: 1em; vertical-align: middle" alt="no transfers" src="img/bell-black.svg">
</picture>
<div class="notification-indicator">
<span data-behavior="notification-count">#</span>
<span class="visually-hidden">notifications</span>
</div>
</div>
</button>
<div class="right">
<div data-behavior="transfers-none">
<div style="
display: flex;
flex-direction: column;
height: 3em;
justify-content: space-around;
text-align: center;
width: 10em;
">
No transfers
</div>
</div>
<div data-behavior="transfers-container"></div>
</div>
<main data-behavior="signed-in" style="display: none">
<section class="balance">
<header>
<img alt="ethereum" src="img/eth-diamond-purple.png">
Ethereum
</header>
<div>
<span id="erc20name" class="dropdown" aria-live="polite">
<button aria-controls="erc20name" data-behavior="ethErc20Name">🤔</button>
<small class="left" style="width:27em; text-align:left">
Contract <code data-behavior="ethErc20Address">🤔</code>
</small>
</span>
balance
</div>
<div id="menu" class="dropdown" aria-live="polite" style="font-size: 0.8em">
<button class="menu-icon" aria-controls="menu">
<div></div>
<span class="visually-hidden">menu</span>
</button>
<div class="right" style="width: 6em; text-align: center">
<button class="link" data-behavior="logout">
Sign out
<strong class="jumbo" data-behavior="erc20Balance">🤔</strong>
<footer>
<img alt="account" src="img/account.svg">
<code data-behavior="ethUser" class="clip">🤔</code>
</footer>
</section>
<div data-behavior="balanceZero" style="grid-column: span 2; margin: 1em 0 0 1em">
<p>
Uh oh! You have no <span data-behavior="ethErc20Name">🤔</span>
tokens. If you want to send some to yourself on NEAR, you'll need to
get some on Ethereum first 😄
</p>
<p data-behavior="abound-token" style="display: none">
You can <a href="https://chadoh.com/abundance-token" target="_blank">mint yourself more <span data-behavior="ethErc20Name">🤔</span></a>!
</p>
<p data-behavior="not-abound-token">
Maybe you need to use a different account?
</p>
</div>
<form data-behavior="balancePositive" style="display: none; margin: 3em 1em">
<fieldset id="fieldset">
<label
for="amount"
style="display: block; margin: -1em 0 0.1em"
>
Send
</label>
<div style="display: flex">
<input
autocomplete="off"
id="amount"
type="number"
/>
<button id="submit" aria-controls="transfers" disabled style="border-radius: 0 5px 5px 0">
<span class="visually-hidden">Confirm</span>
</button>
</div>
</fieldset>
</form>
<section class="balance" data-behavior="balancePositive" style="display: none">
<header>
<picture>
<source srcset="img/near-icon-white.svg" media="(prefers-color-scheme: dark)">
<img alt="near" src="img/near-icon-black.svg">
</picture>
NEAR
</header>
<div>
<span id="nep21name" class="dropdown" aria-live="polite">
<button aria-controls="nep21name" data-behavior="nearNep21Name">🤔</button>
<small class="right" style="width:14em">
Contract <code data-behavior="nearFunTokenAccount">🤔</code>
</small>
</span>
balance
</div>
</nav>
<main>
<section class="balance">
<header>
<img alt="ethereum" src="img/eth-diamond-purple.png">
Ethereum
</header>
<div>
<span id="erc20name" class="dropdown" aria-live="polite">
<button aria-controls="erc20name" data-behavior="ethErc20Name">🤔</button>
<small class="left" style="width:27em; text-align:left">
Contract <code data-behavior="ethErc20Address">🤔</code>
</small>
</span>
balance
</div>
<strong class="jumbo" data-behavior="erc20Balance">🤔</strong>
<footer>
<img alt="account" src="img/account.svg">
<code data-behavior="ethUser" class="clip">🤔</code>
</footer>
</section>
<div data-behavior="balanceZero" style="grid-column: span 2; margin: 1em 0 0 1em">
<p>
Uh oh! You have no <span data-behavior="ethErc20Name">🤔</span>
tokens. If you want to send some to yourself on NEAR, you'll need to
get some on Ethereum first 😄
</p>
<p data-behavior="abound-token" style="display: none">
You can <a href="https://chadoh.com/abundance-token" target="_blank">mint yourself more <span data-behavior="ethErc20Name">🤔</span></a>!
</p>
<p data-behavior="not-abound-token">
Maybe you need to use a different account?
</p>
</div>
<form data-behavior="balancePositive" style="display: none; margin: 3em 1em">
<fieldset id="fieldset">
<label
for="amount"
style="display: block; margin: -1em 0 0.1em"
>
Send
</label>
<div style="display: flex">
<input
autocomplete="off"
id="amount"
type="number"
/>
<button id="submit" aria-controls="transfers" disabled style="border-radius: 0 5px 5px 0">
<span class="visually-hidden">Confirm</span>
</button>
</div>
</fieldset>
</form>
<section class="balance" data-behavior="balancePositive" style="display: none">
<header>
<picture>
<source srcset="img/near-icon-white.svg" media="(prefers-color-scheme: dark)">
<img alt="near" src="img/near-icon-black.svg">
</picture>
NEAR
</header>
<div>
<span id="nep21name" class="dropdown" aria-live="polite">
<button aria-controls="nep21name" data-behavior="nearNep21Name">🤔</button>
<small class="right" style="width:14em">
Contract <code data-behavior="nearFunTokenAccount">🤔</code>
</small>
</span>
balance
</div>
<strong class="jumbo" data-behavior="nep21Balance">🤔</strong>
<footer>
<img alt="account" src="img/account.svg">
<code data-behavior="nearUser" class="clip">🤔</code>
</footer>
</section>
</main>
</div>
<strong class="jumbo" data-behavior="nep21Balance">🤔</strong>
<footer>
<img alt="account" src="img/account.svg">
<code data-behavior="nearUser" class="clip">🤔</code>
</footer>
</section>
</main>

<script src="./js/index.js"></script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion src/js/render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,5 +114,5 @@ export default async function render () {
fill('nep21Balance').with(formatLargeNum(nep21Balance))

hide('signed-out')
show('signed-in', 'flex')
show('signed-in')
}

0 comments on commit 9812013

Please sign in to comment.