purchase.component.html 6.31 KB
Newer Older
Mark Harding's avatar
Mark Harding committed
1
<div class="m-blockchain--marketing--pledges">
2 3 4
  <table class="m-blockchain--marketing--pledges--amounts" *ngIf="!inProgress">
    <ng-container *ngIf="phase === 'presale'">
      <tr>
Nicolas's avatar
Nicolas committed
5 6
        <td class="m-blockchain--marketing--pledges--amounts--label"
          i18n="@@M__PURCHASE_PLEDGED_AMOUNTS">
7 8 9 10 11 12 13 14
          Pledged
        </td>
        <td class="m-blockchain--marketing--pledges--amounts--value">
          {{ stats.amount | token:18 | number:'1.0-2' }}
          <span class="m-blockchain--marketing--pledges--eth-label">ETH</span>
        </td>
      </tr>
      <tr>
Nicolas's avatar
Nicolas committed
15 16
        <td class="m-blockchain--marketing--pledges--amounts--label"
          i18n="@@M__PURCHASE_PLEDGED_CHANNEL">
17 18 19 20 21 22 23
          Channels
        </td>
        <td class="m-blockchain--marketing--pledges--amounts--value">
          {{ stats.count | number }}
        </td>
      </tr>
    </ng-container>
Mark Harding's avatar
Mark Harding committed
24 25
    <tr>
      <td class="m-blockchain--marketing--pledges--amounts--label">
Mark Harding's avatar
Mark Harding committed
26 27
      </td>
      <td class="m-blockchain--marketing--pledge--input">
28
        <input type="number" class="m-input m-border" [(ngModel)]="tokens" #tokenInput />
Mark Harding's avatar
Mark Harding committed
29 30 31 32 33
        <span class="m-blockchain--marketing--pledges--eth-label">Tokens</span>
      </td>
    </tr>
    <tr>
      <td class="m-blockchain--marketing--pledges--amounts--label">
Mark Harding's avatar
Mark Harding committed
34 35
      </td>
      <td class="m-blockchain--marketing--pledge--input">
36 37 38
        <input type="number" class="m-input m-border" [(ngModel)]="amount" style="font-size: 18px; padding: 18px; cursor: pointer"
          #ethInput
          (click)="ethInput.blur(); promptTokenInput(tokenInput);"/>
39
        <span class="m-blockchain--marketing--pledges--eth-label">ETH</span>
40 41
        <button
          class="m-btn m-btn--action"
Nicolas's avatar
Nicolas committed
42 43
          (click)="purchase()"
          i18n="@@M__PURCHASE_PURCHASE_HEADER">
Mark Harding's avatar
Mark Harding committed
44
          Purchase
45
        </button>
Mark Harding's avatar
Mark Harding committed
46 47
      </td>
    </tr>
48
    <tr style="height:16px;">
49 50
      <td class="m-blockchain--marketing--pledges--amounts--label">
      </td>
Mark Harding's avatar
Mark Harding committed
51
      <td class="m-blockchain--marketing--pledge--input" style="text-align: left">
52
        <m-tooltip anchor="left" i18n="@@MINDS__TOPBAR__TOP__OPEN_TRENDING_ITEM_TOOLTIP">
53
          <span m-tooltip--anchor class="m-blockchain--marketing--pledges--eth-subtext">1 Token = $1.25 USD = {{ 1 / rate}} ETH</span>
54 55 56 57 58

          <ng-container>
            ETH amount is based on the current USD/ETH rate and is updated in regular intervals
          </ng-container>
        </m-tooltip>
Mark Harding's avatar
Mark Harding committed
59 60 61 62 63 64
        <span class="m-layout__spacer"></span> 
        <button 
          (click)="purchaseEth()"
          class="m-btn m-btn--action">
          Buy ETH
        </button>
65 66
      </td>
    </tr>
Mark Harding's avatar
Mark Harding committed
67 68 69
  </table>
</div>

70
<m-modal-signup-on-action
Mark Harding's avatar
Mark Harding committed
71 72 73 74 75 76 77
  *ngIf="showLoginModal"
  open="true"
  (closed)="closeLoginModal()"
  action="pledge"
  [overrideOnboarding]="true">
</m-modal-signup-on-action>

78
<m-modal
Mark Harding's avatar
Mark Harding committed
79 80 81 82
  open="true"
  *ngIf="showPledgeModal"
  (closed)="closePledgeModal()"
  >
83

Mark Harding's avatar
Mark Harding committed
84 85 86
  <div class="m-blockchain--marketing--modal">

    <div class="m-token--onboarding" *ngIf="!session.getLoggedInUser().rewards">
Nicolas's avatar
Nicolas committed
87
      <h2 i18n="@@M__PURCHASE_VERIFY_PHONE_MESSAGE">Please verify your phone number</h2>
Mark Harding's avatar
Mark Harding committed
88 89 90
      <m-blockchain--marketing--onboard></m-blockchain--marketing--onboard>
    </div>

Nicolas's avatar
Nicolas committed
91 92
    <div *ngIf="session.getLoggedInUser().rewards && !confirmed">
      <h2 i18n="@@M__PURCHASE_TITLE">Your {{ phase === 'presale' ? 'pledge' : 'purchase'}} for {{tokens | number:'1.0-4'}} Tokens ({{amount | number:'1.0-4'}} ETH)</h2>
93

94
      <p class="m-blockchain--marketing--pledge--note" i18n="@@M__PURCHASE_ETH_MIN_TO_APPROVE" hidden>
Mark Harding's avatar
Mark Harding committed
95 96
        Token {{ phase === 'presale' ? 'pledges' : 'purchases'}} over 40 ETH need to be approved by Minds before they can be
        issued.
97
      </p>
98

Mark Harding's avatar
Mark Harding committed
99 100
      <table>
        <tr>
101 102
          <td><input id="ofac-check" type="checkbox" [(ngModel)]="ofac"></td>
          <td class="m-blockchain--marketing--pledge--check-label">
Nicolas's avatar
Nicolas committed
103
            <label for="ofac-check" i18n="@@M__PURCHASE_OFAC">
104 105 106
              I am not listed on any US OFAC Sanction list or prohibited from engaging in business in the USA
            </label>
          </td>
Mark Harding's avatar
Mark Harding committed
107 108
        </tr>
        <tr>
109 110 111 112
          <td><input id="use-check" type="checkbox" [(ngModel)]="use"></td>
          <td
            class="m-blockchain--marketing--pledge--check-label"
          >
Nicolas's avatar
Nicolas committed
113
            <label for="use-check" i18n="@@M__PURCHASE_INVESTIMENT_INTENT">
114 115 116 117 118 119 120 121 122
              I am purchasing the tokens for use on the Minds Platform, and not as an investment.
            </label>
          </td>
        </tr>
        <tr>
          <td><input id="terms-check" type="checkbox" [(ngModel)]="terms"></td>
          <td
            class="m-blockchain--marketing--pledge--check-label"
          >
Mark Harding's avatar
Mark Harding committed
123
            <label for="terms-check" i18n="@@M__PURCHASE_TERMS">
124
              I have read and accept the <a href="https://cdn-assets.minds.com/front/dist/assets/documents/TermsOfSale-v0.1.pdf" target="_blank">Terms Of Sale</a> for the Minds Token
125 126
            </label>
          </td>
Mark Harding's avatar
Mark Harding committed
127 128
        </tr>
      </table>
Nicolas's avatar
Nicolas committed
129
    </div>
130

Nicolas's avatar
Nicolas committed
131
    <div *ngIf="confirmed">
132 133 134
      <h2 i18n="@@M__PURCHASE_COMPLETED_H2">Thank you for your purchase of {{tokens | number:'1.0-4'}} Tokens</h2>
      <p class="m-blockchain--marketing--pledge--note" i18n="@@M__PURCHASE_COMPLETED_NOTE">Your transaction is processing and we will notify you once the transaction is complete.</p>
      <p class="m-blockchain--marketing--pledge--note" i18n="@@M__PURCHASE_COMPLETED_NOTE_REVIEW" *ngIf="amount > 60">
135
        Because your purchase was over 60 ETH, it may take over 24 hours for the transaction to be completed.
136 137 138
        If you would like to contact us, please reach out to [email protected]
        </p>
      <br/>
Nicolas's avatar
Nicolas committed
139
    </div>
140

Nicolas's avatar
Nicolas committed
141
    <div>
142
      <button
Mark Harding's avatar
Mark Harding committed
143 144
        class="m-btn m-btn--slim m-btn--action"
        (click)="confirm()"
145
        [disabled]="!canConfirm()"
Nicolas's avatar
Nicolas committed
146 147
        *ngIf="!confirming && !confirmed"
        i18n="@@M__PURCHASE_BUTTON">
148
        Purchase
Mark Harding's avatar
Mark Harding committed
149
      </button>
150
      <button
Mark Harding's avatar
Mark Harding committed
151
        class="m-btn m-btn--slim"
Nicolas's avatar
Nicolas committed
152 153
        *ngIf="confirming"
        i18n="@@M__PURCHASE_PLEASE_WAIT_BUTTON">
Mark Harding's avatar
Mark Harding committed
154 155
        Please wait...
      </button>
156
      <button
Mark Harding's avatar
Mark Harding committed
157
        class="m-btn m-btn--slim"
Nicolas's avatar
Nicolas committed
158 159
        *ngIf="confirmed"
        i18n="@@M__PURCHASE_COMPLETED">
Mark Harding's avatar
Mark Harding committed
160 161
        Completed
      </button>
Mark Harding's avatar
Mark Harding committed
162 163 164

      <span class="m-error--text">{{error}}</span>

Mark Harding's avatar
Mark Harding committed
165 166 167
    </div>

  </div>
168
</m-modal>
Mark Harding's avatar
Mark Harding committed
169 170 171 172 173 174 175

<m-blockchain__eth-modal
  *ngIf="showEthModal"
  [rate]="rate"
  (close)="closePurchaseEth()"
  >
</m-blockchain__eth-modal>