From 437c28eb99a4b4a5894727a841579a6c44b1b97b Mon Sep 17 00:00:00 2001 From: "David S. Brima" Date: Thu, 11 Nov 2021 00:46:24 +0200 Subject: [PATCH] chore: add summary box for named asset Signed-off-by: David S. Brima --- src/pages/asset/Asset.jsx | 87 ++++++++++++++++++++++++++++-- src/pages/asset/NamingUtils.js | 98 ++++++++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+), 3 deletions(-) create mode 100644 src/pages/asset/NamingUtils.js diff --git a/src/pages/asset/Asset.jsx b/src/pages/asset/Asset.jsx index 1ed8dfb8..c50e71c5 100644 --- a/src/pages/asset/Asset.jsx +++ b/src/pages/asset/Asset.jsx @@ -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() { @@ -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 (
@@ -162,7 +190,7 @@ class AssetPage extends Component {
-
+ {!assetName &&
@@ -177,7 +205,60 @@ class AssetPage extends Component { externalChartData={this.assetStore.assetDistributionData.data} externalChartLoading={this.assetStore.assetDistributionData.loading} /> - + } + {assetName &&
+
+ + + + + + + + + + + {expiry ? + + + : null} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Asset Name Metadata
EVENT {expiry ? 'START' : ''}{TextUtils.getDateStringFromTimestamp(start)}
EVENT END{TextUtils.getDateStringFromTimestamp(expiry)}
TICKER{ticker}
POSITION{position}
PRICE$ {getPrice(price)}
COLLATERAL{AssetUtils.getAssetNameFromCode(assetMisc.collateral)}
ORACLE SERVICE PROVIDER + +
ORACLE PK + +
ORACLE CID + +
+
}
); } @@ -192,7 +273,7 @@ class AssetPage extends Component { TRANSACTIONS KEYHOLDERS - CHART + DISTRIBUTION diff --git a/src/pages/asset/NamingUtils.js b/src/pages/asset/NamingUtils.js new file mode 100644 index 00000000..c2196016 --- /dev/null +++ b/src/pages/asset/NamingUtils.js @@ -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(); +} +