example/web_client/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Libra Client (testnet)</title>
    <link rel="stylesheet" href="milligram.min.css">
    <link rel="stylesheet" href="weblibra.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="gopherjs-libra.js"></script>
</head>

<body>
    <div>
        <h1>Pure front-end Libra explorer</h1>
        <p>
            Based on <a href="https://www.npmjs.com/package/gopherjs-libra">gopherjs-libra</a>, a javascript libra
            client library.
            View on <a href="https://github.com/the729/go-libra/tree/master/example/web_client">Github</a>.
        </p>
    </div>
    <div id="app">
        <p>
            <label for="server">Server
                (<a href="https://www.npmjs.com/package/gopherjs-libra#usage" target="_BLANK">setup a
                    gRPC-Web proxy</a>)</label>
            <input type="text" id="server" ref="server" v-model="server" data-value="http://hk2.wutj.info:38080" />
            <label for="waypoint">Trusted Waypoint</label>
            <input type="text" id="waypoint" ref="waypoint" v-model="waypoint" data-value="insecure" />
            <button @click="apply_waypoint">Apply</button>
        </p>
        <p class="insecure_warning" v-if="insecure">
            Warning: Insecure. The client will work without a trusted waypoint.
        </p>
        <p v-if="latest_waypoint!=''">Latest Waypoint from the ledger: <b>{{ latest_waypoint }}</b></p>
        <ledger-info ref="ledger_info" @ledger-info-updated="li_update"></ledger-info>
        <hr>
        <txn-list :ledger_info="ledger_info" @txn-selected="txn_selected" @addr-selected="addr_selected"></txn-list>
        <hr>
        <txn-detail id="txn-detail" v-if="selected_txn" :txn="selected_txn" @addr-selected="addr_selected"></txn-detail>
        <hr>
        <account-detail id="account-detail" ref="account_detail" :address="selected_address"></account-detail>
    </div>
    <script src="weblibra.js"></script>
</body>

</html>