Settings Manager amendments

.github/ISSUE_TEMPLATE/chore.md

@@ -1,10 +1,9 @@
 ---
 name: Chore
 about: Take note of a to-do that has to be addressed
-title: ''
-labels: 'chore'
-assignees: ''
-
+title: ""
+labels: "chore"
+assignees: ""
 ---
 
 **What needs to be done?**

README.md

@@ -14,15 +14,25 @@ Try it out at [NEAR Mainnet](https://multicall.app) or [NEAR Testnet](https://te
 
 ### Development
 
-#### Quick start
+#### Initial setup
 
-##### Install dependencies
+First, you should install a Node version supported by the project.
+If you don't use [asdf](https://asdf-vm.com/), your version manager should be able to utilize `.nvmrc` configuration file.
+Otherwise, you need to manage the installation on your own, taking the version from the file.
+
+If you have asdf installed, simply run the following command:
+
+```bash
+asdf install
+```
+
+And install project dependencies:
 
 ```sh
 npm install
 ```
 
-##### Run development server
+#### Development server
 
 For **NEAR Testnet**:
 

package.json

@@ -31,9 +31,14 @@
         "@babel/preset-react": "^7.16.7",
         "@netlify/plugin-lighthouse": "^4.0.2",
         "@parcel/transformer-sass": "^2.4.1",
+        "@types/babel__generator": "^7.6.4",
+        "@types/babel__template": "^7.4.1",
         "@types/big.js": "^6.1.5",
         "@types/lodash.debounce": "^4.0.7",
+        "@types/luxon": "^3.0.1",
+        "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.6",
+        "@types/scheduler": "^0.16.2",
         "@typescript-eslint/parser": "^5.36.1",
         "babel-jest": "^28.0.2",
         "env-cmd": "~10.1.0",
@@ -70,11 +75,6 @@
         "@near-wallet-selector/my-near-wallet": "^7.3.0",
         "@near-wallet-selector/near-wallet": "^7.3.0",
         "@near-wallet-selector/sender": "^7.3.0",
-        "@types/babel__generator": "^7.6.4",
-        "@types/babel__template": "^7.4.1",
-        "@types/luxon": "^3.0.1",
-        "@types/react": "^18.0.0",
-        "@types/scheduler": "^0.16.2",
         "big.js": "^6.2.1",
         "clsx": "^1.2.1",
         "cron-parser": "^4.6.0",

src/app/global.d.ts

@@ -0,0 +1,45 @@
+import { NetworkId } from "@near-wallet-selector/core";
+import { Component } from "react";
+
+import { Task, TaskCopy, TaskInfo, Wallet } from "../entities";
+import { AppPage } from "../pages/app";
+import { Sidebar } from "../widgets";
+
+declare global {
+    /* Temporary workaround fixing typechecking with assets import */
+    declare module "*.png";
+    declare module "*.svg";
+    declare module "*.jpeg";
+    declare module "*.jpg";
+
+    /**
+     * Function arguments inference
+     */
+    declare type Arguments<F extends Function> = F extends (...args: infer A) => any ? A : never;
+
+    /**
+     * String encoded number (u128)
+     */
+    declare type U128String = string;
+
+    /**
+     * String encoded number (u64)
+     */
+    declare type U64String = string;
+
+    declare type JsonString = string;
+
+    /**
+     * Base64 encoded JSON
+     */
+    declare type Base64String = string;
+
+    /**
+     * NEAR Protocol account ID
+     */
+    declare type AccountId = string;
+
+    interface Window {
+        EXPORT: Component;
+    }
+}

src/index.tsx → src/app/index.tsx

@@ -1,16 +1,20 @@
 import "@near-wallet-selector/modal-ui/styles.css";
-import { lazy, Suspense } from "react";
-import ReactDOM from "react-dom";
+import { Suspense } from "react";
+import { createRoot } from "react-dom/client";
 import { HashRouter, Routes, Route, Navigate } from "react-router-dom";
 
-const AppPage = lazy(() => import("./pages/app"));
-const DaoPage = lazy(() => import("./pages/dao"));
-import { Wallet } from "./entities";
-import { DialogsLayer, Sidebar } from "./widgets";
-import "./shared/lib/persistent";
+import { Wallet } from "../entities";
+import { AppPage } from "../pages/app";
+import { DAOPage } from "../pages/dao";
+import { DialogsLayer, Sidebar } from "../widgets";
+import "../shared/lib/persistent";
 
-ReactDOM.render(
-    <Wallet.SelectorContextProvider>
+const appMountPoint = document.querySelector("#root") ?? document.createElement("div");
+
+appMountPoint.setAttribute("id", "root");
+
+createRoot(appMountPoint).render(
+    <Wallet.ContextProvider>
         <HashRouter>
             <Routes>
                 <Route
@@ -42,15 +46,13 @@ ReactDOM.render(
                         <>
                             <Sidebar full={true} />
                             <Suspense fallback={<div>Loading...</div>}>
-                                <DaoPage />
+                                <DAOPage />
                             </Suspense>
                             <DialogsLayer />
                         </>
                     }
                 />
             </Routes>
         </HashRouter>
-    </Wallet.SelectorContextProvider>,
-
-    document.querySelector("#root")
+    </Wallet.ContextProvider>
 );

src/entities/ft/ft.lib.ts

@@ -0,0 +1,14 @@
+import { Big, formatTokenAmount } from "../../shared/lib/converter";
+
+import { FTParams } from "./ft.params";
+
+export class FTLib {
+    public static readonly amountToDisplayAmount = (amount: string, decimals: number): string => {
+        const formattedAmount = formatTokenAmount(amount, decimals),
+            minimalDisplayAmount = Big("10").pow(-FTParams.FRACTIONAL_PART_LENGTH).toFixed();
+
+        return Big(formattedAmount).gt("0") && Big(formattedAmount).lt(minimalDisplayAmount)
+            ? "< " + minimalDisplayAmount
+            : formatTokenAmount(amount, decimals, FTParams.FRACTIONAL_PART_LENGTH);
+    };
+}

src/entities/ft/ft.model.ts

@@ -0,0 +1,23 @@
+import { FungibleToken } from "../../shared/lib/standards/fungibleToken";
+
+export type FTModel = {
+    balances: Pick<FungibleToken, "metadata"> & {
+        account: string;
+        multicallInstance: string;
+        total: string;
+    };
+};
+
+export const FTSchema: {
+    balances: {
+        data: null | FTModel["balances"][];
+        error: Error | null;
+        loading: boolean;
+    };
+} = {
+    balances: {
+        data: null,
+        error: null,
+        loading: true,
+    },
+};

src/entities/ft/ft.params.ts

@@ -0,0 +1,3 @@
+export class FTParams {
+    static FRACTIONAL_PART_LENGTH = 5;
+}

src/entities/ft/ft.service.ts

@@ -0,0 +1,75 @@
+import { createContext, useEffect, useMemo, useState } from "react";
+
+import { Multicall } from "../../shared/lib/contracts/multicall";
+import { Big } from "../../shared/lib/converter";
+import { FungibleToken } from "../../shared/lib/standards/fungibleToken";
+
+import { FTSchema } from "./ft.model";
+
+export interface IFTService {
+    accountId: AccountId;
+}
+
+export class FTService {
+    public static readonly BalancesContext = createContext(FTSchema.balances);
+
+    private static readonly balancesFetch = async (
+        { accountId }: IFTService,
+        callback: (result: typeof FTSchema.balances) => void
+    ) => {
+        const miAddress = Multicall.getInstanceAddress(accountId);
+
+        /**
+         * Get LikelyTokens list on account and its Multicall Instance
+         */
+        const [accountLikelyTokensList, miLikelyTokensList] = await Promise.all([
+            FungibleToken.getLikelyTokenContracts(accountId),
+            FungibleToken.getLikelyTokenContracts(miAddress),
+        ]);
+
+        /* Merge and de-duplicate both token lists */
+        const likelyTokensAddressesList = [...new Set([...accountLikelyTokensList, ...miLikelyTokensList])];
+
+        const likelyTokensList = await Promise.all(
+            likelyTokensAddressesList.map((address) => FungibleToken.init(address))
+        );
+
+        return callback({
+            data: await Promise.all(
+                likelyTokensList
+                    .filter((token) => token.ready === true)
+                    .map(async (token) => {
+                        const [account, multicallInstance] = await Promise.all([
+                            token.ftBalanceOf(accountId),
+                            token.ftBalanceOf(miAddress),
+                        ]);
+
+                        return {
+                            account,
+                            metadata: token.metadata,
+                            multicallInstance,
+                            total: Big(multicallInstance).add(account).toFixed(),
+                        };
+                    })
+            ),
+
+            error: null,
+            loading: false,
+        });
+    };
+
+    public static readonly useBalancesState = (inputs: IFTService) => {
+        const [state, stateUpdate] = useState(FTSchema.balances);
+
+        useEffect(() => {
+            stateUpdate(FTSchema.balances);
+            void FTService.balancesFetch(inputs, stateUpdate);
+        }, [...Object.values(inputs), stateUpdate]);
+
+        useEffect(() => {
+            state.error instanceof Error && void console.error(state.error);
+        }, [state.error]);
+
+        return useMemo(() => state, [...Object.values(inputs), ...Object.values(state)]);
+    };
+}

src/entities/ft/ft.ui.tsx

@@ -0,0 +1,41 @@
+import Big from "big.js";
+import { PropsWithChildren, useContext } from "react";
+
+import { IconLabel, NEARIcon } from "../../shared/ui/design";
+
+import { FTLib } from "./ft.lib";
+import { FTService, IFTService } from "./ft.service";
+
+interface FTBalancesProviderProps extends Pick<PropsWithChildren, "children">, IFTService {}
+
+export const FTBalancesProvider = ({ children, ...modelInputs }: FTBalancesProviderProps) => (
+    <FTService.BalancesContext.Provider value={FTService.useBalancesState(modelInputs)}>
+        {children}
+    </FTService.BalancesContext.Provider>
+);
+
+interface FTBalancesProps {
+    nonZeroOnly?: boolean;
+}
+
+export const ftBalancesRender = ({ nonZeroOnly = false }: FTBalancesProps) => {
+    const { data } = useContext(FTService.BalancesContext),
+        items = nonZeroOnly ? data?.filter(({ total }) => Big(total).gt("0")) : data;
+
+    return (
+        items?.map(({ account, metadata, multicallInstance, total }) => ({
+            content: [
+                <IconLabel
+                    icon={metadata.icon ?? <NEARIcon.GenericTokenFilled />}
+                    label={metadata.symbol}
+                />,
+
+                FTLib.amountToDisplayAmount(multicallInstance, metadata.decimals),
+                FTLib.amountToDisplayAmount(account, metadata.decimals),
+                FTLib.amountToDisplayAmount(total, metadata.decimals),
+            ],
+
+            id: metadata.symbol,
+        })) ?? null
+    );
+};

src/entities/ft/index.ts

@@ -0,0 +1,9 @@
+import { FTService } from "./ft.service";
+import { FTParams } from "./ft.params";
+import { FTBalancesProvider, ftBalancesRender } from "./ft.ui";
+
+export class FT extends FTParams {
+    static BalancesContext = FTService.BalancesContext;
+    static BalancesProvider = FTBalancesProvider;
+    static balancesRender = ftBalancesRender;
+}