Restructure examples folder and add nodejs example in typescript

Author: everdimension

.eslintrc.js

@@ -36,5 +36,11 @@ module.exports = {
       files: ["*.test.{js,ts,tsx}", "test.{js,ts,tsx}"],
       env: { jest: true },
     },
+    {
+      files: ["examples/**/*.{js,ts,tsx}"],
+      rules: {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+      },
+    },
   ],
 };

examples/EntryInfo.tsx renamed to examples/development/EntryInfo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import type { Entry } from "../src";
-import { DataStatus } from "../src/cache/DataStatus";
+import type { Entry } from "../../src";
+import { DataStatus } from "../../src/cache/DataStatus";
 
 export function EntryInfo<T>({
   entry,

examples/Helpers.tsx renamed to examples/development/Helpers.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo } from "react";
-import { useAssetsFullInfo, useAssetsPrices } from "../src/react";
-import { useAssetsInfo } from "../src/react";
-import { useAddressLoans } from "../src/react";
+import { useAssetsFullInfo, useAssetsPrices } from "../../src/react";
+import { useAssetsInfo } from "../../src/react";
+import { useAddressLoans } from "../../src/react";
 import { EntryInfo } from "./EntryInfo";
 import { VStack } from "./VStack";
-import { TEST_ADDRESS } from "./config";
-import { client, useAddressAssets } from "../src";
+import { TEST_ADDRESS } from "../config";
+import { client, useAddressAssets } from "../../src";
 
 const USDC = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";
 const UNI = "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984";
@@ -179,8 +179,7 @@ export function Helpers({
             .slice(0, 5)
             .map(addressAsset => (
               <div key={addressAsset.asset.asset_code}>
-                {addressAsset.asset.name}{' '}
-                {addressAsset.quantity}
+                {addressAsset.asset.name} {addressAsset.quantity}
               </div>
             ));
         }}

examples/VStack.tsx renamed to examples/development/VStack.tsx

@@ -1,17 +1,18 @@
 import React, { useCallback, useMemo, useReducer, useState } from "react";
 import ReactDOM from "react-dom";
-import { CachePolicy, Entry, useAssetsInfo } from "../src";
-import { client } from "../src";
-import { DataStatus } from "../src/cache/DataStatus";
-import { useAssetsFullInfo } from "../src/react";
-import { useSubscription } from "../src/react/useSubscription";
-import { ResponsePayload } from "../src/requests/ResponsePayload";
-import { endpoint, API_TOKEN } from "./config";
+import { CachePolicy, Entry } from "../../src";
+import { client } from "../../src";
+import { DataStatus } from "../../src/cache/DataStatus";
+import { useAssetsFullInfo } from "../../src/react";
+import { useSubscription } from "../../src/react/useSubscription";
+import { ResponsePayload } from "../../src/requests/ResponsePayload";
+import { endpoint, API_TOKEN } from "../config";
 import { EntryInfo } from "./EntryInfo";
 import { Helpers } from "./Helpers";
 import { VStack } from "./VStack";
 
 client.configure({ url: endpoint, apiToken: API_TOKEN });
+Object.assign(window, { client });
 
 const ETH = "eth";
 const USDC = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";

examples/app.tsx renamed to examples/development/app.tsx

@@ -0,0 +1,3 @@
+export const url = "wss://api-staging.zerion.io";
+export const apiToken = "Zerion.0JOY6zZTTw6yl5Cvz9sdmXc7d5AhzVMG";
+export const address = "0x42b9df65b219b3dd36ff330a4dd8f327a6ada990";

examples/tsconfig.json renamed to examples/development/tsconfig.json

@@ -0,0 +1,34 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { client } from "../../";
+import { address, url, apiToken } from "./config";
+import { createViewModel } from "./viewModels/addressAsset";
+import { formatCurrency } from "./viewModels/shared/formatCurrency";
+import { formatNumber } from "./viewModels/shared/formatNumber";
+
+client.configure({
+  url,
+  apiToken,
+});
+
+const currency = "usd";
+
+client.addressAssets({
+  payload: {
+    address,
+    currency,
+  },
+  onData: data => {
+    const assetsToDisplay = Object.values(data.assets)
+      .map(addressAsset => createViewModel(addressAsset))
+      .filter(asset => asset.value != null && asset.value > 1)
+      .sort((a, b) => Number(b.value) - Number(a.value))
+      .map(asset => ({
+        ...asset,
+        price: formatCurrency(asset.price, currency),
+        value: formatNumber(asset.value),
+      }));
+
+    console.table(assetsToDisplay); // eslint-disable-line no-console
+  },
+});

examples/node/config.ts

@@ -0,0 +1,16 @@
+{
+  "name": "@everdimension-testing/node",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "ts-node ./index.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "everdimension",
+  "license": "ISC",
+  "dependencies": {
+    "ts-node": "^9.1.1"
+  }
+}

examples/node/index.ts

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "declaration": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "pretty": true,
+    "lib": ["esnext"]
+  }
+}

examples/node/package-lock.json

@@ -0,0 +1,16 @@
+import type { AddressAsset } from "../../../lib/entities/AddressAsset";
+import { convertNumber } from "./shared/convertNumber";
+
+export function createViewModel(addressAsset: AddressAsset) {
+  const { asset, quantity } = addressAsset;
+  const price = asset.price ? asset.price.value : null;
+  const commonQuantity = convertNumber(quantity, 0 - asset.decimals);
+  const value = price ? price * commonQuantity : null;
+  return {
+    name: asset.name,
+    symbol: asset.symbol,
+    price: asset.price ? asset.price.value : null,
+    quantity: commonQuantity,
+    value: value,
+  };
+}

examples/node/package.json

@@ -0,0 +1,6 @@
+export function convertNumber(
+  value: string | number,
+  decimalPoints: number
+): number {
+  return Number(value) * 10 ** decimalPoints;
+}

examples/node/tsconfig.json

@@ -0,0 +1,7 @@
+export function formatCurrency(value: number | null, currency: string): string {
+  return value == null
+    ? "-"
+    : new Intl.NumberFormat("en", { style: "currency", currency }).format(
+        value
+      );
+}

examples/node/viewModels/addressAsset.ts

@@ -0,0 +1,3 @@
+export function formatNumber(value: number | null): string {
+  return value == null ? "-" : new Intl.NumberFormat("en").format(value);
+}

examples/node/viewModels/shared/convertNumber.ts

@@ -9,7 +9,7 @@
   "author": "[email protected]",
   "license": "MIT",
   "dependencies": {
-    "defi-sdk": "0.1.0-alpha.12",
+    "defi-sdk": "0.1.0-alpha.14",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

examples/node/viewModels/shared/formatCurrency.ts

@@ -1,4 +1,4 @@
-/* esling-env node */
+/* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { client } = require("../lib/defi-sdk.js");
 

examples/node/viewModels/shared/formatNumber.ts

@@ -7,7 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <div id="root2"></div>
-    <script src="./examples/app.tsx"></script>
+    <script src="./examples/development/app.tsx"></script>
   </body>
 </html>