From 1a314461b9b86ebaf4a5aa85ed70afce2ea421d8 Mon Sep 17 00:00:00 2001 From: Al Date: Wed, 11 Jan 2023 01:38:06 +0100 Subject: [PATCH] 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 | 35 ++++++----- docs/Helpers.md | 3 + docs/useShortAddress.md | 25 ++++++++ src/index.ts | 1 + src/misc/interfaces.ts | 60 +++++++++++++++++++ src/misc/types.ts | 60 ------------------- src/useNfd.ts | 2 +- src/useShortAddress.ts | 5 ++ stories/useNfd.story.tsx | 12 +++- stories/useShortAddress.story.tsx | 21 +++++++ .../useShortAddress.test.ts.snap | 13 ++++ tests/useNFD.test.ts | 18 ++++-- tests/useShortAddress.test.ts | 33 ++++++++++ 13 files changed, 205 insertions(+), 83 deletions(-) create mode 100644 docs/Helpers.md create mode 100644 docs/useShortAddress.md create mode 100644 src/misc/interfaces.ts delete mode 100644 src/misc/types.ts create mode 100644 src/useShortAddress.ts create mode 100644 stories/useShortAddress.story.tsx create mode 100644 tests/__snapshots__/useShortAddress.test.ts.snap create mode 100644 tests/useShortAddress.test.ts diff --git a/README.md b/README.md index ec1c2d2..3b514ef 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,39 @@
-

+

- npm package + npm package + + + npm package - CircleCI main + CircleCI main - - npm downloads + + algo price - demos + demos - +
Collection of helpful React Hooks for Algorand DApps.

- 
npm i awesomealgo-hooks
- 
yarn add awesomealgo-hooks
+ 
npm i awesomealgo-hooks
yarn add awesomealgo-hooks

+
+ - [**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.
@@ -36,15 +41,15 @@ Usage – how to import.
Unlicense – public domain. +
+ Contribution – click to see the guideline.


-[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 ❤️ @@ -52,6 +57,6 @@ Special thanks to everyone who contributed to the repository ❤️ [![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. diff --git a/docs/Helpers.md b/docs/Helpers.md new file mode 100644 index 0000000..a6878ad --- /dev/null +++ b/docs/Helpers.md @@ -0,0 +1,3 @@ +# Helpers + +**Helpers** are a set of hooks with various minor helper utilities. diff --git a/docs/useShortAddress.md b/docs/useShortAddress.md new file mode 100644 index 0000000..41d3eca --- /dev/null +++ b/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 ( +
+ shortened address: {shortAddress} +
+ ); +}; +``` + +#### Call signature + +```typescript +function useShortAddress = (address: string, width: number = 6): string ; +``` diff --git a/src/index.ts b/src/index.ts index a44e0c9..64b4e95 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1,2 @@ export { default as useNfd } from './useNfd'; +export { default as useShortAddress } from './useShortAddress'; diff --git a/src/misc/interfaces.ts b/src/misc/interfaces.ts new file mode 100644 index 0000000..9d1c11e --- /dev/null +++ b/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 }; +} diff --git a/src/misc/types.ts b/src/misc/types.ts deleted file mode 100644 index 10438af..0000000 --- a/src/misc/types.ts +++ /dev/null @@ -1,60 +0,0 @@ -export type 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 type NFDProperties = { - internal: { [key: string]: any }; - user_defined: { [key: string]: any }; - verified: { [key: string]: any }; - additional_properties: { [key: string]: any }; -}; - -export type NFD = { - name: string; - app_id: number; - asa_id: number; - avatar_outdated: boolean; - ca_algo: string[]; - cache_control: string; - category: NFDCategory; - current_as_of_block: number; - deposit_account: string; - etag: string; - meta_tags: string[]; - nfd_account: string; - owner: string; - properties: NFDProperties; - reserved_for: string; - sale_type: NFDSaleType; - sell_amount: number; - seller: string; - sig_name_address: string; - state: NFDState; - tags: string[]; - time_changed: Date; - time_created: Date; - time_purchased: Date; - unverified_ca: { [key: string]: any }; - unverified_ca_algo: string[]; - additional_properties: { [key: string]: any }; -}; diff --git a/src/useNfd.ts b/src/useNfd.ts index 6785e95..a587759 100644 --- a/src/useNfd.ts +++ b/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`; diff --git a/src/useShortAddress.ts b/src/useShortAddress.ts new file mode 100644 index 0000000..571ec16 --- /dev/null +++ b/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; diff --git a/stories/useNfd.story.tsx b/stories/useNfd.story.tsx index d791823..f3a9052 100644 --- a/stories/useNfd.story.tsx +++ b/stories/useNfd.story.tsx @@ -5,7 +5,7 @@ import ShowDocs from './util/ShowDocs'; const Demo = () => { const [nfd, nfds, error, refresh] = useNfd( - 'NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI', + 'R6YMHB4DIZIPYK2BV3TR4CD57CJZDLISTWKN5XMY7X7TCFACZIAOK5I4RM', { network: 'mainnet' }, ); @@ -13,8 +13,16 @@ const Demo = () => {

+ icon
- nfd: {nfd ? JSON.stringify(nfd) : 'loading...'} + nfd: {nfd ? nfd.name : 'loading...'} +
+ nfd content: {nfd ? JSON.stringify(nfd) : 'loading...'}

nfds: {nfds ? `Contains ${nfds.length} NFDs` : 'loading...'} diff --git a/stories/useShortAddress.story.tsx b/stories/useShortAddress.story.tsx new file mode 100644 index 0000000..c9c9fdf --- /dev/null +++ b/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 ( +
+
shortened address: {shortAddress} for width=6
+
+
original address: {shortAddress}
+
+ ); +}; + +storiesOf('Helpers/useShortAddress.story', module) + .add('Docs', () => ) + .add('Demo', () => ); diff --git a/tests/__snapshots__/useShortAddress.test.ts.snap b/tests/__snapshots__/useShortAddress.test.ts.snap new file mode 100644 index 0000000..b49c795 --- /dev/null +++ b/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`] = `"..."`; diff --git a/tests/useNFD.test.ts b/tests/useNFD.test.ts index 636aa2e..79bd4f5 100644 --- a/tests/useNFD.test.ts +++ b/tests/useNFD.test.ts @@ -1,4 +1,6 @@ -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', () => { @@ -6,11 +8,17 @@ describe('useNfd', () => { 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 + > | null = null; - renderHook((props) => useNfd(props), { - initialProps: 'NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI', + act(() => { + hook = renderHook((props) => useNfd(props), { + initialProps: 'NRLA7VZ2YV6WOS2LBS3UK25DB463XRSNG63BYNQI6CSGGROFWVQ2EKBQSI', + }); }); expect(hook).toBeDefined(); diff --git a/tests/useShortAddress.test.ts b/tests/useShortAddress.test.ts new file mode 100644 index 0000000..b01b8db --- /dev/null +++ b/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(); + }); +});