@obigtech/ui-utils v2.1.0
Obig UI utilities
Table of contents
Colors
generateHash
This takes a string and generates a number has to use with %
.
const hash = generateHash('some string');
// get a number between 0-360
const hue = hash % 360;
hashValue
This function generates a hash from a string, and then gets a value from an array. An example usage would be to have an array of colors you'd like to pick from.
const colors = ['red', 'blue', 'green'];
const string = 'Hiro Protaganist';
const colorFromString = hashValue<('red' | 'blue' | 'green')[]>(string, colors);
// will be one of the colors
stringToHslColor
This takes a string, saturation value, and lightness value to output a color in HSL.
const string = 'Hiro Protaganist';
const color = stringToHslColor(string, 60, 55);
// an hsl color
moduloRange
This is a helper function to select a number from a range.
const restrictedHue = moduloRange(hash, [40, 60], true);
// will return a number between 40 and 60, including 60 as an option
Errors
getTxErrorMessage
Will return a human readable error message for the status of a transaction.
// tx.tx_status === "abort_by_post_condition"
const error = getTxErrorMessage(tx);
// This transaction would have succeeded, but was rolled back by a supplied post-condition.
// tx.tx_status === "abort_by_response"
const error = getTxErrorMessage(tx);
// This transaction did not succeed because the transaction was aborted during its execution.
Strings
capitalize
This will convert the first letter of a string to upper case.
const string = 'hello obg';
console.log(capitalize(string));
// -> Hello obg
with0x
This will prefix a string with 0x
, unless it contains a .
.
const hex = `33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;
const contract = 'ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market';
const id = 'muneeb.id';
const query = with0x(contract);
// ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market
const query = with0x(id);
// muneeb.id
const query = with0x(hex);
// 0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353
truncateHex
This will truncate a hex, keeping the 0x out of the offset amount.
const hex = `0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;
const shortened = truncateHex(hex, 4);
// 0x33cc...a353
truncateMiddle
This will truncate any string in the middle, given an offset amount.
const hex = `0x33cc9a437e704e790958f7bb66492f5ad3a863ab3bcbef47138069725549a353`;
const shortened = truncateHex(hex, 4);
// 0x33cc...a353
const contract = 'ST12EY99GS4YKP0CP2CFW6SEPWQ2CGVRWK5GHKDRV.market';
const shortenedContract = truncateHex(contract, 4);
// ST12...KDRV.market
withSTX
This will wrap any value with a suffix STX
.
const value = '1,000.00';
console.log(withSTX(value));
// 1,000.00 STX
addSepBetweenStrings
This will combine an array of strings with a divider character.
const string = addSepBetweenStrings(['Pending', 'Contract deploy', '5 min ago'], '|');
// Pending | Contract deploy | 5 min ago