robinhoodcoin.github.io/howto.html at master · robinhoodcoin/robinhoodcoin.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
  <head>
    <title>Getting Started with Robinhood Coin</title>
    <link rel='stylesheet' href='./assets/css/style.css' />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./assets/javascript/application.js"></script>
  </head>

  <h1>Getting Started</h1>

  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#" onclick="metamaskTutorial()">Metamask</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" onclick="mistTutorial()">Mist</a>
    </li>
  </ul>

    <div class="accordion panel-group" id="metamaskTutorial">
      <br />
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#metamaskTutorial" href="#metamaskTutorialcollapse1">1. Install Metamask</a>
          </h4>
        </div>
        <div id="metamaskTutorialcollapse1" class="panel-collapse collapse in">
          <div class="panel-body">
            You need a wallet that allows you to execute contract code. <br />
            This guide is for <a href="https://metamask.io/">Metamask</a>. Install the proper extension for your browser
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#metamaskTutorial" href="#metamaskTutorialcollapse2">2. Start metamask using the Rinkeby Testnet</a>
          </h4>
        </div>
        <div id="metamaskTutorialcollapse2" class="panel-collapse collapse">
          <div class="panel-body">
              You can get some Ethereum from the <a href="https://faucet.rinkeby.io/">Rinkeby faucet</a>
              <br />
              <br />
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#metamaskTutorial" href="#metamaskTutorialcollapse3">3. Watch the Robinhood Coin Token</a>
          </h4>
        </div>
        <div id="metamaskTutorialcollapse3" class="panel-collapse collapse">
          <div class="panel-body">
            In Metamask click the ADD TOKEN button.
            <br />
            <br />
            The Watch contract pop up should appear and you will enter
            <br />
            <br />
            <button type="button" class="btn btn-info btn-sm" onclick="popup(rinkeby.address)">TOKEN CONTRACT ADDRESS</button>
            <button type="button" class="btn btn-info btn-sm" onclick="popup('RHC')">TOKEN SYMBOL</button>
            <button type="button" class="btn btn-info btn-sm" onclick="popup(0)">DECIMALS OF PRECISION</button>

          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#metamaskTutorial" href="#metamaskTutorialcollapse4">4. Execute functions using the web</a>
          </h4>
        </div>
        <div id="metamaskTutorialcollapse4" class="panel-collapse collapse">
          <div class="panel-body">
            You can interact with the network using the functions available on the <a href="./wallet.html">Wallet</a> page.
            <br />
          </div>
        </div>
      </div>
    </div>


  <div class="container" id="mistTutorial">
    <div class="panel-group" id="accordion">
      <br />
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">1. Download a wallet to get started</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">
            You need a wallet that allows you to execute contract code. <br />
            This guide is for <a href="https://github.com/ethereum/mist/releases">Mist Wallet</a>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">2. Start Mist using the Rinkeby Testnet</a>
          </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-body">
              You can get some Ethereum from the <a href="https://faucet.rinkeby.io/">Rinkeby faucet</a>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">3. Watch the Robinhood Coin Contract</a>
          </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
          <div class="panel-body">
            Under the CONTRACTS tab click WATCH CONTRACT.
            <br />
            <br />
            <img src="./assets/images/mistsetup/1_watch_contract.png" style="margin: auto;"/>
            <br />
            <br />
            The Watch contract pop up should appear and you will enter
            <button type="button" class="btn btn-info btn-sm" onclick="popup(rinkeby.address)">CONTRACT ADDRESS</button>
            <button type="button" class="btn btn-info btn-sm" onclick="popup(rinkeby.name)">CONTRACT NAME</button>
            <button type="button" class="btn btn-info btn-sm" onclick="popup(rinkeby.json)">JSON INTERFACE</button>
            <br />
            <br />
            <img src="./assets/images/mistsetup/2_watch_contract_tab.png" style="margin: auto;"/>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">4. Watch the Robinhood Coin Token</a>
          </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse">
          <div class="panel-body">
            The Robinhood Coin Contract should now be visible in your CONTRACTS tab.<br />
            To see how much Robinhood Coin you have you need to watch the Token. <br />
            Click on WATCH TOKEN.
            <br />
            <br />
            <img src="./assets/images/mistsetup/3_view_contracts.png" style="margin: auto;"/>
            <br />
            <br />
            You can then paste the <button type="button" class="btn btn-info btn-sm" onclick="popup(rinkeby.address)">TOKEN ADDRESS</button> in the TOKEN ADDRESS field.
            The rest should automatically populate.
            <br />
            <br />
            <img src="./assets/images/mistsetup/5_watch_token_with_address.png" style="margin: auto;"/>
            <br />
            <br />
            Click OK and you should then be able to see how much Robinhood Coins you have!
          </div>
        </div>
      </div>
    </div>
  </div>

  <br />
  <br />
  <footer style="text-align: center">
    <a href="./contract.html">Contract</a> | <b>Getting Started</b> | <a href="https://github.com/robinhoodcoin/RobinhoodCoin">Source</a> | <a href="documentation.html">Documentation</a> | <a href="./developers.html">Developers</a> | <a href="./scoreboard.html">Scoreboard</a> | <a href="./wallet.html">Wallet</a><br />
  </footer>
</html>

<script>

function metamaskTutorial() {
  document.getElementById('metamaskTutorial').style.display = '';
  document.getElementById('mistTutorial').style.display = 'none';
}

function mistTutorial() {
  document.getElementById('metamaskTutorial').style.display = 'none';
  document.getElementById('mistTutorial').style.display = '';
}

window.onload = metamaskTutorial();

</script>