Skip to content
This repository has been archived by the owner on Feb 13, 2024. It is now read-only.

Commit

Permalink
chore: use wallet-connection component
Browse files Browse the repository at this point in the history
  • Loading branch information
@samsiegart
samsiegart committed Dec 12, 2021
1 parent 6279b46 commit b0383d2
Show file tree
Hide file tree
Showing 8 changed files with 302 additions and 410 deletions.
3 changes: 3 additions & 0 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@
"regenerator-runtime": "0.13.7"
},
"devDependencies": {
"@agoric/notifier": "^0.3.32",
"@agoric/wallet-connection": "^0.1.2",
"agoric": "*",
"caniuse-lite": "1.0.30001251",
"eslint": "^7.23.0",
Expand All @@ -60,6 +62,7 @@
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2",
"lit": "^2.0.2",
"prettier": "^2.1.2",
"rimraf": "^3.0.2",
"ses": "^0.14.2"
Expand Down
197 changes: 116 additions & 81 deletions ui/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,29 @@
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="conf/dappConstants.js"></script>
<link rel="stylesheet"
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link
rel="stylesheet"
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
/>

<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
</head>
<body>
<agoric-wallet-connection style="display: none"></agoric-wallet-connection>
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<span class="mdc-top-app-bar__title">Fungible Token Faucet</span> </section>
<section class="mdc-top-app-bar__section
mdc-top-app-bar__section--align-end mdc-typography--body1">
<span class="material-icons">
power_settings_new
</span>
<section
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
>
<span class="mdc-top-app-bar__title">Fungible Token Faucet</span>
</section>
<section
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end mdc-typography--body1"
>
<span class="material-icons"> power_settings_new </span>
<div class="status">
Agoric wallet: <span id="wallet-status">Unknown</span>
</div>
Expand All @@ -34,110 +41,139 @@
</div>
</header>

<noscript>You need to enable JavaScript to run this
app.</noscript>
<noscript>You need to enable JavaScript to run this app.</noscript>

<div class="grid">
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-12">

</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-tablet">
<div class="mdc-card mint-card">

<div class="mdc-card__media mdc-card__media--16-9 mint-card__media" style="background-image: url(&quot;./assets/coins.jpeg&quot;);"></div>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-12"></div>
<div
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-tablet"
>
<div class="mdc-card mint-card">
<div
class="mdc-card__media mdc-card__media--16-9 mint-card__media"
style="background-image: url('./assets/coins.jpeg')"
></div>
<div class="mint-card__primary">
<h2 class="mint-card__title mdc-typography
mdc-typography--headline6">Fungible Faucet</h2>
<h2
class="mint-card__title mdc-typography mdc-typography--headline6"
>
Fungible Faucet
</h2>
</div>
<div
class="mint-card__secondary mdc-typography mdc-typography--body2"
>
Mint 1000 fungible tokens and send them to your wallet.
</div>
<div class="mint-card__secondary mdc-typography
mdc-typography--body2">Mint 1000 fungible tokens and
send them to your wallet.</div>
</div>
</div>

</div>
<div class="mdc-layout-grid__cell--span-12-tablet mdc-layout-grid__cell--span-8-desktop" id="instructions">
<h1 class="mdc-typography--headline2">Fungible Token Faucet</h1>
<div class="mdc-typography--headline6">Instructions</div>
<div class="mdc-typography--body1">
<p>First, please enable this dapp in your wallet. To open your
wallet, enter `agoric open` in your terminal.</p>

<p>Then click on the button below to mint fungible tokens and send
the resulting payment to your wallet.</p>
<div
class="mdc-layout-grid__cell--span-12-tablet mdc-layout-grid__cell--span-8-desktop"
id="instructions"
>
<h1 class="mdc-typography--headline2">Fungible Token Faucet</h1>
<div class="mdc-typography--headline6">Instructions</div>
<div class="mdc-typography--body1">
<p>
First, please enable this dapp in your wallet. To open your
wallet, enter `agoric open` in your terminal.
</p>

<p>
Then click on the button below to mint fungible tokens and send
the resulting payment to your wallet.
</p>
</div>
<form id="fungibleTokenForm" onsubmit="return false">
<button
class="mdc-button mdc-button--raised"
type="submit"
value="Mint Fungible Tokens"
id="mintFungible"
disabled="disabled"
>
<span class="mdc-button__ripple"></span> Mint Fungible Tokens
</button>
<span
><iframe
id="walletBridgeIFrame"
width="100"
height="21"
></iframe
></span>
</form>
</div>
<form id="fungibleTokenForm" onsubmit="return false">
<button class="mdc-button mdc-button--raised" type="submit" value="Mint Fungible Tokens" id="mintFungible" disabled="disabled"> <span
class="mdc-button__ripple"></span> Mint Fungible Tokens</button>
<span><iframe id="walletBridgeIFrame" width="100" height="21"></iframe></span>
</form>
</div>
</div>
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-12">
<div id="debug-mode">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input type="checkbox" id="debug" class="mdc-switch__native-control" role="switch" aria-checked="false">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-12">
<div id="debug-mode">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="debug"
class="mdc-switch__native-control"
role="switch"
aria-checked="false"
/>
</div>
</div>
<label class="mdc-typography--body1" for="debug"
>Debug Mode</label
>
<div id="messages" class="messages"></div>
</div>
<label class="mdc-typography--body1" for="debug">Debug
Mode</label>
<div id="messages" class="messages"></div>
</div>
</div>
</div>
</div>

</div>



<div class="mdc-snackbar" id="approve-offer">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label"
role="status"
aria-live="polite">
<div class="mdc-snackbar__label" role="status" aria-live="polite">
Please approve the offer in your wallet to receive the payment.
</div>
</div>
</div>

<div class="mdc-snackbar" id="got-payment">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label"
role="status"
aria-live="polite">
You just got 1000 more tokens! Check your token purse in
your wallet to see the current balance.
<div class="mdc-snackbar__label" role="status" aria-live="polite">
You just got 1000 more tokens! Check your token purse in your wallet
to see the current balance.
</div>
</div>
</div>

<div class="mdc-dialog" id="open-wallet">
<div class="mdc-dialog__container">
<div class="mdc-dialog__surface"
<div
class="mdc-dialog__surface"
role="alertdialog"
aria-modal="true"
aria-labelledby="my-dialog-title"
aria-describedby="my-dialog-content">
<div class="mdc-dialog__title">
Enable the Fungible Faucet Dapp
</div>
aria-describedby="my-dialog-content"
>
<div class="mdc-dialog__title">Enable the Fungible Faucet Dapp</div>
<div class="mdc-dialog__content" id="my-dialog-content">
Before using the dapp, you must enable it. To enable the dapp,
please open your wallet by using the <code style="color: red">agoric
open</code>
please open your wallet by using the
<code style="color: red">agoric open</code>
command in your terminal. Then, under "Dapps", enable
FungibleFaucet.
<img id="enable-dapp" src="./assets/enable-dapp.png" width="100%">

<img id="enable-dapp" src="./assets/enable-dapp.png" width="100%" />
</div>
<div class="mdc-dialog__actions">
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept" data-mdc-dialog-button-default>
<button
type="button"
class="mdc-button mdc-dialog__button"
data-mdc-dialog-action="accept"
data-mdc-dialog-button-default
>
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">OK</span>
</button>
Expand All @@ -147,10 +183,9 @@ <h1 class="mdc-typography--headline2">Fungible Token Faucet</h1>
<div class="mdc-dialog__scrim"></div>
</div>

<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@^11.0.0/dist/material-components-web.min.js"></script>

<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@^11.0.0/dist/material-components-web.min.js"></script>

<script type="module" src="src/main.js"></script>
<script type="module" src="src/main.js"></script>
</body>
</html>
88 changes: 0 additions & 88 deletions ui/public/lib/agoric-wallet.html
View file

This file was deleted.

1 change: 0 additions & 1 deletion ui/public/lib/api-client.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// @ts-check
/* globals window, WebSocket */

import { registerSocket, closeSocket, getActiveSocket } from './socket.js';

import dappConstants from './constants.js';
Expand Down
Loading

0 comments on commit b0383d2

Please sign in to comment.