Create LogionClient from Environment.

README.md

@@ -11,6 +11,11 @@ For the most recent version and how to install yarn, please refer to [yarn](http
 yarn install
 ```
 
+## Target an environment
+A config file `development.json` is required under [src/config/](src/config/).
+* To target a locally running node and directory, or fine-tune the config,  it's recommended to copy and/or adapt from [development.json.sample](src/config/development.json.sample).
+* To target a deployed environment (i.e. DEV, TEST or MVP), it's recommended to copy and/or adapt from [development-env.json.sample](src/config/development-env.json.sample).
+
 ## Usage
 
 Use below command in order to connect to a locally running infrastructure

public/config.js

@@ -2,10 +2,5 @@ let CONFIG = {
 // Uncomment below lines to provide runtime configuration.
 //    APP_NAME: "Logion Wallet",
 //    directory: "http://localhost:8090/api",
-//    edgeNodes: [
-//        {
-//            peerId: "12D3KooWBmAwcd4PJNJvfV89HwE48nwkRmAgo8Vy3uQEyNNHBox2",
-//            socket: "ws://localhost:9944"
-//        }
-//    ]
+//    rpcEndpoints: [ "ws://localhost:9944" ]
 };

src/__mocks__/LogionClientMock.ts

@@ -83,6 +83,10 @@ export class LogionClient {
             throw new Error();
         }
     }
+
+    config = {
+        rpcEndpoints: [ "ws://localhost:9944", "ws://localhost:9945", "ws://localhost:9946" ]
+    };
 }
 
 export class AccountTokens {

src/config/development-env.json.sample

@@ -0,0 +1,5 @@
+{
+    "APP_NAME": "Logion Wallet DEV",
+    "environment": "DEV"
+    "crossmintApiKey": "",
+}

src/config/development.json.sample

@@ -1,19 +1,10 @@
 {
     "APP_NAME": "Logion Wallet DEV",
     "directory": "http://localhost:8090",
-    "edgeNodes": [
-        {
-            "peerId": "12D3KooWBmAwcd4PJNJvfV89HwE48nwkRmAgo8Vy3uQEyNNHBox2",
-            "socket": "ws://localhost:9944"
-        },
-        {
-            "peerId": "12D3KooWQYV9dGMFoRzNStwpXztXaBUjtPqi6aU76ZgUriHhKust",
-            "socket": "ws://localhost:9945"
-        },
-        {
-            "peerId": "12D3KooWJvyP3VJYymTqG7eH4PM5rN4T2agk5cdNCfNymAqwqcvZ",
-            "socket": "ws://localhost:9946"
-        }
+    "rpcEndpoints": [
+        "ws://localhost:9944",
+        "ws://localhost:9945",
+        "ws://localhost:9946"
     ],
     "crossmintApiKey": "",
     "logionClassification": "",

src/config/index.tsx

@@ -1,27 +1,20 @@
-export interface Node {
-    socket: string;
-    peerId: string;
-}
+import { EnvironmentString } from "@logion/client";
 
 export interface ConfigType {
+    environment: EnvironmentString | undefined,
     APP_NAME: string,
-    DEVELOPMENT_KEYRING: boolean,
-    PROVIDER_SOCKET?: string,
-    RPC: object,
     directory: string,
-    edgeNodes: Node[],
+    rpcEndpoints: string[],
     crossmintApiKey: string,
     logionClassification: string,
     creativeCommons: string,
 }
 
 export const DEFAULT_CONFIG: ConfigType = {
+    environment: undefined,
     APP_NAME: "Logion Wallet",
-    DEVELOPMENT_KEYRING: true,
-    RPC: {
-    },
     directory: "",
-    edgeNodes: [],
+    rpcEndpoints: [],
     crossmintApiKey: "",
     logionClassification: "",
     creativeCommons: "",
@@ -33,19 +26,7 @@ export interface EnvConfigType extends Record<string, any> {
 
 const configEnv: EnvConfigType = require(`./${process.env.NODE_ENV}.json`);
 
-const envVarNames: string[] = [
-  'REACT_APP_PROVIDER_SOCKET',
-  'REACT_APP_DEVELOPMENT_KEYRING'
-];
-const envVars: EnvConfigType = envVarNames.reduce<EnvConfigType>((mem, n) => {
-    if (process.env[n] !== undefined) {
-        const configFieldName = n.slice(10);
-        mem[configFieldName] = process.env[n];
-    }
-    return mem;
-}, {});
-
 declare var CONFIG: any;
 
-const config: ConfigType = { ...DEFAULT_CONFIG, ...configEnv, ...envVars, ...CONFIG };
+const config: ConfigType = { ...DEFAULT_CONFIG, ...configEnv, ...CONFIG };
 export default config;

src/config/production.json

@@ -1,6 +1,5 @@
 {
     "APP_NAME": "Logion Wallet",
     "directory": "http://localhost:8090/api",
-    "edgeNodes": [],
     "crossmintApiKey": ""
 }

src/config/test.json

@@ -1,19 +1,10 @@
 {
     "APP_NAME": "Logion Wallet TEST",
     "directory": "http://localhost:8090/api",
-    "edgeNodes": [
-        {
-            "peerId": "12D3KooWBmAwcd4PJNJvfV89HwE48nwkRmAgo8Vy3uQEyNNHBox2",
-            "socket": "ws://localhost:9944"
-        },
-        {
-            "peerId": "12D3KooWQYV9dGMFoRzNStwpXztXaBUjtPqi6aU76ZgUriHhKust",
-            "socket": "ws://localhost:9945"
-        },
-        {
-            "peerId": "12D3KooWJvyP3VJYymTqG7eH4PM5rN4T2agk5cdNCfNymAqwqcvZ",
-            "socket": "ws://localhost:9946"
-        }
+    "rpcEndpoints": [
+        "ws://localhost:9944",
+        "ws://localhost:9945",
+        "ws://localhost:9946"
     ],
     "crossmintApiKey": ""
 }

src/loc/CertificateAndLimits.tsx

@@ -9,7 +9,6 @@ import Dialog from '../common/Dialog';
 import Icon from '../common/Icon';
 import { useLogionChain } from '../logion-chain';
 import { fullCertificateUrl } from '../PublicPaths';
-import config from '../config';
 import NewTabLink from '../common/NewTabLink';
 import StaticLabelValue from '../common/StaticLabelValue';
 
@@ -39,7 +38,7 @@ export interface Props {
 
 export default function CertificateAndLimits(props: Props) {
     const { loc } = props;
-    const { api } = useLogionChain();
+    const { api, client } = useLogionChain();
     const { backendConfig } = useCommonContext();
 
     const [ dateLimit, setDateLimit ] = useState<string>();
@@ -141,7 +140,7 @@ export default function CertificateAndLimits(props: Props) {
                     <StaticLabelValue
                         label='Logion endpoint'
                         value={
-                            <p>{ config.edgeNodes[0].socket }</p>
+                            <p>{ client?.config.rpcEndpoints[0] }</p>
                         }
                     />
 

src/loc/ImportItems.tsx

@@ -8,6 +8,7 @@ import {
     LogionClassification,
     SpecificLicense,
     CreativeCommons,
+    LogionClientConfig,
 } from "@logion/client";
 import { Fees, Hash, Lgnt } from '@logion/node-api';
 import { useCallback, useMemo, useState } from "react";
@@ -28,15 +29,14 @@ import './ImportItems.css';
 import { CsvItem, readItemsCsv } from "./ImportCsvReader";
 import Alert from "src/common/Alert";
 import { UUID } from "@logion/node-api";
-import config from "../config";
 import EstimatedFees from "./fees/EstimatedFees";
 import { BrowserFile } from "@logion/client-browser";
 import { Call, CallBatch, CallCallback } from "src/logion-chain/LogionChainContext";
 import ExtrinsicSubmissionStateView from "src/ExtrinsicSubmissionStateView";
 
 export default function ImportItems() {
     const { width } = useResponsiveContext();
-    const { signer, submitCallBatch, extrinsicSubmissionState, clearSubmissionState } = useLogionChain();
+    const { signer, submitCallBatch, extrinsicSubmissionState, clearSubmissionState, client } = useLogionChain();
     const { colorTheme } = useCommonContext();
     const { refresh, locState } = useUserLocContext();
 
@@ -48,29 +48,31 @@ export default function ImportItems() {
     const [ itemToSubmit, setItemToSubmit ] = useState<Item>();
 
     const readCsvFile = useCallback(async (file: File) => {
-        const collection = locState as ClosedCollectionLoc;
-        const acceptsUpload = collectionAcceptsUpload(collection);
-        clearSubmissionState();
-
-        const result = await readItemsCsv(file);
-        if("items" in result) {
-            const rows = toItems(result.items, acceptsUpload);
-
-            for(const item of rows) {
-                if(!item.error) {
-                    const existingItem = await collection.getCollectionItem({ itemId: item.id as Hash });
-                    item.submitted = existingItem !== undefined;
-                    item.success = existingItem !== undefined;
-                    item.upload = shouldUpload(acceptsUpload, existingItem, item.upload);
+        if (client !== null) {
+            const collection = locState as ClosedCollectionLoc;
+            const acceptsUpload = collectionAcceptsUpload(collection);
+            clearSubmissionState();
+
+            const result = await readItemsCsv(file);
+            if ("items" in result) {
+                const rows = toItems(result.items, acceptsUpload, client.config);
+
+                for (const item of rows) {
+                    if (!item.error) {
+                        const existingItem = await collection.getCollectionItem({ itemId: item.id as Hash });
+                        item.submitted = existingItem !== undefined;
+                        item.success = existingItem !== undefined;
+                        item.upload = shouldUpload(acceptsUpload, existingItem, item.upload);
+                    }
                 }
-            }
 
-            setItems(rows);
-        } else {
-            setCsvReadError(result.error);
+                setItems(rows);
+            } else {
+                setCsvReadError(result.error);
+            }
+            setShowImportItems(true);
         }
-        setShowImportItems(true);
-    }, [ clearSubmissionState, locState ]);
+    }, [ clearSubmissionState, locState, client ]);
 
     const itemFees = useCallback(async (item: Item) => {
         const collection = locState as ClosedCollectionLoc;
@@ -437,7 +439,7 @@ function collectionAcceptsUpload(collection: ClosedCollectionLoc): boolean {
     return collection.data().collectionCanUpload !== undefined && collection.data().collectionCanUpload === true;
 }
 
-function toItems(csvItems: CsvItem[], collectionAcceptsUpload: boolean): Item[] {
+function toItems(csvItems: CsvItem[], collectionAcceptsUpload: boolean, config: LogionClientConfig): Item[] {
     return csvItems.map(csvItem => {
         const id = csvItem.id;
         const displayId = csvItem.displayId;
@@ -497,7 +499,7 @@ function toItems(csvItems: CsvItem[], collectionAcceptsUpload: boolean): Item[]
 
             let tcValidationResult: TCValidationResult = {}
             if (error === undefined) {
-                tcValidationResult = validateTermsAndConditions(csvItem);
+                tcValidationResult = validateTermsAndConditions(csvItem, config);
                 error = tcValidationResult.tcError;
                 errorType = "validation";
             }
@@ -531,17 +533,17 @@ interface TCValidationResult {
     tcError?: string;
 }
 
-function validateTermsAndConditions(csvItem: CsvItem): TCValidationResult {
+function validateTermsAndConditions(csvItem: CsvItem, config: LogionClientConfig): TCValidationResult {
     try {
         if (csvItem.termsAndConditionsType === 'logion_classification') {
-            const logionClassificationLocId = UUID.fromAnyString(config.logionClassification);
+            const logionClassificationLocId = config.logionClassificationLoc;
             if (logionClassificationLocId === undefined) {
                 return { tcError: "logion_classification: Logion Classification LOC id not properly configured" }
             }
             const logionClassification = LogionClassification.fromDetails(logionClassificationLocId, csvItem.termsAndConditionsParameters);
             return { logionClassification }
         } else if (csvItem.termsAndConditionsType === 'CC4.0') {
-            const ccLocId = UUID.fromAnyString(config.creativeCommons);
+            const ccLocId = config.creativeCommonsLoc;
             if (ccLocId === undefined) {
                 return { tcError: "CC4.0: LOC id not properly configured" }
             }

src/logion-chain/Connection.ts

@@ -1,14 +1,3 @@
-import config from '../config';
-
 export interface NodeMetadata {
     peerId: string
 }
-
-export function getEndpoints(): string[] {
-    const providerSocket = config.PROVIDER_SOCKET;
-    if(providerSocket !== undefined) {
-        return [ providerSocket ];
-    } else {
-        return config.edgeNodes.map(node => node.socket);
-    }
-}