<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cradicle Explorer</title>
    <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <style>
      .form-control-dark::placeholder {
          color: #aaa;
          opacity: 1;
      }
    </style>
    <link rel="stylesheet" href="/assets/fontawesome/css/all.min.css">
    <link rel="icon" type="image/png" href="/favicon.png">


                <link href="/css/dashboard.css" rel="stylesheet">
                </head>
                <body>
                <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
                  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="/">Cradicle Explorer</a>
                  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <form method="get" action="/cgi-bin/main" style="width:100%;"><input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" name="q" placeholder="Search repos" aria-label="Search"></form>
                  <div class="navbar-nav flex-row">
                    <div class="nav-item text-nowrap">
                      <a class="nav-link px-3 active" href="/cgi-bin/repo?id=zgcrGj1TTf364yHzRDdiQjYRfgzc">embark-plasma-demo</a>
                    </div>
                  </div>
                </header>
                <div class="container-fluid">
                  <div class="row">
                    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
                      <div class="position-sticky pt-3 sidebar-sticky">
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link active" href="/cgi-bin/repo?id=zgcrGj1TTf364yHzRDdiQjYRfgzc">
                              <i class="align-text-bottom fa-solid fa-info"></i>
                              Info
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="/cgi-bin/repo?id=zgcrGj1TTf364yHzRDdiQjYRfgzc&issue=list">
                              <i class="align-text-bottom fa-solid fa-layer-group"></i>
                              Issues
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="/cgi-bin/repo?id=zgcrGj1TTf364yHzRDdiQjYRfgzc&patch=list">
                              <i class="align-text-bottom fa-solid fa-vest-patches"></i>
                              Patches
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="/cgi-bin/repo?id=zgcrGj1TTf364yHzRDdiQjYRfgzc&wallet=list">
                              <i class="align-text-bottom fa-solid fa-wallet"></i>
                              Wallets
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="/cgi-bin/repo?id=zgcrGj1TTf364yHzRDdiQjYRfgzc&source=.">
                              <i class="align-text-bottom fa-solid fa-code"></i>
                              Source
                            </a>
                          </li>
                        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
                          <span></span>
                        </h6>
                        <ul class="nav flex-column mb-2">
                        
                        </ul>
                      </div>
                    </nav>
                <main class="col-md-9 ms-sm-auto col-lg-10">
                  <div class="container px-1 py-3">
        

    <div class="list-group">
    <div class="list-group-item">
    <div style="font-size:1.3rem;">embark-plasma-demo</div>
    <div class="repo-item"></div>
    <div>rad:zgcrGj1TTf364yHzRDdiQjYRfgzc</div>
    </div>
    <div class="list-group-item">
    <div>Visibility</div>
    <div class="repo-item">public</div>
    </div>
    <div class="list-group-item">
    <div>Delegates</div><div class="repo-item">did:key:z6MkuRd31dLXvQTavnVGbZL2jfpKY9rJjSktE89LBa8zAmdp</div>
    </div>
    <div class="list-group-item">
    <div>Default branch</div>
    <div><span class="repo-item">master &#8594 744056c44f5c2df7b21ce5f7c83e4de72caafc4f</span> (Wed Jun 26 02:53:36 2019)</div>
    </div>
    <div class="list-group-item">
    <div>Threshold</div>
    <div class="repo-item">1</div>
    </div>
    </div>
    
        <div class="list-group mt-3">
        <div class="list-group-item">
        <div class="mb-2" style="font-weight:bold;"><i class="fa-solid fa-book"></i> README.md</div>
        <pre style="margin:0; font-size:0.85rem; overflow-x:auto; color:#fafafa;"># Embark Plasma Demo
The Embark Plasma Demo is a DApp built using Embark and the [`Embark-Plasma`](https://github.com/embark-framework/embark-plasma) plugin. The frontend is the OmiseGO [`js-starter-kit`](https://github.com/omisego/js-starter-kit) that has been converted to use [`EmbarkJS-Plasma`](https://github.com/embark-framework/embarkjs-plasma).

&gt; **PLEASE NOTE**
&gt; This is completely alpha software and should not be used in a production environment.

## Embark-Plasma Demo Setup
This is an example client side wallet built in Vue.js which allows you to make interactions with the OMG network from the browser.

NOTE: 
- This kit is meant for development and demonstration purposes. It is not safe for production use.
- This example application is compatible with `Samrong v0.2`

## Initial Setup

Make sure you have access to the endpoints including Watcher, Childchain, address of the Plasma Contract and Web3 RPC endpoint. The wallet also requires an in-browser web3 wallet like MetaMask to sign transactions.

the endpoints for production deployment can be found [here](https://github.com/omisego/dev-portal/blob/master/guides/network_endpoints.md)

1. Installing dependencies by running `yarn install` on the root directory
2. Run embark `embark run`
3. Start the app by running `yarn serve`

## Running the Starter-kit

A browser should automatically open to `http://localhost:3001`, Make sure your Metamask is currently unlocked. You should be able to see your account balance on both Root chain and Child chain.

From here, you can perform 3 actions:

1. Deposit into the OMG Network: After 12 blocks confirmations, your Rootchain balance will be updated, click on the Refresh button. 

2. Transfer the funds on the OMG Network: Fill in the values for the Transfer fields and click Ok. Depending on the network congestion, you may have to wait for a little while for the transaction to be included in a block. Click on the Refresh balances button until your balance has been properly reflected.

3. Exit the funds back to Rootchain: Fill in an address that has funds in the OMG Network and click on OK, your exit period will start. Do note that the exit period will be varied based on the configuration of each `elixir-omg` deployment. After the certain amount of time has passed, you will be able to process the exit and receive your funds back.

NOTE: the current wallet does not offer a way to call `processExit()` yet.

## Vue.js project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).</pre>
        </div>
        </div>

</div>
</main>
</div>
</div>


</body>
</html>

