├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.css
    │   ├── meta
    │   │   ├── meta-sender
    │   │   │   ├── meta-sender.component.css
    │   │   │   ├── meta-sender.component.html
    │   │   │   └── meta-sender.component.ts
    │   │   └── meta.module.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── util
    │   │   ├── util.module.ts
    │   │   ├── web3.service.spec.ts
    │   │   └── web3.service.ts
    │   └── app.module.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── styles.css
    ├── typings.d.ts
    ├── tsconfig.app.json
    ├── index.html
    ├── main.ts
    ├── tsconfig.spec.json
    ├── test.ts
    └── polyfills.ts
├── .gitignore
├── box-img-lg.png
├── box-img-sm.png
├── ci
    ├── install-deps.sh
    └── build.sh
├── migrations
    ├── 1_initial_migration.js
    └── 2_deploy_contracts.js
├── contracts
    ├── ConvertLib.sol
    ├── Migrations.sol
    └── MetaCoin.sol
├── .travis.yml
├── truffle.js
├── NOTICE
├── .editorconfig
├── e2e
    ├── tsconfig.e2e.json
    ├── app.e2e-spec.ts
    ├── meta-sender.e2e-spec.ts
    └── app.po.ts
├── truffle-box.json
├── patch.js
├── tsconfig.json
├── test
    ├── TestMetacoin.sol
    └── metacoin.js
├── protractor.conf.js
├── karma.conf.js
├── package.json
├── tslint.json
├── angular.json
├── README.md
└── LICENSE


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | *.iml
3 | build/
4 | node_modules/
5 | 


--------------------------------------------------------------------------------
/box-img-lg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Quintor/angular-truffle-box/HEAD/box-img-lg.png


--------------------------------------------------------------------------------
/box-img-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Quintor/angular-truffle-box/HEAD/box-img-sm.png


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Quintor/angular-truffle-box/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/app/meta/meta-sender/meta-sender.component.css:
--------------------------------------------------------------------------------
1 | .address-field {
2 |   width: 400px;
3 | }
4 | 
5 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <mat-toolbar color="primary">Angular Truffle Box</mat-toolbar>
2 | <app-meta-sender></app-meta-sender>
3 | 


--------------------------------------------------------------------------------
/ci/install-deps.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | set -x
3 | npm install -g @angular/cli
4 | npm install -g truffle
5 | npm install -g ganache-cli
6 | npm install
7 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import "~@angular/material/prebuilt-themes/indigo-pink.css";
3 | 


--------------------------------------------------------------------------------
/migrations/1_initial_migration.js:
--------------------------------------------------------------------------------
1 | var Migrations = artifacts.require("./Migrations.sol");
2 | 
3 | module.exports = function(deployer) {
4 |   deployer.deploy(Migrations);
5 | };
6 | 


--------------------------------------------------------------------------------
/contracts/ConvertLib.sol:
--------------------------------------------------------------------------------
1 | pragma solidity ^0.5.0;
2 | 
3 | library ConvertLib {
4 | 	function convert(uint amount,uint conversionRate) public pure returns (uint convertedAmount)
5 | 	{
6 | 		return amount * conversionRate;
7 | 	}
8 | }
9 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | dist: trusty
 2 | addons:
 3 |   chrome: stable
 4 | language: node_js
 5 | node_js:
 6 |     - "lts/*"
 7 | install: ./ci/install-deps.sh
 8 | script: ./ci/build.sh
 9 | cache:
10 |   directories:
11 |     - node_modules
12 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
 1 | /* SystemJS module definition */
 2 | declare var module: NodeModule;
 3 | interface NodeModule {
 4 |   id: string;
 5 | }
 6 | 
 7 | declare module "*.json" {
 8 |     const value: any;
 9 |     export default value;
10 | }
11 | 


--------------------------------------------------------------------------------
/truffle.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     networks: {
 3 |          development: {
 4 |               host: "localhost",
 5 |               port: 8545,
 6 |               network_id: "*" // Match any network id
 7 |             }
 8 |        }
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'app works!';
10 | }
11 | 


--------------------------------------------------------------------------------
/NOTICE:
--------------------------------------------------------------------------------
1 | Truffle Box for Angular
2 | Copyright 2017 Quintor
3 | 
4 | This product includes software developed at Quintor (http://www.quintor.nl/).
5 | Angular Logo provided by the Angular team (https://angular.io/presskit), licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/).
6 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/migrations/2_deploy_contracts.js:
--------------------------------------------------------------------------------
1 | var ConvertLib = artifacts.require("./ConvertLib.sol");
2 | var MetaCoin = artifacts.require("./MetaCoin.sol");
3 | 
4 | module.exports = function(deployer) {
5 |   deployer.deploy(ConvertLib);
6 |   deployer.link(ConvertLib, MetaCoin);
7 |   deployer.deploy(MetaCoin);
8 | };
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/util/util.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {CommonModule} from '@angular/common';
 3 | import {Web3Service} from './web3.service';
 4 | 
 5 | @NgModule({
 6 |   imports: [
 7 |     CommonModule
 8 |   ],
 9 |   providers: [
10 |     Web3Service
11 |   ],
12 |   declarations: []
13 | })
14 | export class UtilModule {
15 | }
16 | 


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('angular-truffle-box App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getHeader()).toContain('Angular Truffle Box');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>AngularTruffleBox</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es2016",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts",
15 |     "polyfills.ts"
16 |   ],
17 |   "include": [
18 |     "**/*.spec.ts",
19 |     "**/*.d.ts"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/truffle-box.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "ignore": [
 3 |     "README.md",
 4 |     ".gitignore"
 5 |   ],
 6 |   "commands": {
 7 |     "Compile": "truffle compile",
 8 |     "Migrate": "truffle migrate",
 9 |     "Test contracts": "truffle test",
10 |     "Test Angular components": "ng test",
11 |     "Test end-to-end": "ng e2e",
12 |     "Run dev server": "ng serve",
13 |     "Build for production": "ng build"
14 |   },
15 |   "hooks": {
16 |     "post-unpack": "npm install"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/ci/build.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | set -x
 3 | set -e
 4 | ganache-cli -m "candy maple cake sugar pudding cream honey rich smooth crumble sweet treat" > /dev/null &
 5 | GANACHE_PID=$!
 6 | trap "kill $GANACHE_PID" EXIT INT TERM
 7 | 
 8 | truffle compile
 9 | truffle migrate
10 | truffle test
11 | 
12 | npm test
13 | ng e2e
14 | ng lint
15 | 
16 | 
17 | #(0) 0x627306090abab3a6e1400e9345bc60c78a8bef57
18 | #(1) 0xf17f52151ebef6c7334fad080c5704d77216b732
19 | #(2) 0xc5fdf4076b8f3a5357c5e395ab970b5b54098fef
20 | 


--------------------------------------------------------------------------------
/patch.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
 3 | 
 4 | fs.readFile(f, 'utf8', function (err,data) {
 5 |       if (err) {
 6 |               return console.log(err);
 7 |             }
 8 |       var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');
 9 | 
10 |       fs.writeFile(f, result, 'utf8', function (err) {
11 |               if (err) return console.log(err);
12 |             });
13 | });
14 | 


--------------------------------------------------------------------------------
/contracts/Migrations.sol:
--------------------------------------------------------------------------------
 1 | pragma solidity ^0.5.0;
 2 | 
 3 | contract Migrations {
 4 |   address public owner;
 5 |   uint public last_completed_migration;
 6 | 
 7 |   modifier restricted() {
 8 |     if (msg.sender == owner) _;
 9 |   }
10 | 
11 |   constructor() public {
12 |     owner = msg.sender;
13 |   }
14 | 
15 |   function setCompleted(uint completed) public restricted {
16 |     last_completed_migration = completed;
17 |   }
18 | 
19 |   function upgrade(address new_address) public restricted {
20 |     Migrations upgraded = Migrations(new_address);
21 |     upgraded.setCompleted(last_completed_migration);
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "importHelpers": true,
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "moduleResolution": "node",
 9 |     "resolveJsonModule": true,
10 |     "esModuleInterop": true,
11 |     "emitDecoratorMetadata": true,
12 |     "experimentalDecorators": true,
13 |     "allowSyntheticDefaultImports": true,
14 |     "target": "es5",
15 |     "typeRoots": [
16 |       "node_modules/@types"
17 |     ],
18 |     "lib": [
19 |       "es2017",
20 |       "dom"
21 |     ],
22 |     "module": "es2015",
23 |     "baseUrl": "./"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/test/TestMetacoin.sol:
--------------------------------------------------------------------------------
 1 | pragma solidity ^0.5.0;
 2 | 
 3 | import "truffle/Assert.sol";
 4 | import "truffle/DeployedAddresses.sol";
 5 | import "../contracts/MetaCoin.sol";
 6 | 
 7 | contract TestMetacoin {
 8 | 
 9 |   function testInitialBalanceUsingDeployedContract() public {
10 |     MetaCoin meta = MetaCoin(DeployedAddresses.MetaCoin());
11 | 
12 |     uint expected = 10000;
13 | 
14 |     Assert.equal(meta.getBalance(tx.origin), expected, "Owner should have 10000 MetaCoin initially");
15 |   }
16 | 
17 |   function testInitialBalanceWithNewMetaCoin() public {
18 |     MetaCoin meta = new MetaCoin();
19 | 
20 |     uint expected = 10000;
21 | 
22 |     Assert.equal(meta.getBalance(tx.origin), expected, "Owner should have 10000 MetaCoin initially");
23 |   }
24 | 
25 | }
26 | 


--------------------------------------------------------------------------------
/e2e/meta-sender.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser } from 'protractor';
 3 | 
 4 | describe('angular-truffle-box meta-sender', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should transfer money', () => {
12 |     page.navigateTo();
13 |     page.setAddress(0);
14 |     browser.driver.sleep(100);
15 | 
16 |     expect(page.getBalance()).toBe('10000');
17 | 
18 |     page.setAmount('50');
19 |     page.setToAddress('0xf17f52151ebef6c7334fad080c5704d77216b732');
20 |     page.clickSend();
21 | 
22 |     browser.driver.sleep(1000);
23 | 
24 |     // Auto-refresh is broken in test for some reason
25 |     page.navigateTo();
26 | 
27 |     expect(page.getBalance()).toBe('9950');
28 |     page.clickSelect();
29 |     page.setAddress(1);
30 |     browser.driver.sleep(100);
31 |     expect(page.getBalance()).toBe('50');
32 |   });
33 | });
34 | 


--------------------------------------------------------------------------------
/src/app/meta/meta.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {CommonModule} from '@angular/common';
 3 | import {MetaSenderComponent} from './meta-sender/meta-sender.component';
 4 | import {UtilModule} from '../util/util.module';
 5 | import {RouterModule} from '@angular/router';
 6 | import {
 7 |   MatButtonModule,
 8 |   MatCardModule,
 9 |   MatFormFieldModule,
10 |   MatInputModule,
11 |   MatOptionModule,
12 |   MatSelectModule, MatSnackBarModule
13 | } from '@angular/material';
14 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
15 | 
16 | @NgModule({
17 |   imports: [
18 |     BrowserAnimationsModule,
19 |     CommonModule,
20 |     MatButtonModule,
21 |     MatCardModule,
22 |     MatFormFieldModule,
23 |     MatInputModule,
24 |     MatOptionModule,
25 |     MatSelectModule,
26 |     MatSnackBarModule,
27 |     RouterModule,
28 |     UtilModule
29 |   ],
30 |   declarations: [MetaSenderComponent],
31 |   exports: [MetaSenderComponent]
32 | })
33 | export class MetaModule {
34 | }
35 | 


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome',
13 |     chromeOptions: {
14 |       args: [ "--headless", "--no-sandbox", "--disable-gpu", "--window-size=800,600" ]
15 |     }
16 |   },
17 |   directConnect: true,
18 |   baseUrl: 'http://localhost:4200/',
19 |   framework: 'jasmine',
20 |   jasmineNodeOpts: {
21 |     showColors: true,
22 |     defaultTimeoutInterval: 30000,
23 |     print: function() {}
24 |   },
25 |   plugins: [{
26 |     package: 'protractor-console-plugin'
27 |   }],
28 |   onPrepare() {
29 |     require('ts-node').register({
30 |       project: 'e2e/tsconfig.e2e.json'
31 |     });
32 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
33 |   }
34 | };
35 | 


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     browser.waitForAngularEnabled(false);
 6 |     browser.get('/');
 7 |     return browser.driver.sleep(1000);
 8 |   }
 9 | 
10 |   getHeader() {
11 |     return element(by.css('mat-toolbar')).getText();
12 |   }
13 | 
14 |   getButton() {
15 |     return element(by.id('send'));
16 |   }
17 | 
18 |   getBalance() {
19 |     return element(by.id('balance')).getText();
20 |   }
21 | 
22 |   clickSelect() {
23 |     return element(by.id('address-selector')).click();
24 |   }
25 | 
26 |   setAddress(index: number) {
27 |     return element.all(by.tagName('mat-option')).filter((
28 |       (el, i) => {
29 |         return index === i;
30 |       }
31 |     )).click();
32 |   }
33 | 
34 |   setToAddress(address: string) {
35 |     return element(by.id('receiver')).sendKeys(address);
36 |   }
37 | 
38 |   setAmount(amount: string) {
39 |     return element(by.id('amount')).sendKeys(amount);
40 |   }
41 | 
42 |   clickSend() {
43 |     return this.getButton().click();
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { FormsModule } from '@angular/forms';
 4 | import { HttpClientModule } from '@angular/common/http';
 5 | 
 6 | import { AppComponent } from './app.component';
 7 | import {MetaModule} from './meta/meta.module';
 8 | import { CommonModule } from '@angular/common';
 9 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
10 | import {
11 |   MatButtonModule,
12 |   MatCardModule,
13 |   MatFormFieldModule,
14 |   MatInputModule,
15 |   MatToolbarModule
16 | } from '@angular/material';
17 | 
18 | @NgModule({
19 |   declarations: [
20 |     AppComponent
21 |   ],
22 |   imports: [
23 |     BrowserAnimationsModule,
24 |     CommonModule,
25 |     MatButtonModule,
26 |     MatCardModule,
27 |     MatFormFieldModule,
28 |     MatInputModule,
29 |     MatToolbarModule,
30 |     BrowserModule,
31 |     FormsModule,
32 |     HttpClientModule,
33 |     MetaModule
34 |   ],
35 |   providers: [],
36 |   bootstrap: [AppComponent]
37 | })
38 | export class AppModule { }
39 | 


--------------------------------------------------------------------------------
/contracts/MetaCoin.sol:
--------------------------------------------------------------------------------
 1 | pragma solidity ^0.5.0;
 2 | 
 3 | import "./ConvertLib.sol";
 4 | 
 5 | // This is just a simple example of a coin-like contract.
 6 | // It is not standards compatible and cannot be expected to talk to other
 7 | // coin/token contracts. If you want to create a standards-compliant
 8 | // token, see: https://github.com/ConsenSys/Tokens. Cheers!
 9 | 
10 | contract MetaCoin {
11 | 	mapping (address => uint) balances;
12 | 
13 | 	event Transfer(address indexed _from, address indexed _to, uint256 _value);
14 | 
15 | 	constructor() public {
16 | 		balances[tx.origin] = 10000;
17 | 	}
18 | 
19 | 	function sendCoin(address receiver, uint amount) public returns(bool sufficient) {
20 | 		if (balances[msg.sender] < amount) return false;
21 | 		balances[msg.sender] -= amount;
22 | 		balances[receiver] += amount;
23 | 		emit Transfer(msg.sender, receiver, amount);
24 | 		return true;
25 | 	}
26 | 
27 | 	function getBalanceInEth(address addr) public view returns(uint){
28 | 		return ConvertLib.convert(getBalance(addr),2);
29 | 	}
30 | 
31 | 	function getBalance(address addr) public view returns(uint) {
32 | 		return balances[addr];
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/meta/meta-sender/meta-sender.component.html:
--------------------------------------------------------------------------------
 1 | <mat-card>
 2 |   <mat-card-header>Balance</mat-card-header>
 3 |   <mat-card-content>
 4 |     <mat-form-field id="address-selector" class="address-field">
 5 |       <mat-select name="account" (selectionChange)="refreshBalance()" [(value)]="model.account" placeholder="Address">
 6 |         <mat-option *ngFor="let account of accounts" [value]="account">{{account}}</mat-option>
 7 |       </mat-select>
 8 |     </mat-form-field>
 9 | 
10 |     <p>You have <span id="balance">{{model.balance}}</span> META</p>
11 |   </mat-card-content>
12 | </mat-card>
13 | 
14 | <mat-card>
15 |   <mat-card-header>Send MetaCoin</mat-card-header>
16 |   <mat-card-content>
17 |     <mat-form-field>
18 |       <input type="text" matInput id="amount" placeholder="Amount" (change)="setAmount($event)">
19 |     </mat-form-field>
20 |     <mat-form-field class="address-field">
21 |       <input type="text" matInput id="receiver" placeholder="Receiver Address" (change)="setReceiver($event)">
22 |     </mat-form-field>
23 |     <button mat-button id="send" (click)="sendCoin()">Send MetaCoin</button>
24 |   </mat-card-content>
25 | </mat-card>
26 | 
27 | 
28 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/src/app/util/web3.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import {TestBed, inject} from '@angular/core/testing';
 2 | const Web3 = require('web3');
 3 | 
 4 | import {Web3Service} from './web3.service';
 5 | 
 6 | import metacoin_artifacts from '../../../build/contracts/MetaCoin.json';
 7 | 
 8 | declare let window: any;
 9 | 
10 | describe('Web3Service', () => {
11 |   beforeEach(() => {
12 |     TestBed.configureTestingModule({
13 |       providers: [Web3Service]
14 |     });
15 |   });
16 | 
17 |   it('should be created', inject([Web3Service], (service: Web3Service) => {
18 |     expect(service).toBeTruthy();
19 |   }));
20 | 
21 |   it('should inject a default web3 on a contract', inject([Web3Service], (service: Web3Service) => {
22 |     window.ethereum = undefined;
23 |     service.bootstrapWeb3();
24 | 
25 |     return service.artifactsToContract(metacoin_artifacts).then((abstraction) => {
26 |       expect(abstraction.currentProvider.host).toBe('http://localhost:8545');
27 |     });
28 |   }));
29 | 
30 |   it('should inject a the window web3 on a contract', inject([Web3Service], (service: Web3Service) => {
31 |     window.ethereum = new Web3.providers.HttpProvider('http://localhost:1337');
32 |     window.ethereum.enable = async () => true;
33 | 
34 |     service.bootstrapWeb3();
35 | 
36 |     return service.artifactsToContract(metacoin_artifacts).then((abstraction) => {
37 |       expect(abstraction.currentProvider.host).toBe('http://localhost:1337');
38 |     });
39 |   }));
40 | });
41 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 | 
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['ChromeHeadless'],
29 |     singleRun: false,
30 |     customLaunchers: {
31 |       ChromeHeadless: {
32 |         base: 'Chrome',
33 |         flags: [
34 |           '--headless',
35 |           '--disable-gpu',
36 |           '--no-sandbox',
37 |           // Without a remote debugging port, Google Chrome exits immediately.
38 |           '--remote-debugging-port=9222',
39 |         ],
40 |       }
41 |     }
42 |   });
43 | };
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-truffle-box",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve",
 8 |     "build": "ng build",
 9 |     "test": "ng test --watch=false",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e",
12 |     "postinstall": "node patch.js"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/animations": "8.2.0",
17 |     "@angular/cdk": "^8.2.0",
18 |     "@angular/common": "8.2.0",
19 |     "@angular/compiler": "8.2.0",
20 |     "@angular/core": "8.2.0",
21 |     "@angular/forms": "8.2.0",
22 |     "@angular/material": "^8.2.0",
23 |     "@angular/platform-browser": "8.2.0",
24 |     "@angular/platform-browser-dynamic": "8.2.0",
25 |     "@angular/platform-server": "8.2.0",
26 |     "@angular/router": "8.2.0",
27 |     "core-js": "2.5.7",
28 |     "ethers": "^4.0.37",
29 |     "node-sass": "4.12.0",
30 |     "rxjs": "^6.5.3",
31 |     "@truffle/contract": "^4.0.33",
32 |     "tslib": "^1.10.0",
33 |     "web3": "1.2.1",
34 |     "zone.js": "0.9.1"
35 |   },
36 |   "devDependencies": {
37 |     "@angular-devkit/build-angular": "^0.803.5",
38 |     "@angular-devkit/core": "8.3.5",
39 |     "@angular/cli": "^8.3.5",
40 |     "@angular/compiler-cli": "8.2.0",
41 |     "@angular/language-service": "8.2.7",
42 |     "@types/jasmine": "^3.4.0",
43 |     "@types/jasminewd2": "^2.0.6",
44 |     "@types/node": "^12.7.5",
45 |     "codelyzer": "^5.1.1",
46 |     "jasmine-core": "^3.5.0",
47 |     "jasmine-spec-reporter": "^4.2.1",
48 |     "karma": "^4.3.0",
49 |     "karma-chrome-launcher": "^3.1.0",
50 |     "karma-cli": "^2.0.0",
51 |     "karma-coverage-istanbul-reporter": "^2.1.0",
52 |     "karma-jasmine": "^2.0.1",
53 |     "karma-jasmine-html-reporter": "^1.4.2",
54 |     "protractor": "^5.4.2",
55 |     "protractor-console-plugin": "^0.1.1",
56 |     "ts-node": "^8.4.1",
57 |     "tslint": "^5.20.0",
58 |     "typescript": "3.5.1",
59 |     "webpack": "^4.40.2",
60 |     "webpack-dev-server": "^3.8.1"
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/app/util/web3.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {Subject} from 'rxjs';
 3 | declare let require: any;
 4 | const Web3 = require('web3');
 5 | const contract = require('@truffle/contract');
 6 | 
 7 | declare let window: any;
 8 | 
 9 | @Injectable()
10 | export class Web3Service {
11 |   private web3: any;
12 |   private accounts: string[];
13 |   public ready = false;
14 | 
15 |   public accountsObservable = new Subject<string[]>();
16 | 
17 |   constructor() {
18 |     window.addEventListener('load', (event) => {
19 |       this.bootstrapWeb3();
20 |     });
21 |   }
22 | 
23 |   public bootstrapWeb3() {
24 |     // Checking if Web3 has been injected by the browser (Mist/MetaMask)
25 |     if (typeof window.ethereum !== 'undefined') {
26 |       // Use Mist/MetaMask's provider
27 |       window.ethereum.enable().then(() => {
28 |         this.web3 = new Web3(window.ethereum);
29 |       });
30 |     } else {
31 |       console.log('No web3? You should consider trying MetaMask!');
32 | 
33 |       // Hack to provide backwards compatibility for Truffle, which uses web3js 0.20.x
34 |       Web3.providers.HttpProvider.prototype.sendAsync = Web3.providers.HttpProvider.prototype.send;
35 |       // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
36 |       this.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
37 |     }
38 | 
39 |     setInterval(() => this.refreshAccounts(), 100);
40 |   }
41 | 
42 |   public async artifactsToContract(artifacts) {
43 |     if (!this.web3) {
44 |       const delay = new Promise(resolve => setTimeout(resolve, 100));
45 |       await delay;
46 |       return await this.artifactsToContract(artifacts);
47 |     }
48 | 
49 |     const contractAbstraction = contract(artifacts);
50 |     contractAbstraction.setProvider(this.web3.currentProvider);
51 |     return contractAbstraction;
52 | 
53 |   }
54 | 
55 |   private async refreshAccounts() {
56 |     const accs = await this.web3.eth.getAccounts();
57 |     console.log('Refreshing accounts');
58 | 
59 |     // Get the initial account balance so it can be displayed.
60 |     if (accs.length === 0) {
61 |       console.warn('Couldn\'t get any accounts! Make sure your Ethereum client is configured correctly.');
62 |       return;
63 |     }
64 | 
65 |     if (!this.accounts || this.accounts.length !== accs.length || this.accounts[0] !== accs[0]) {
66 |       console.log('Observed new accounts');
67 | 
68 |       this.accountsObservable.next(accs);
69 |       this.accounts = accs;
70 |     }
71 | 
72 |     this.ready = true;
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | import 'core-js/es6/function';
25 | import 'core-js/es6/parse-int';
26 | import 'core-js/es6/parse-float';
27 | import 'core-js/es6/number';
28 | import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | import 'core-js/es6/regexp';
33 | import 'core-js/es6/map';
34 | import 'core-js/es6/weak-map';
35 | import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** Evergreen browsers require these. **/
41 | import 'core-js/es6/reflect';
42 | 
43 | 
44 | 
45 | /**
46 |  * Required to support Web Animations `@angular/animation`.
47 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
48 |  **/
49 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
50 | 
51 | 
52 | 
53 | /***************************************************************************************************
54 |  * Zone JS is required by Angular itself.
55 |  */
56 | import 'zone.js/dist/zone';  // Included with Angular CLI.
57 | 
58 | 
59 | 
60 | /***************************************************************************************************
61 |  * APPLICATION IMPORTS
62 |  */
63 | 
64 | /**
65 |  * Date, currency, decimal and percent pipes.
66 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 |  */
68 | // import 'intl';  // Run `npm install --save intl`.
69 | /**
70 |  * Need to import at least one locale-data with intl.
71 |  */
72 | // import 'intl/locale-data/jsonp/en';
73 | 


--------------------------------------------------------------------------------
/test/metacoin.js:
--------------------------------------------------------------------------------
 1 | var MetaCoin = artifacts.require("./MetaCoin.sol");
 2 | 
 3 | contract('MetaCoin', function(accounts) {
 4 |   it("should put 10000 MetaCoin in the first account", function() {
 5 |     return MetaCoin.deployed().then(function(instance) {
 6 |       return instance.getBalance.call(accounts[0]);
 7 |     }).then(function(balance) {
 8 |       assert.equal(balance.valueOf(), 10000, "10000 wasn't in the first account");
 9 |     });
10 |   });
11 |   it("should call a function that depends on a linked library", function() {
12 |     var meta;
13 |     var metaCoinBalance;
14 |     var metaCoinEthBalance;
15 | 
16 |     return MetaCoin.deployed().then(function(instance) {
17 |       meta = instance;
18 |       return meta.getBalance.call(accounts[0]);
19 |     }).then(function(outCoinBalance) {
20 |       metaCoinBalance = outCoinBalance.toNumber();
21 |       return meta.getBalanceInEth.call(accounts[0]);
22 |     }).then(function(outCoinBalanceEth) {
23 |       metaCoinEthBalance = outCoinBalanceEth.toNumber();
24 |     }).then(function() {
25 |       assert.equal(metaCoinEthBalance, 2 * metaCoinBalance, "Library function returned unexpected function, linkage may be broken");
26 |     });
27 |   });
28 |   it("should send coin correctly", function() {
29 |     var meta;
30 | 
31 |     // Get initial balances of first and second account.
32 |     var account_one = accounts[0];
33 |     var account_two = accounts[1];
34 | 
35 |     var account_one_starting_balance;
36 |     var account_two_starting_balance;
37 |     var account_one_ending_balance;
38 |     var account_two_ending_balance;
39 | 
40 |     var amount = 10;
41 | 
42 |     return MetaCoin.deployed().then(function(instance) {
43 |       meta = instance;
44 |       return meta.getBalance.call(account_one);
45 |     }).then(function(balance) {
46 |       account_one_starting_balance = balance.toNumber();
47 |       return meta.getBalance.call(account_two);
48 |     }).then(function(balance) {
49 |       account_two_starting_balance = balance.toNumber();
50 |       return meta.sendCoin(account_two, amount, {from: account_one});
51 |     }).then(function() {
52 |       return meta.getBalance.call(account_one);
53 |     }).then(function(balance) {
54 |       account_one_ending_balance = balance.toNumber();
55 |       return meta.getBalance.call(account_two);
56 |     }).then(function(balance) {
57 |       account_two_ending_balance = balance.toNumber();
58 | 
59 |       assert.equal(account_one_ending_balance, account_one_starting_balance - amount, "Amount wasn't correctly taken from the sender");
60 |       assert.equal(account_two_ending_balance, account_two_starting_balance + amount, "Amount wasn't correctly sent to the receiver");
61 |     });
62 |   });
63 | });
64 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "eofline": true,
 15 |     "forin": true,
 16 |     "import-blacklist": [
 17 |       true
 18 |     ],
 19 |     "import-spacing": true,
 20 |     "indent": [
 21 |       true,
 22 |       "spaces"
 23 |     ],
 24 |     "interface-over-type-literal": true,
 25 |     "label-position": true,
 26 |     "max-line-length": [
 27 |       true,
 28 |       140
 29 |     ],
 30 |     "member-access": false,
 31 |     "member-ordering": [
 32 |       true,
 33 |       {
 34 |         "order": [
 35 |           "static-field",
 36 |           "instance-field",
 37 |           "static-method",
 38 |           "instance-method"
 39 |         ]
 40 |       }
 41 |     ],
 42 |     "no-arg": true,
 43 |     "no-bitwise": true,
 44 |     "no-console": [
 45 |       true,
 46 |       "debug",
 47 |       "info",
 48 |       "time",
 49 |       "timeEnd",
 50 |       "trace"
 51 |     ],
 52 |     "no-construct": true,
 53 |     "no-debugger": true,
 54 |     "no-duplicate-super": true,
 55 |     "no-empty": false,
 56 |     "no-empty-interface": true,
 57 |     "no-eval": true,
 58 |     "no-inferrable-types": [
 59 |       true,
 60 |       "ignore-params"
 61 |     ],
 62 |     "no-misused-new": true,
 63 |     "no-non-null-assertion": true,
 64 |     "no-shadowed-variable": true,
 65 |     "no-string-literal": false,
 66 |     "no-string-throw": true,
 67 |     "no-switch-case-fall-through": true,
 68 |     "no-trailing-whitespace": true,
 69 |     "no-unnecessary-initializer": true,
 70 |     "no-unused-expression": true,
 71 |     "no-use-before-declare": true,
 72 |     "no-var-keyword": true,
 73 |     "object-literal-sort-keys": false,
 74 |     "one-line": [
 75 |       true,
 76 |       "check-open-brace",
 77 |       "check-catch",
 78 |       "check-else",
 79 |       "check-whitespace"
 80 |     ],
 81 |     "prefer-const": true,
 82 |     "quotemark": [
 83 |       true,
 84 |       "single"
 85 |     ],
 86 |     "radix": true,
 87 |     "semicolon": [
 88 |       true,
 89 |       "always"
 90 |     ],
 91 |     "triple-equals": [
 92 |       true,
 93 |       "allow-null-check"
 94 |     ],
 95 |     "typedef-whitespace": [
 96 |       true,
 97 |       {
 98 |         "call-signature": "nospace",
 99 |         "index-signature": "nospace",
100 |         "parameter": "nospace",
101 |         "property-declaration": "nospace",
102 |         "variable-declaration": "nospace"
103 |       }
104 |     ],
105 |     "unified-signatures": true,
106 |     "variable-name": false,
107 |     "whitespace": [
108 |       true,
109 |       "check-branch",
110 |       "check-decl",
111 |       "check-operator",
112 |       "check-separator",
113 |       "check-type"
114 |     ],
115 |     "directive-selector": [
116 |       true,
117 |       "attribute",
118 |       "app",
119 |       "camelCase"
120 |     ],
121 |     "component-selector": [
122 |       true,
123 |       "element",
124 |       "app",
125 |       "kebab-case"
126 |     ],
127 |     "use-input-property-decorator": true,
128 |     "use-output-property-decorator": true,
129 |     "use-host-property-decorator": true,
130 |     "no-input-rename": true,
131 |     "no-output-rename": true,
132 |     "use-life-cycle-interface": true,
133 |     "use-pipe-transform-interface": true,
134 |     "component-class-suffix": true,
135 |     "directive-class-suffix": true
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/src/app/meta/meta-sender/meta-sender.component.ts:
--------------------------------------------------------------------------------
  1 | import {Component, OnInit} from '@angular/core';
  2 | import {Web3Service} from '../../util/web3.service';
  3 | import { MatSnackBar } from '@angular/material';
  4 | 
  5 | declare let require: any;
  6 | const metacoin_artifacts = require('../../../../build/contracts/MetaCoin.json');
  7 | 
  8 | @Component({
  9 |   selector: 'app-meta-sender',
 10 |   templateUrl: './meta-sender.component.html',
 11 |   styleUrls: ['./meta-sender.component.css']
 12 | })
 13 | export class MetaSenderComponent implements OnInit {
 14 |   accounts: string[];
 15 |   MetaCoin: any;
 16 | 
 17 |   model = {
 18 |     amount: 5,
 19 |     receiver: '',
 20 |     balance: 0,
 21 |     account: ''
 22 |   };
 23 | 
 24 |   status = '';
 25 | 
 26 |   constructor(private web3Service: Web3Service, private matSnackBar: MatSnackBar) {
 27 |     console.log('Constructor: ' + web3Service);
 28 |   }
 29 | 
 30 |   ngOnInit(): void {
 31 |     console.log('OnInit: ' + this.web3Service);
 32 |     console.log(this);
 33 |     this.watchAccount();
 34 |     this.web3Service.artifactsToContract(metacoin_artifacts)
 35 |       .then((MetaCoinAbstraction) => {
 36 |         this.MetaCoin = MetaCoinAbstraction;
 37 |         this.MetaCoin.deployed().then(deployed => {
 38 |           console.log(deployed);
 39 |           deployed.Transfer({}, (err, ev) => {
 40 |             console.log('Transfer event came in, refreshing balance');
 41 |             this.refreshBalance();
 42 |           });
 43 |         });
 44 | 
 45 |       });
 46 |   }
 47 | 
 48 |   watchAccount() {
 49 |     this.web3Service.accountsObservable.subscribe((accounts) => {
 50 |       this.accounts = accounts;
 51 |       this.model.account = accounts[0];
 52 |       this.refreshBalance();
 53 |     });
 54 |   }
 55 | 
 56 |   setStatus(status) {
 57 |     this.matSnackBar.open(status, null, {duration: 3000});
 58 |   }
 59 | 
 60 |   async sendCoin() {
 61 |     if (!this.MetaCoin) {
 62 |       this.setStatus('Metacoin is not loaded, unable to send transaction');
 63 |       return;
 64 |     }
 65 | 
 66 |     const amount = this.model.amount;
 67 |     const receiver = this.model.receiver;
 68 | 
 69 |     console.log('Sending coins' + amount + ' to ' + receiver);
 70 | 
 71 |     this.setStatus('Initiating transaction... (please wait)');
 72 |     try {
 73 |       const deployedMetaCoin = await this.MetaCoin.deployed();
 74 |       const transaction = await deployedMetaCoin.sendCoin.sendTransaction(receiver, amount, {from: this.model.account});
 75 | 
 76 |       if (!transaction) {
 77 |         this.setStatus('Transaction failed!');
 78 |       } else {
 79 |         this.setStatus('Transaction complete!');
 80 |       }
 81 |     } catch (e) {
 82 |       console.log(e);
 83 |       this.setStatus('Error sending coin; see log.');
 84 |     }
 85 |   }
 86 | 
 87 |   async refreshBalance() {
 88 |     console.log('Refreshing balance');
 89 | 
 90 |     try {
 91 |       const deployedMetaCoin = await this.MetaCoin.deployed();
 92 |       console.log(deployedMetaCoin);
 93 |       console.log('Account', this.model.account);
 94 |       const metaCoinBalance = await deployedMetaCoin.getBalance.call(this.model.account);
 95 |       console.log('Found balance: ' + metaCoinBalance);
 96 |       this.model.balance = metaCoinBalance;
 97 |     } catch (e) {
 98 |       console.log(e);
 99 |       this.setStatus('Error getting balance; see log.');
100 |     }
101 |   }
102 | 
103 |   setAmount(e) {
104 |     console.log('Setting amount: ' + e.target.value);
105 |     this.model.amount = e.target.value;
106 |   }
107 | 
108 |   setReceiver(e) {
109 |     console.log('Setting receiver: ' + e.target.value);
110 |     this.model.receiver = e.target.value;
111 |   }
112 | 
113 | }
114 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "angular-truffle-box": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "targets": {
 11 |         "build": {
 12 |           "builder": "@angular-devkit/build-angular:browser",
 13 |           "options": {
 14 |             "outputPath": "dist",
 15 |             "index": "src/index.html",
 16 |             "main": "src/main.ts",
 17 |             "tsConfig": "src/tsconfig.app.json",
 18 |             "polyfills": "src/polyfills.ts",
 19 |             "assets": [
 20 |               "src/assets",
 21 |               "src/favicon.ico"
 22 |             ],
 23 |             "styles": [
 24 |               "src/styles.css"
 25 |             ],
 26 |             "scripts": []
 27 |           },
 28 |           "configurations": {
 29 |             "production": {
 30 |               "optimization": true,
 31 |               "outputHashing": "all",
 32 |               "sourceMap": false,
 33 |               "extractCss": true,
 34 |               "namedChunks": false,
 35 |               "aot": true,
 36 |               "extractLicenses": true,
 37 |               "vendorChunk": false,
 38 |               "buildOptimizer": true,
 39 |               "fileReplacements": [
 40 |                 {
 41 |                   "replace": "src/environments/environment.ts",
 42 |                   "with": "src/environments/environment.prod.ts"
 43 |                 }
 44 |               ]
 45 |             }
 46 |           }
 47 |         },
 48 |         "serve": {
 49 |           "builder": "@angular-devkit/build-angular:dev-server",
 50 |           "options": {
 51 |             "browserTarget": "angular-truffle-box:build"
 52 |           },
 53 |           "configurations": {
 54 |             "production": {
 55 |               "browserTarget": "angular-truffle-box:build:production"
 56 |             }
 57 |           }
 58 |         },
 59 |         "extract-i18n": {
 60 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 61 |           "options": {
 62 |             "browserTarget": "angular-truffle-box:build"
 63 |           }
 64 |         },
 65 |         "test": {
 66 |           "builder": "@angular-devkit/build-angular:karma",
 67 |           "options": {
 68 |             "main": "src/test.ts",
 69 |             "karmaConfig": "./karma.conf.js",
 70 |             "polyfills": "src/polyfills.ts",
 71 |             "tsConfig": "src/tsconfig.spec.json",
 72 |             "scripts": [],
 73 |             "styles": [
 74 |               "src/styles.css"
 75 |             ],
 76 |             "assets": [
 77 |               "src/assets",
 78 |               "src/favicon.ico"
 79 |             ]
 80 |           }
 81 |         },
 82 |         "lint": {
 83 |           "builder": "@angular-devkit/build-angular:tslint",
 84 |           "options": {
 85 |             "tsConfig": [
 86 |               "src/tsconfig.app.json",
 87 |               "src/tsconfig.spec.json"
 88 |             ],
 89 |             "exclude": []
 90 |           }
 91 |         }
 92 |       }
 93 |     },
 94 |     "angular-truffle-box-e2e": {
 95 |       "root": "e2e",
 96 |       "sourceRoot": "e2e",
 97 |       "projectType": "application",
 98 |       "targets": {
 99 |         "e2e": {
100 |           "builder": "@angular-devkit/build-angular:protractor",
101 |           "options": {
102 |             "protractorConfig": "./protractor.conf.js",
103 |             "devServerTarget": "angular-truffle-box:serve"
104 |           }
105 |         },
106 |         "lint": {
107 |           "builder": "@angular-devkit/build-angular:tslint",
108 |           "options": {
109 |             "tsConfig": [
110 |               "e2e/tsconfig.e2e.json"
111 |             ],
112 |             "exclude": []
113 |           }
114 |         }
115 |       }
116 |     }
117 |   },
118 |   "defaultProject": "angular-truffle-box",
119 |   "schematics": {
120 |     "@schematics/angular:component": {
121 |       "prefix": "app",
122 |       "styleext": "css"
123 |     },
124 |     "@schematics/angular:directive": {
125 |       "prefix": "app"
126 |     }
127 |   }
128 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Truffle Box for Angular
  2 | 
  3 | This Truffle Box provides a base for working with the Truffle Framework and Angular.
  4 | It provides a basic working example of the MetaCoin contracts with Angular components.
  5 | This project is generated with [Angular CLI](https://cli.angular.io/).
  6 | 
  7 | ## Prerequisites
  8 | 
  9 | In order to run the Truffle box, you will need [Node.js](https://nodejs.org) (tested with version 10.x.y). This will include `npm`, needed
 10 | to install dependencies. In order install these dependencies, you will also need [Python](https://www.python.org) (version 2.7.x) and
 11 | [git](https://git-scm.com/downloads). You will also need the [MetaMask](https://metamask.io/) plugin for Chrome.
 12 | 
 13 | ## Building
 14 | 
 15 | 1. Install truffle, Angular CLI and an Ethereum client. If you don't have a test environment, we recommend ganache-cli
 16 |   ```bash
 17 |   npm install -g truffle
 18 |   npm install -g @angular/cli
 19 |   npm install -g ganache-cli
 20 |   ```
 21 | 
 22 | 2. Download the box.
 23 |   ```bash
 24 |   truffle unbox Quintor/angular-truffle-box
 25 |   ```
 26 | 
 27 | 3. Run your Ethereum client. For Ganache CLI:
 28 |   ```bash
 29 |   ganache-cli
 30 |   ```
 31 | Note the mnemonic 12-word phrase printed on startup, you will need it later.
 32 | 
 33 | 4. Compile and migrate your contracts.
 34 |   ```bash
 35 |   truffle compile && truffle migrate
 36 |   ```
 37 | 
 38 | ## Configuration
 39 | 1. In order to connect with the Ethereum network, you will need to configure MetaMask
 40 | 2. Log into the `ganache-cli` test accounts in MetaMask, using the 12-word phrase printed earlier.
 41 |     1. A detailed explaination of how to do this can be found [here](https://truffleframework.com/docs/truffle/getting-started/truffle-with-metamask)
 42 |         1. Normally, the available test accounts will change whenever you restart `ganache-cli`.
 43 |         2. In order to receive the same test accounts every time you start `ganache-cli`, start it with a seed like this: `ganache-cli --seed 0` or `ganache-cli -m "put your mnemonic phrase here needs twelve words to work with MetaMask"`
 44 | 3. Point MetaMask to `ganache-cli` by connecting to the network `localhost:8545` 
 45 | 
 46 | 
 47 | ## Running
 48 | 
 49 | 1. Run the app using Angular CLI:
 50 |   ```bash
 51 |   npm start
 52 |   ```
 53 | The app is now served on localhost:4200
 54 | 
 55 | 2. Making sure you have configured MetaMask, visit http://localhost:4200 in your browser.
 56 | 
 57 | 3. Send MetaCoins!
 58 | 
 59 | ## Testing
 60 | 
 61 | 1. Running the Angular component tests:
 62 |   ```bash
 63 |   ng test
 64 |   ```
 65 | 
 66 | 2. Running the Truffle tests:
 67 |   ```bash
 68 |   truffle test
 69 |   ```
 70 | 
 71 | 3. Running Protactor end-to-end tests
 72 | 
 73 |   ```bash
 74 |   ng e2e
 75 |   ```
 76 | ## Releasing
 77 | Using the Angular CLI you can build a distributable of your app. Will be placed in `dist/`
 78 | 
 79 |   ```bash
 80 |   ng build
 81 |   ```
 82 | 
 83 | ## FAQ
 84 | 
 85 | * __Where can I find more documentation?__
 86 | 
 87 | This Truffle box is a union of [Truffle](http://truffleframework.com/) and an Angular setup created with [Angular CLI](https://cli.angular.io/).
 88 | For solidity compilation and Ethereum related issues, try the [Truffle documentation](http://truffleframework.com/docs/).
 89 | For Angular CLI and typescript issues, refer to the [Angular CLI documentation](https://github.com/angular/angular-cli/wiki)
 90 | 
 91 | * __Common errors and their solutions__
 92 | 
 93 | | Error | Solution |
 94 | |-------|----------|
 95 | | `Module not found: Error: Can't resolve '../../../../build/contracts/MetaCoin.json'` during `ng serve` | Run `truffle compile` |
 96 | | `Error: the tx doesn't have the correct nonce.` in MetaMask | Reset MetaMask: Settings -> Reset Account |
 97 | | `Error getting balance; see log.` in UI, with `Error: MetaCoin has not been deployed to detected network (network/artifact mismatch)` in browser console | Ensure you have started ganache, run `truffle migrate` and configured MetaMask to point to ganache |
 98 | 
 99 | 
100 | 
101 | * __How do I get this to work on Windows?__
102 | 
103 | Possible issues:
104 | 
105 | - If you're missing a C++ compiler, run `npm install --global --production windows-build-tools` in a cmd with administrative rights.
106 | - If the `truffle.js` file opens when you're trying to run truffle commands, rename the file to `truffle-config.js`
107 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------