UNPKG

cloutcontracts

Version:

CCS Agoric DAPP Implementation

160 lines (139 loc) 6.18 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Fungible Token Faucet</title> <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"> </head> <body> <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> <div class="status"> Agoric wallet: <span id="wallet-status">Unknown</span> </div> <div class="status"> API server: <span id="api-status">Unknown</span> </div> </section> </div> </header> <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="mint-card__primary"> <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> </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> <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> </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"> 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> </div> </div> <div class="mdc-dialog" id="open-wallet"> <div class="mdc-dialog__container"> <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> <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> command in your terminal. Then, under "Dapps", enable FungibleFaucet. <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> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">OK</span> </button> </div> </div> </div> <div class="mdc-dialog__scrim"></div> </div> <!-- Required Material Web JavaScript library --> <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> <script> </script> <script type="module" src="src/main.js"></script> </body> </html>