Skip to content
This repository has been archived by the owner on May 16, 2024. It is now read-only.

Commit

Permalink
Minor fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@obany
obany committed Jul 28, 2020
1 parent 6beb0ca commit 7052fe7
Show file tree
Hide file tree
Showing 10 changed files with 266 additions and 33 deletions.
9 changes: 8 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# Changelog

## v0.1.0
## v0.1.2

Fix crash on unknown asset
Added Edit asset details
Added Delete asset
Added Copy receive address button

## v0.1.1

* Initial Release
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "pollen-wallet",
"description": "IOTA Pollen Wallet",
"version": "0.1.1",
"version": "0.1.2",
"author": "Martyn Janes <[email protected]>",
"repository": {
"type": "git",
Expand Down
144 changes: 119 additions & 25 deletions src/app/components/Wallet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import classNames from "classnames";
import React, { Component, ReactNode } from "react";
import { ServiceFactory } from "../../factories/serviceFactory";
import { ClipboardHelper } from "../../helpers/clipboardHelper";
import { IWalletAsset } from "../../models/IWalletAsset";
import { IWalletService } from "../../models/services/IWalletService";
import Spinner from "./Spinner";
import { WalletProps } from "./WalletProps";
Expand Down Expand Up @@ -253,8 +255,14 @@ class Wallet extends Component<WalletProps, WalletState> {
</div>

<div className="card margin-b-s">
<div className="card--header">
<div className="card--header row space-between">
<h2>Addresses</h2>
{this.state.newAssetName === undefined && (
<button
onClick={() => this.copyReceiveAddress()}>
Copy Receive Address
</button>
)}
</div>
<div className="card--content">
{(!this.state.addresses || this.state.addresses.length === 0) && (
Expand Down Expand Up @@ -294,6 +302,7 @@ class Wallet extends Component<WalletProps, WalletState> {
onClick={() => this.setState({
newAssetName: "",
newAssetSymbol: "",
newAssetColor: "",
newAssetAmount: "100",
errorNewAsset: ""
})}
Expand Down Expand Up @@ -322,7 +331,7 @@ class Wallet extends Component<WalletProps, WalletState> {
</div>
<div className="card--label">
Symbol
</div>
</div>
<div className="card--value margin-b-s">
<input
className="fill"
Expand All @@ -334,20 +343,24 @@ class Wallet extends Component<WalletProps, WalletState> {
})}
/>
</div>
<div className="card--label">
Amount
</div>
<div className="card--value margin-b-s">
<input
className="fill"
type="text"
disabled={this.state.isBusyNewAsset}
value={this.state.newAssetAmount}
onChange={e => this.setState({
newAssetAmount: e.target.value
})}
/>
</div>
{!this.state.newAssetColor && (
<React.Fragment>
<div className="card--label">
Amount
</div>
<div className="card--value margin-b-s">
<input
className="fill"
type="text"
disabled={this.state.isBusyNewAsset}
value={this.state.newAssetAmount}
onChange={e => this.setState({
newAssetAmount: e.target.value
})}
/>
</div>
</React.Fragment>
)}
<div className="row">
<button
className="margin-r-s"
Expand All @@ -365,7 +378,8 @@ class Wallet extends Component<WalletProps, WalletState> {
disabled={this.state.isBusyNewAsset}
onClick={() => this.setState({
newAssetName: undefined,
newAssetSymbol: undefined
newAssetSymbol: undefined,
newAssetColor: undefined
})}
>
Cancel
Expand Down Expand Up @@ -393,15 +407,39 @@ class Wallet extends Component<WalletProps, WalletState> {
<th>Color</th>
<th>Name</th>
<th>Symbol</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{this.state.wallet.assets &&
this.state.wallet.assets.map((asset, idx) => (
<tr key={idx}>
<tr key={idx} className="middle">
<td className="break">{asset.color}</td>
<td className="break">{asset.name}</td>
<td>{asset.symbol}</td>
<td>
<button
type="button"
className="margin-r-t"
onClick={() => this.setState({
newAssetName: asset.name,
newAssetSymbol: asset.symbol,
newAssetColor: asset.color,
newAssetAmount: "1",
errorNewAsset: ""
})}
>
Edit
</button>
<button
type="button"
className="button--danger"
disabled={!this.assetHasBalance(asset)}
onClick={() => this.deleteAsset(asset.color)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
Expand Down Expand Up @@ -438,7 +476,8 @@ class Wallet extends Component<WalletProps, WalletState> {
</div>
</div>
</React.Fragment>
)}
)
}
</div>
);
}
Expand Down Expand Up @@ -505,17 +544,25 @@ class Wallet extends Component<WalletProps, WalletState> {
async () => {
if (this.state.newAssetName && this.state.newAssetSymbol) {
try {
await this._walletService.createAsset(
this.state.newAssetName,
this.state.newAssetSymbol,
BigInt(parseInt(this.state.newAssetAmount, 10))
);
if (this.state.newAssetColor) {
await this._walletService.updateAsset(
this.state.newAssetColor,
this.state.newAssetName,
this.state.newAssetSymbol);
} else {
await this._walletService.createAsset(
this.state.newAssetName,
this.state.newAssetSymbol,
BigInt(parseInt(this.state.newAssetAmount, 10))
);
}

this.setState({
isBusyNewAsset: false,
newAssetAmount: "100",
newAssetName: undefined,
newAssetSymbol: undefined
newAssetSymbol: undefined,
newAssetColor: undefined
});
} catch (err) {
this.setState({
Expand All @@ -528,6 +575,33 @@ class Wallet extends Component<WalletProps, WalletState> {
);
}

/**
* Delete an asset.
* @param color The color of the asset to delete.
*/
private deleteAsset(color: string): void {
this.setState(
{
isBusyNewAsset: true,
errorNewAsset: ""
},
async () => {
try {
await this._walletService.deleteAsset(color);

this.setState({
isBusyNewAsset: false
});
} catch (err) {
this.setState({
errorNewAsset: err.message,
isBusyNewAsset: false
});
}
}
);
}

/**
* Send funds to address.
*/
Expand Down Expand Up @@ -562,6 +636,26 @@ class Wallet extends Component<WalletProps, WalletState> {
}
);
}

/**
* Does the asset have a balance.
* @param asset The asset to check.
* @returns True if the asset has a balance.
*/
private assetHasBalance(asset: IWalletAsset): boolean {
if (this.state.balances) {
return this.state.balances.find(b => b.asset.color === asset.color) === undefined;
}

return false;
}

/**
* Copy the receive address to the clipboard.
*/
private copyReceiveAddress(): void {
ClipboardHelper.copy(this.state.receiveAddress);
}
}

export default Wallet;
5 changes: 5 additions & 0 deletions src/app/components/WalletState.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ export interface WalletState {
*/
newAssetSymbol?: string;

/**
* New wallet asset color.
*/
newAssetColor?: string;

/**
* The amount of tokens to create.
*/
Expand Down
46 changes: 46 additions & 0 deletions src/helpers/clipboardHelper.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* Helper methods for clipbaord.
*/
export class ClipboardHelper {
/**
* Copy the text to the clipboard.
* @param text The text to copy.
* @returns True id the text was copied.
*/
public static copy(text: string | undefined): boolean {
if (text !== undefined && text !== null) {
try {
const textArea = document.createElement("textarea");

// Prevent zooming on iOS
textArea.style.fontSize = "12pt";
// Reset box model
textArea.style.border = "0";
textArea.style.padding = "0";
textArea.style.margin = "0";
// Move element out of screen horizontally
textArea.style.position = "absolute";
textArea.style.left = "-9999px";
// Move element to the same position vertically
const yPosition = window.pageYOffset || document.documentElement.scrollTop;
textArea.style.top = `${yPosition}px`;

textArea.setAttribute("readonly", "");
textArea.value = text;

document.body.append(textArea);

textArea.select();
document.execCommand("Copy");
textArea.remove();

return true;
} catch {
// Not much we can do
return false;
}
} else {
return false;
}
}
}
14 changes: 14 additions & 0 deletions src/models/services/IWalletService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,20 @@ export interface IWalletService {
*/
createAsset(name: string, symbol: string, amount: bigint): Promise<void>;

/**
* Update an asset.
* @param name The color of the asset to update.
* @param name The name for the updated asset.
* @param symbol The symbol for the updated asset.
*/
updateAsset(color: string, name: string, symbol: string): Promise<void>;

/**
* Delete an asset.
* @param name The color of the asset to delete.
*/
deleteAsset(color: string): Promise<void>;

/**
* Send funds to an address.
* @param address The address to send the funds to.
Expand Down
4 changes: 2 additions & 2 deletions src/scss/buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ button {
}

&.button--danger {
background-color: $danger;
border-color: $danger;
background-color: $danger;
color: $white;
}

&.button--secondary {
background-color: $white;
border-color: $dark-green;
background-color: $white;
color: $dark-green;
}
}
1 change: 1 addition & 0 deletions src/scss/tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ table {

&.break {
word-break: break-all;
// sass-lint:disable no-duplicate-properties
word-break: break-word;
}
}
Expand Down
Loading

0 comments on commit 7052fe7

Please sign in to comment.