feat: adding new hook for url shortening, fixing types in nfd hook (#10)

* feat: adding new hook for url shortening, fixing types in nfd hook

* feat: refining readme

README.md

@@ -1,57 +1,62 @@
 <div align="center">
-    <p align="center"><img  width=100%  src="https://bafkreidlreuflnufdhsyhgt6bgy3odc2pujznp4vn4mzl3zcuzh4siim7y.ipfs.nftstorage.link" /></p>
+    <p align="center"><img  width=100%  src="https://bafkreihktvr7ntgkrrcorwkkprhoamwdishetnotawzbrnsdqi32ehj5lu.ipfs.nftstorage.link" /></p>
   <sup>
     <a href="https://www.npmjs.com/package/awesomealgo-hooks">
-       <img src="https://img.shields.io/npm/v/awesomealgo-hooks.svg" alt="npm package" />
+       <img src="https://img.shields.io/npm/v/awesomealgo-hooks.svg?color=teal" alt="npm package" />
+    </a>
+    <a href="https://www.npmjs.com/package/awesomealgo-hooks">
+       <img src="https://img.shields.io/bundlephobia/min/awesomealgo-hooks?color=teal&logoColor=teal" alt="npm package" />
     </a>
     <a href="https://circleci.com/gh/aorumbayev/awesomealgo-hooks">
-      <img src="https://img.shields.io/circleci/project/github/aorumbayev/awesomealgo-hooks/main.svg" alt="CircleCI main" />
+      <img src="https://img.shields.io/circleci/project/github/aorumbayev/awesomealgo-hooks/main.svg?color=teal" alt="CircleCI main" />
     </a>
-    <a href="https://www.npmjs.com/package/awesomealgo-hooks">
-      <img src="https://img.shields.io/npm/dm/awesomealgo-hooks.svg" alt="npm downloads" />
+    <a href="https://developer.algorand.com/">
+      <img src="https://img.shields.io/coincap/price-usd/algorand?color=teal" alt="algo price" />
     </a>
     <a href="http://aorumbayev.github.io/awesomealgo-hooks">
-      <img src="https://img.shields.io/badge/demos-🚀-teal.svg" alt="demos" />
+      <img src="https://img.shields.io/badge/demos-🚀-teal.svg?color=teal" alt="demos" />
     </a>
-    <a><img src="https://visitor-badge.glitch.me/badge?page_id=aorumbayev.awesomealgo-hooks&right_color=blue" /></a>
+    <a><img src="https://visitor-badge.glitch.me/badge?page_id=aorumbayev.awesomealgo-hooks&right_color=teal" /></a>
     <br />
     Collection of helpful <a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a> for Algorand DApps.</em>
   </sup>
   <br />
   <br />
 
-  <pre>npm i <a href="https://www.npmjs.com/package/awesomealgo-hooks">awesomealgo-hooks</a></pre>
-  <pre>yarn add <a href="https://www.npmjs.com/package/awesomealgo-hooks">awesomealgo-hooks</a></pre>
+  <pre>npm i <a href="https://www.npmjs.com/package/awesomealgo-hooks">awesomealgo-hooks<br/></a>yarn add <a href="https://www.npmjs.com/package/awesomealgo-hooks">awesomealgo-hooks</a></pre>
 
   <br />
 </div>
 
+<br />
+
 - [**Integrations**](./docs/Integrations.md)
-  > More integration and helpful hooks to come, stay tuned!
-  - [`useNfd`](./docs/useNfd.md) - fetches NFD metadata from [NFD API](https://api-docs.nf.domains/). [![][img-demo]](https://codesandbox.io/s/awesomealgo-hook-usenfd-example-23bnq4)
+  - [`useNfd`](./docs/useNfd.md) - [🚀🚀🚀](https://codesandbox.io/s/awesomealgo-hook-usenfd-example-23bnq4) - fetches NFD metadata from [NFD API](https://api-docs.nf.domains/).
+- [**Helpers**](./docs/Helpers.md)
+  - [`useShortAddress`](./docs/useShortAddress.md) - [🚀🚀🚀](https://codesandbox.io/s/awesomealgo-hook-useshortaddress-example-r30poo) - shortens a wallet address string.
 
 <br />
 
 <p align="center">
   <a href="./docs/Usage.md"><strong>Usage</strong></a> – how to import.
   <br />
   <a href="./LICENSE"><strong>Unlicense</strong></a> – public domain.
+  <br />
+  <a href="./CONTRIBUTING.md"><strong>Contribution</strong></a> – click to see the guideline.
 </p>
 
 <br />
 
-[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg
-
 ---
 
-## ⭐️ Stargazers
+## Stargazers
 
 Special thanks to everyone who contributed to the repository ❤️
 
 [![Stargazers repo roster for @aorumbayev/awesomealgo-hooks](https://reporoster.com/stars/dark/aorumbayev/awesomealgo-hooks)](https://github.com/aorumbayev/awesomealgo-hooks/stargazers)
 
 [![Forkers repo roster for @aorumbayev/awesomealgo-hooks](https://reporoster.com/forks/dark/aorumbayev/awesomealgo-hooks)](https://github.com/aorumbayev/awesomealgo-hooks/network/members)
 
-## 📝 Credits
+## Credits
 
 - [react-use](https://github.com/streamich/react-use) - for providing a great set of examples on maintaining and distributing hook package repos.

docs/Helpers.md

@@ -0,0 +1,3 @@
+# Helpers
+
+**Helpers** are a set of hooks with various minor helper utilities.

docs/useShortAddress.md

@@ -0,0 +1,25 @@
+# `useShortAddress`
+
+React hook that shortens a wallet address string.
+
+## Usage
+
+```jsx
+import { useShortAddress } from 'awesomealgo-hooks';
+
+const Demo = () => {
+  const shortAddress = useShortAddress('NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI');
+
+  return (
+    <div>
+      shortened address: {shortAddress}
+    </div>
+  );
+};
+```
+
+#### Call signature
+
+```typescript
+function useShortAddress = (address: string, width: number = 6): string ;
+```

src/index.ts

@@ -1 +1,2 @@
 export { default as useNfd } from './useNfd';
+export { default as useShortAddress } from './useShortAddress';

src/misc/interfaces.ts

@@ -0,0 +1,60 @@
+export interface UseNfdSettings {
+  network: 'mainnet' | 'testnet';
+  [key: string]: any;
+}
+
+export enum NFDSaleType {
+  AUCTION = `auction`,
+  BUYITNOW = `buyItNow`,
+}
+
+export enum NFDCategory {
+  CURATED = `curated`,
+  PREMIUM = `premium`,
+  COMMON = `common`,
+}
+
+export enum NFDState {
+  AVAILABLE = `available`,
+  MINTING = `minting`,
+  RESERVED = `reserved`,
+  FORSALE = `forSale`,
+  OWNED = `owned`,
+}
+
+export interface NFDProperties {
+  internal: { [key: string]: any };
+  userDefined: { avatar?: string; [key: string]: any };
+  verified: { [key: string]: any };
+  additionalProperties: { [key: string]: any };
+}
+
+export interface NFD {
+  name: string;
+  appID: number;
+  asaID: number;
+  avatarOutdated: boolean;
+  caAlgo: string[];
+  cacheControl: string;
+  category: NFDCategory;
+  currentAsOfBlock: number;
+  depositAccount: string;
+  etag: string;
+  metaTags: string[];
+  nfdAccount: string;
+  owner: string;
+  properties: NFDProperties;
+  reservedFor: string;
+  saleType: NFDSaleType;
+  sellAmount: number;
+  seller: string;
+  sigNameAddress: string;
+  state: NFDState;
+  tags: string[];
+  timeChanged: Date;
+  timeCreated: Date;
+  timePurchased: Date;
+  unverifiedCa: { [key: string]: any };
+  unverifiedCaAlgo: string[];
+  additionalProperties: { [key: string]: any };
+}

src/useNfd.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { NFD, UseNfdSettings } from './misc/types';
+import { NFD, UseNfdSettings } from './misc/interfaces';
 
 const NFD_MAINNET = `https://api.nf.domains`;
 const NFD_TESTNET = `https://api.testnet.nf.domains`;

src/useShortAddress.ts

@@ -0,0 +1,5 @@
+const useShortAddress = (address: string, width: number = 6): string => {
+  return `${address.slice(0, width)}...${address.slice(-width)}`;
+};
+
+export default useShortAddress;

stories/useNfd.story.tsx

@@ -5,16 +5,24 @@ import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const [nfd, nfds, error, refresh] = useNfd(
-    'NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI',
+    'R6YMHB4DIZIPYK2BV3TR4CD57CJZDLISTWKN5XMY7X7TCFACZIAOK5I4RM',
     { network: 'mainnet' },
   );
 
   return (
     <div>
       <button onClick={refresh}>Refresh</button>
       <br />
+      <img
+        src={nfd ? nfd.properties.userDefined.avatar : ''}
+        alt="icon"
+        width={'250px'}
+        height={'250px'}
+      />
       <br />
-      nfd: {nfd ? JSON.stringify(nfd) : 'loading...'}
+      nfd: {nfd ? nfd.name : 'loading...'}
+      <br />
+      nfd content: {nfd ? JSON.stringify(nfd) : 'loading...'}
       <br />
       <br />
       nfds: {nfds ? `Contains ${nfds.length} NFDs` : 'loading...'}

stories/useShortAddress.story.tsx

@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { useShortAddress } from '../src';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const address = 'NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI';
+  const shortAddress = useShortAddress(address);
+
+  return (
+    <div>
+      <div>shortened address: {shortAddress} for width=6</div>
+      <br />
+      <div>original address: {shortAddress}</div>
+    </div>
+  );
+};
+
+storiesOf('Helpers/useShortAddress.story', module)
+  .add('Docs', () => <ShowDocs md={require('../docs/useShortAddress.md')} />)
+  .add('Demo', () => <Demo />);

tests/__snapshots__/useShortAddress.test.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useShortAddress.default 0 1`] = `"192.168.1.5...192.168.1.5"`;
+
+exports[`useShortAddress.default 1 1`] = `"192.168.1.5...192.168.1.5"`;
+
+exports[`useShortAddress.default 2 1`] = `"192.168.1.5...192.168.1.5"`;
+
+exports[`useShortAddress.default 3 1`] = `"0.0.0.0...0.0.0.0"`;
+
+exports[`useShortAddress.default 4 1`] = `"192.168.1.5...192.168.1.5"`;
+
+exports[`useShortAddress.default 5 1`] = `"..."`;

tests/useNFD.test.ts

@@ -1,16 +1,24 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { Renderer, renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { act } from 'react-test-renderer';
+import { NFD } from '../src/misc/interfaces';
 import useNfd from '../src/useNfd';
 
 describe('useNfd', () => {
   it('should be defined', () => {
     expect(useNfd).toBeDefined();
   });
 
-  it('should update document title', () => {
-    let hook = null;
+  it('should be defined 2', () => {
+    let hook: RenderHookResult<
+      string,
+      [NFD | null, NFD[] | null, any, () => void],
+      Renderer<string>
+    > | null = null;
 
-    renderHook((props) => useNfd(props), {
-      initialProps: 'NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI',
+    act(() => {
+      hook = renderHook((props) => useNfd(props), {
+        initialProps: 'NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI',
+      });
     });
 
     expect(hook).toBeDefined();

tests/useShortAddress.test.ts

@@ -0,0 +1,33 @@
+import * as useShortAddress from '../src/useShortAddress';
+// @ponicode
+describe('useShortAddress.default', () => {
+  test('0', () => {
+    let result: any = useShortAddress.default('192.168.1.5', 100);
+    expect(result).toMatchSnapshot();
+  });
+
+  test('1', () => {
+    let result: any = useShortAddress.default('192.168.1.5', 64);
+    expect(result).toMatchSnapshot();
+  });
+
+  test('2', () => {
+    let result: any = useShortAddress.default('192.168.1.5', 24);
+    expect(result).toMatchSnapshot();
+  });
+
+  test('3', () => {
+    let result: any = useShortAddress.default('0.0.0.0', 10);
+    expect(result).toMatchSnapshot();
+  });
+
+  test('4', () => {
+    let result: any = useShortAddress.default('192.168.1.5', 16);
+    expect(result).toMatchSnapshot();
+  });
+
+  test('5', () => {
+    let result: any = useShortAddress.default('', -Infinity);
+    expect(result).toMatchSnapshot();
+  });
+});