feat: new hooks; dep updates

Author: aorumbayev

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 refs:
   container: &container
     docker:
-      - image: node:14.21.2
+      - image: node:18.12.1
     working_directory: ~/repo
   steps:
     - &Versions

.eslintrc.js

@@ -1,22 +1,19 @@
 module.exports = {
-  extends: ['react-app', 'prettier'],
+  extends: ['react-app', 'prettier', 'plugin:storybook/recommended'],
   plugins: ['prettier'],
   rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-        tabWidth: 2,
-        printWidth: 100,
-        semicolons: true,
-        quoteProps: 'as-needed',
-        jsxSingleQuote: false,
-        bracketSpacing: true,
-        jsxBracketSameLine: true,
-        arrowParens: 'always',
-        endOfLine: 'lf',
-      },
-    ],
-  },
-};
+    'prettier/prettier': ['error', {
+      singleQuote: true,
+      trailingComma: 'all',
+      tabWidth: 2,
+      printWidth: 100,
+      semicolons: true,
+      quoteProps: 'as-needed',
+      jsxSingleQuote: false,
+      bracketSpacing: true,
+      jsxBracketSameLine: true,
+      arrowParens: 'always',
+      endOfLine: 'lf'
+    }]
+  }
+};

.github/workflows/check-codebase.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
@@ -37,7 +37,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
@@ -55,7 +55,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
@@ -73,7 +73,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, ubuntu-latest]
-        node: [14, 16]
+        node: [18, 19]
         exclude:
           - os: macos-latest
             node: 12

.storybook/addons.js

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/config.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+});

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/manager.ts

@@ -31,9 +31,11 @@
 <br />
 
 - [**Integrations**](./docs/Integrations.md)
-  - [`useNfd`](./docs/useNfd.md) - [🚀🚀🚀](https://codesandbox.io/s/awesomealgo-hook-usenfd-example-23bnq4) - fetches NFD metadata from [NFD API](https://api-docs.nf.domains/).
+  - [`useNfdLookup`](./docs/useNfdLookup.md) - [🚀🚀🚀](https://aorumbayev.github.io/awesomealgo-hooks/?path=/docs/example-usenfddemo--docs) - fetches NFD metadata from [NFD API](https://api-docs.nf.domains/).
+  - [`useSubtopiaSubLookup`](./docs/useSubtopiaSubLookup.md) - [🚀🚀🚀](https://aorumbayev.github.io/awesomealgo-hooks/?path=/docs/example-usesubptopiasublookupdemo--docs) - fetches Subtopia subscription record from [Subtopia Platform](https://subtopia.io).
 - [**Helpers**](./docs/Helpers.md)
-  - [`useShortAddress`](./docs/useShortAddress.md) - [🚀🚀🚀](https://codesandbox.io/s/awesomealgo-hook-useshortaddress-example-r30poo) - shortens a wallet address string.
+  - [`useShortAddress`](./docs/useShortAddress.md) - [🚀🚀🚀](https://aorumbayev.github.io/awesomealgo-hooks/?path=/docs/example-useshortaddressdemo--docs) - shortens a wallet address string.
+  - [`useExplorerUrl`](./docs/useExplorerUrl.md) - [🚀🚀🚀](https://aorumbayev.github.io/awesomealgo-hooks/?path=/docs/example-useexplorerurldemo--docs) - generates an explorer URL for a given address. Currently supports [AlgoScan](https://algoscan.app) and [AlgoExplorer](https://algoexplorer.io).
 
 <br />
 

.storybook/preview.ts

@@ -0,0 +1,32 @@
+# `useExplorerUrl`
+
+React hook that generates an explorer URL based on the given chain, input, type, and explorer type.
+
+## Usage
+
+```jsx
+import { useExplorerUrl } from 'LIBRARY_NAME';
+import { ExplorerUrlType, ChainType, ExplorerType } from 'PATH_TO_MISC_ENUMS';
+
+const Demo = () => {
+  const explorerUrl = useExplorerUrl(
+    ChainType.MainNet,
+    'ADDRESS_OR_TX_ID',
+    ExplorerUrlType.Transaction,
+    ExplorerType.AlgoScan,
+  );
+
+  return <div>Explorer URL: {explorerUrl}</div>;
+};
+```
+
+## Call signature
+
+```jsx
+function useExplorerUrl = (
+  chain: ChainType,
+  input: string | number,
+  type: ExplorerUrlType,
+  explorerType: ExplorerType = ExplorerType.AlgoScan,
+): string;
+```

.storybook/webpack.config.js

@@ -0,0 +1,39 @@
+# `useSubscriptionLookup`
+
+React hook that fetches a subscription record based on the given address, SMI ID, and chain type.
+
+## Usage
+
+```jsx
+import { useSubscriptionLookup } from 'LIBRARY_NAME';
+import { ChainType } from 'PATH_TO_MISC_ENUMS';
+
+const Demo = () => {
+  const [subscriptionRecord, error, refresh] = useSubscriptionLookup(
+    'ADDRESS',
+    SMI_ID,
+    ChainType.MainNet,
+  );
+
+  return (
+    <div>
+      {error ? (
+        <div>Error: {error.message}</div>
+      ) : (
+        <div>Subscription Record: {JSON.stringify(subscriptionRecord)}</div>
+      )}
+      <button onClick={refresh}>Refresh</button>
+    </div>
+  );
+};
+```
+
+## Call signature
+
+```jsx
+function useSubscriptionLookup = (
+  address: string,
+  smiId: number,
+  chain: ChainType,
+): [SubscriptionRecord | null, any, () => void];
+```