Merge pull request #109 from lum-network/feature/lum-861

[LUM-861] Wallet -> Update JS SDK

.github/workflows/pull_request.yml

@@ -23,23 +23,23 @@ jobs:
       - name: Install packages
         run: yarn && cd src/frontend-elements && yarn
 
-      - name: Build
+      - name: Build for Mainnet
         run: yarn build
         env:
           SASS_PATH: "node_modules:src/styles"
           GENERATE_SOURCEMAP: "false"
-          REACT_APP_RPC_URL: "https://node0.testnet.lum.network/rpc"
+          REACT_APP_RPC_URL: "https://node0.mainnet.lum.network/rpc"
 
       - name: Test
         run: yarn test
 
-      - name: Deploy
+      - name: Deploy Mainnet Preview
         uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           expires: 7d
           projectId: lum-network
-          target: lum-network-wallet-testnet
+          target: lum-network-wallet
         env:
           FIREBASE_CLI_PREVIEWS: hostingchannels

config-overrides.js

@@ -14,13 +14,21 @@ module.exports = {
             buffer: require.resolve('buffer'),
         };
         config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules'];
+
         config.plugins = [
             ...config.plugins,
             new webpack.ProvidePlugin({
                 Buffer: ['buffer', 'Buffer'],
             }),
         ];
 
+        config.module.rules.push({
+            test: /\.m?js$/,
+            resolve: {
+                fullySpecified: false,
+            },
+        });
+
         return config;
     },
     jest: function (config) {
@@ -29,12 +37,13 @@ module.exports = {
             '^.+\\.(ts|tsx)$': 'ts-jest',
         };
 
-        config.transformIgnorePatterns = ['node_modules/(?!(axios))'];
+        config.transformIgnorePatterns = ['/node_modules/(?!(@ledgerhq))'];
 
         config.moduleNameMapper = {
             ...config.moduleNameMapper,
             '\\.(css|scss)$': 'identity-obj-proxy',
-            '@ledgerhq/devices': '@ledgerhq/devices/lib',
+            '@ledgerhq/devices': '@ledgerhq/devices/lib-es',
+            axios: 'axios/dist/node/axios.cjs',
         };
 
         return config;

jest.config.js

@@ -1,7 +1,7 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
     preset: 'ts-jest',
-    testEnvironment: 'node',
+    testEnvironment: 'jsdom',
     moduleDirectories: ['node_modules'],
     roots: ['<rootDir>'],
 };

package.json

@@ -3,8 +3,18 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@ledgerhq/hw-transport-webusb": "^6.7.0",
-        "@lum-network/sdk-javascript": "^0.8.7",
+        "@cosmjs/amino": "0.32.1",
+        "@cosmjs/crypto": "0.32.1",
+        "@cosmjs/ledger-amino": "0.32.1",
+        "@cosmjs/proto-signing": "0.32.1",
+        "@cosmjs/stargate": "0.32.1",
+        "@cosmjs/utils": "0.32.1",
+        "@keplr-wallet/cosmos": "^0.12.59",
+        "@keplr-wallet/unit": "^0.12.48",
+        "@ledgerhq/hw-app-cosmos": "6.28.2",
+        "@ledgerhq/hw-transport": "6.28.5",
+        "@ledgerhq/hw-transport-webusb": "6.28.1",
+        "@lum-network/sdk-javascript": "^1.0.0-beta.2",
         "@popperjs/core": "^2.11.6",
         "@qognicafinance/react-lightweight-charts": "^1.0.5",
         "@rematch/core": "^2.2.0",
@@ -17,6 +27,7 @@
         "buffer": "^6.0.3",
         "class-transformer": "^0.5.1",
         "clipboard": "^2.0.11",
+        "cosmjs-utils": "^0.1.0",
         "crypto-browserify": "^3.12.0",
         "crypto-js": "^4.1.1",
         "dayjs": "^1.11.7",
@@ -57,16 +68,18 @@
         "@babel/preset-typescript": "^7.21.0",
         "@keplr-wallet/types": "^0.12.5",
         "@types/bootstrap": "^5.2.6",
+        "@types/crypto-js": "^4.2.1",
         "@types/cryptojs": "^3.1.29",
         "@types/dompurify": "^3.0.2",
-        "@types/jest": "^29.4.0",
+        "@types/jest": "^27.4.0",
         "@types/marked": "^4",
         "@types/node": "^16.10.3",
         "@types/numeral": "^2.0.2",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-transition-group": "^4.4.5",
+        "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^5.53.0",
         "@typescript-eslint/parser": "^5.53.0",
         "eslint": "^8.34.0",
@@ -77,7 +90,7 @@
         "identity-obj-proxy": "^3.0.0",
         "jest-environment-jsdom": "^29.5.0",
         "prettier": "^2.2.1",
-        "ts-jest": "^29.1.0"
+        "ts-jest": "^27"
     },
     "scripts": {
         "start": "react-app-rewired start",
@@ -86,6 +99,12 @@
         "eject": "react-scripts eject",
         "lint": "eslint src/**/*.tsx src/**/*.ts --fix"
     },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
     "browserslist": {
         "production": [
             ">0.2%",

src/@types/modules.d.ts

@@ -1 +1,7 @@
 declare module '*.scss';
+
+/**
+ * Add untyped module declaration
+ * Only used by the KeyStore feature therefore not properly declared as it is a minor, almost deprecated feature.
+ */
+declare module 'crypto-browserify';

src/components/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ProposalStatus } from '@lum-network/sdk-javascript/build/codec/cosmos/gov/v1beta1/gov';
-import { BondStatus } from '@lum-network/sdk-javascript/build/codec/cosmos/staking/v1beta1/staking';
+import { ProposalStatus } from '@lum-network/sdk-javascript/build/codegen/cosmos/gov/v1beta1/gov';
+import { BondStatus } from '@lum-network/sdk-javascript/build/codegen/cosmos/staking/v1beta1/staking';
 
 import { useTranslation } from 'react-i18next';
 import assets from 'assets';

src/components/Inputs/HdPathInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import Input from './Input';
 
@@ -15,6 +15,10 @@ const validateDerivationPath = (values: string[]) => {
             return false;
         }
 
+        if (val === 'm') {
+            continue;
+        }
+
         const valToNumber = Number(val);
         if (Number.isNaN(valToNumber) || valToNumber < 0) {
             return false;
@@ -50,10 +54,6 @@ const HdPathInput = ({ className, value, onChange, onCheck }: Props): JSX.Elemen
         }, 100);
     };
 
-    useEffect(() => {
-        setInputsValues(value.split('/').map((val) => val.replace(`\'`, '')));
-    }, [value]);
-
     return (
         <>
             <div className={`d-flex flex-row align-items-center ${className}`}>

src/components/Modals/Modal.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useImperativeHandle, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Modal as BootstrapModal } from 'bootstrap';
 
 import './Modals.scss';
 
@@ -9,67 +10,119 @@ interface Props {
     withCloseButton?: boolean;
     contentClassName?: string;
     bodyClassName?: string;
-    dataBsBackdrop?: 'static' | 'true';
+    dataBsBackdrop?: 'static' | boolean;
     dataBsKeyboard?: boolean;
     onCloseButtonPress?: () => void;
 }
 
-const Modal = React.forwardRef<HTMLDivElement, Props>(
-    (
-        {
-            id,
-            children,
-            bodyClassName,
-            contentClassName,
-            onCloseButtonPress,
-            withCloseButton = true,
-            dataBsBackdrop = 'true',
-            dataBsKeyboard = true,
-        },
+export interface ModalHandlers {
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+    addEventListener: (event: string, listener: () => void) => void;
+    removeEventListener: (event: string, listener: () => void) => void;
+}
+
+const Modal: React.ForwardRefRenderFunction<ModalHandlers, Props> = (props, ref) => {
+    const {
+        id,
+        children,
+        bodyClassName,
+        contentClassName,
+        onCloseButtonPress,
+        withCloseButton = true,
+        dataBsBackdrop = true,
+        dataBsKeyboard = true,
+    } = props;
+
+    const [buttonEnabled, setButtonEnabled] = useState(false);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const bootstrapModalRef = useRef<BootstrapModal>();
+
+    useEffect(() => {
+        if (modalRef.current) {
+            bootstrapModalRef.current = BootstrapModal.getOrCreateInstance(modalRef.current, {
+                keyboard: dataBsKeyboard,
+                backdrop: dataBsBackdrop,
+            });
+        }
+    }, [modalRef]);
+
+    useImperativeHandle(
         ref,
-    ) => {
-        const [buttonEnabled, setButtonEnabled] = useState(false);
+        () => ({
+            toggle: () => {
+                if (bootstrapModalRef.current) {
+                    bootstrapModalRef.current.toggle();
+                }
+            },
+            show: () => {
+                if (bootstrapModalRef.current) {
+                    bootstrapModalRef.current.show();
+                }
+            },
+            hide: () => {
+                if (bootstrapModalRef.current) {
+                    bootstrapModalRef.current.hide();
+                }
+            },
+            addEventListener: (event: string, listener: () => void) => {
+                const el = document.getElementById(id);
+
+                if (el) {
+                    el.addEventListener(event, listener);
+                }
+            },
+            removeEventListener: (event: string, listener: () => void) => {
+                const el = document.getElementById(id);
+
+                if (el) {
+                    el.removeEventListener(event, listener);
+                }
+            },
+        }),
+        [bootstrapModalRef],
+    );
 
-        const { t } = useTranslation();
+    const { t } = useTranslation();
 
-        useEffect(() => {
-            setTimeout(() => setButtonEnabled(true), 300);
-        }, []);
+    useEffect(() => {
+        setTimeout(() => setButtonEnabled(true), 300);
+    }, []);
 
-        return (
-            <div
-                tabIndex={-1}
-                id={id}
-                className="modal fade"
-                aria-labelledby={`${id}Label`}
-                aria-hidden="true"
-                data-bs-backdrop={dataBsBackdrop}
-                data-bs-keyboard={dataBsKeyboard}
-                ref={ref}
-            >
-                <div className="modal-dialog modal-dialog-centered my-5">
-                    <div className={`border-0 text-center modal-content ${contentClassName}`}>
-                        {withCloseButton && (
-                            <button
-                                type="button"
-                                disabled={!buttonEnabled}
-                                onClick={onCloseButtonPress}
-                                className="close-btn bg-white rounded-circle align-self-center"
-                                data-bs-dismiss="modal"
-                                data-bs-target={id}
-                                aria-label={t('common.close')}
-                            >
-                                <div className="btn-close mx-auto" />
-                            </button>
-                        )}
-                        <div className={`modal-body mx-auto ${bodyClassName}`}>{children}</div>
-                    </div>
+    return (
+        <div
+            tabIndex={-1}
+            id={id}
+            className="modal fade"
+            aria-labelledby={`${id}Label`}
+            aria-hidden="true"
+            data-bs-backdrop={dataBsBackdrop}
+            data-bs-keyboard={dataBsKeyboard}
+            ref={modalRef}
+        >
+            <div className="modal-dialog modal-dialog-centered my-5">
+                <div className={`border-0 text-center modal-content ${contentClassName}`}>
+                    {withCloseButton && (
+                        <button
+                            type="button"
+                            disabled={!buttonEnabled}
+                            onClick={onCloseButtonPress}
+                            className="close-btn bg-white rounded-circle align-self-center"
+                            data-bs-dismiss="modal"
+                            data-bs-target={id}
+                            aria-label={t('common.close')}
+                        >
+                            <div className="btn-close mx-auto" />
+                        </button>
+                    )}
+                    <div className={`modal-body mx-auto ${bodyClassName}`}>{children}</div>
                 </div>
             </div>
-        );
-    },
-);
+        </div>
+    );
+};
 
 Modal.displayName = 'Modal';
 
-export default Modal;
+export default React.forwardRef(Modal);