Skip to content

Commit

Permalink
chore: add summary box for named asset
Browse files Browse the repository at this point in the history
Signed-off-by: David S. Brima <david@blockchaindevelopmentltd.com>
  • Loading branch information
Cremba committed Dec 10, 2021
1 parent ed5aa7d commit 437c28e
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 3 deletions.
87 changes: 84 additions & 3 deletions src/pages/asset/Asset.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ import Page from '../../components/Page';
import { ChartLoader } from '../../components/charts';
import { Tabs, TabHead, TabBody, Tab } from '../../components/tabs';
import { TransactionsTab, ChartTab, KeyholdersTab } from './components/tabs';
import {
getPrice,
getRedeemableEODTimestamp, getRedeemableEODTimestampHigh,
getRedeemablePositionData,
getRedeemablePriceData,
getRedeemableTickerData
} from './NamingUtils';
const { Address, ContractId, PublicKey } = require('@zen/zenjs');

class AssetPage extends Component {
get assetStore() {
Expand Down Expand Up @@ -115,6 +123,26 @@ class AssetPage extends Component {
if (!Object.keys(asset).length) {
return null;
}
const assetName = ObjectUtils.getSafeProp(
this.assetStore,
'asset.metadata.name'
);
const assetMisc = ObjectUtils.getSafeProp(
this.assetStore,
'asset.metadata.misc'
);

const chain = ObjectUtils.getSafeProp(
this.props.rootStore.infoStore.infos,
'chain'
);
const start = assetName && getRedeemableEODTimestamp(assetName);
const ticker = assetName && getRedeemableTickerData(assetName);
const position = assetName && getRedeemablePositionData(assetName);
const price = assetName && getRedeemablePriceData(assetName);
const expiry = assetName && getRedeemableEODTimestampHigh(assetName);
const oracleAddress = assetName && PublicKey.fromString(assetMisc.oraclePK).toAddress(chain);
const oraclePK = assetName && assetMisc.oraclePK;
return (
<div className="row">
<div className="col-lg-6">
Expand Down Expand Up @@ -162,7 +190,7 @@ class AssetPage extends Component {
</tbody>
</table>
</div>
<div className="col-lg-6">
{!assetName && <div className="col-lg-6">
<table className="table table-zen">
<thead>
<tr>
Expand All @@ -177,7 +205,60 @@ class AssetPage extends Component {
externalChartData={this.assetStore.assetDistributionData.data}
externalChartLoading={this.assetStore.assetDistributionData.loading}
/>
</div>
</div>}
{assetName && <div className="col-lg-6">
<table className="table table-zen" >
<thead>
<tr>
<th scope="col" colSpan="2">Asset Name Metadata</th>
</tr>
</thead>
<tbody>
<tr>
<td>EVENT {expiry ? 'START' : ''}</td>
<td>{TextUtils.getDateStringFromTimestamp(start)}</td>
</tr>
{expiry ? <tr>
<td>EVENT END</td>
<td>{TextUtils.getDateStringFromTimestamp(expiry)}</td>
</tr> : null}
<tr>
<td>TICKER</td>
<td>{ticker}</td>
</tr>
<tr>
<td>POSITION</td>
<td>{position}</td>
</tr>
<tr>
<td>PRICE</td>
<td>$ {getPrice(price)}</td>
</tr>
<tr>
<td>COLLATERAL</td>
<td>{AssetUtils.getAssetNameFromCode(assetMisc.collateral)}</td>
</tr>
<tr>
<td>ORACLE SERVICE PROVIDER</td>
<td>
<HashLink hash={oracleAddress} url={`/address/${oracleAddress}`} />
</td>
</tr>
<tr>
<td>ORACLE PK</td>
<td>
<HashLink hash={oraclePK} />
</td>
</tr>
<tr>
<td>ORACLE CID</td>
<td>
<HashLink hash={assetMisc.oracleCID} url={`/contracts/${Address.getPublicKeyHashAddress(chain, ContractId.fromString(assetMisc.oracleCID))}`} />
</td>
</tr>
</tbody>
</table>
</div>}
</div>
);
}
Expand All @@ -192,7 +273,7 @@ class AssetPage extends Component {
<TabHead>
<Tab id="txns">TRANSACTIONS</Tab>
<Tab id="keyholders">KEYHOLDERS</Tab>
<Tab id="chart">CHART</Tab>
<Tab id="chart">DISTRIBUTION</Tab>
</TabHead>
<TabBody>
<Switch>
Expand Down
98 changes: 98 additions & 0 deletions src/pages/asset/NamingUtils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/**
* from zen-products repo
*/
import Decimal from 'decimal.js';

/**
* get from the asset naming server is coming from the naming server.
* @param {string} assetName
*/
export function getRedeemableEODTimestamp(assetName) {
const found = getRedeemableDayData(assetName);
if (!found) return false;
const day = found.substr(0, 2);
const month = found.substr(2, 2);
const year = found.substr(4, 2);
return Date.UTC(`20${year}`, month - 1, day, 20).toString();
}

/**
*
* @param {string} assetName
*/
export function getRedeemableEODTimestampHigh(assetName) {
let found = getRedeemableDayHighData(assetName);
if (!found) return '';
const day = found.substr(1, 2);
const month = found.substr(3, 2);
const year = found.substr(5, 2);
return Date.UTC(`20${year}`, month - 1, day, 20).toString();
}

/**
* get from the asset naming server is coming from the naming server.
* Format of the naming date DDMMYY
* @param {string} assetName
*/
export function getRedeemableDayData(assetName) {
const firstRegex = /[0-9]{6}/;
const found = firstRegex.exec(assetName);
if (!found) return '';
return found[0];
}

/**
* get from the asset naming server is coming from the naming server.
* Format of the naming date DDMMYY
* @param {string} assetName
*/
export function getRedeemableDayHighData(assetName) {
const firstRegex = /H[0-9]{6}/;
const found = firstRegex.exec(assetName);
if (!found) return '';
return found[0];
}

/**
* get from the asset naming server is coming from the naming server.
* Format of the naming date DDMMYY
* @param {string} assetName
*/
export function getRedeemablePriceData(assetName) {
const firstRegex = /[0-9]*$/;
const found = firstRegex.exec(assetName);
if (!found[0]) return '';
return found[0];
}

/**
* get from the asset naming server is coming from the naming server.
* @param {string} assetName
*/
export function getRedeemableTickerData(assetName) {
const firstRegex = /^[A-Z]*/;
const found = firstRegex.exec(assetName);
if (!found[0]) return '';
return found[0];
}

/**
* get from the asset naming server is coming from the naming server.
* @param {string} assetName
*/
export function getRedeemablePositionData(assetName) {
const firstRegex = /Bull|Bear/;
const found = firstRegex.exec(assetName);
if (!found[0]) return '';
return found[0];
}

/**
* Represent price from per multiples of 10 units
* @param {(number|string)} value
* @param {(number)} multiples
*/
export function getPrice(value, multiples = 100) {
return new Decimal(value).dividedBy(multiples).toString();
}

0 comments on commit 437c28e

Please sign in to comment.