refactor: utilize environment variables (#7)

.env

@@ -1,2 +1,9 @@
+REACT_APP_BLOCK_TIME=4
+REACT_APP_DELEGATES=51
+REACT_APP_MESSAGE_LENGTH_LIMIT=512
+REACT_APP_MESSAGE_TRANSACTION_TYPE=101
+REACT_APP_MESSAGE_TRANSACTION_TYPE_GROUP=1001
+REACT_APP_TICKER=Պ
+REACT_APP_ENCRYPTION_ALGORITHM=aes-256-ctr
 REACT_APP_VERSION=$npm_package_version
 GENERATE_SOURCEMAP=false

.gitignore

@@ -1,16 +1,11 @@
 build/
 node_modules/
-scripts/
-wip/
 
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.development
+.env.production
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
 package-lock.json*

README.md

@@ -19,14 +19,21 @@ Install all dependencies:
 npm install
 ```
 
+Create a `.env.development` file and add your custom node and account pre-loader configuration:
+
+```
+REACT_APP_USERNAME=preloader
+REACT_APP_ADDRESS=AYeceuGa7tTsyG6jgq7X6qKdoXt9iJJKN6
+REACT_APP_PASSPHRASE=word word word word word word word word word word word word
+REACT_APP_NODE=http://127.0.0.1:11003
+```
+
 Run the application:
 
 ```
 npm start
 ```
 
-By running the application in a development environment, it expects the blockchain to run locally on port `4003`. You can change this behavior by editing the `nodes` value in `./src/config.ts`
-
 ## Tests
 
 Run Jest tests with:

src/components/Chat/MessageInput/index.tsx

@@ -2,14 +2,14 @@ import React, { useState } from 'react';
 import Modal from '../../Generic/Modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import constants from '../../../constants';
-
 type IProps = {
   message: string;
   handleSubmit: () => void;
   setMessage: React.Dispatch<React.SetStateAction<string>>;
 };
 
+const messageLengthLimit = Number(process.env.REACT_APP_MESSAGE_LENGTH_LIMIT);
+
 export default function MessageInput({ message, handleSubmit, setMessage }: IProps) {
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
@@ -57,16 +57,16 @@ export default function MessageInput({ message, handleSubmit, setMessage }: IPro
             className="btn btn-outline-secondary btn-chat"
             type="submit"
             id="send-button"
-            disabled={message.length > constants.messageLengthLimit}
+            disabled={message.length > messageLengthLimit}
           >
             Send
           </button>
         </div>
       </div>
 
-      {message.length > constants.messageLengthLimit && (
+      {message.length > messageLengthLimit && (
         <span className="text-danger text-center d-block">
-          <small>Message is too long (max {constants.messageLengthLimit} characters)</small>
+          <small>Message is too long (max {messageLengthLimit} characters)</small>
         </span>
       )}
     </form>

src/components/Sidebar/UserInfo/index.tsx

@@ -4,7 +4,6 @@ import HomeButton from './HomeButton';
 import LogOutButton from './LogOutButton';
 import BigNumber from 'bignumber.js';
 
-import constants from '../../../constants';
 import { LoginContext } from '../../../contexts';
 import { getUserInfo } from '../../../utils';
 import { IUserInfo } from '../../../interfaces';
@@ -80,7 +79,7 @@ export default function UserInfo() {
                     {isLoading ? (
                       <PulseLoader sizeUnit={'em'} size={0.25} color={'#6c5b7b'} />
                     ) : (
-                      userInfo.balance.dividedBy(100000000) + ' ' + constants.ticker
+                      userInfo.balance.dividedBy(100000000) + ' ' + process.env.REACT_APP_TICKER
                     )}
                   </div>
                 </div>

src/utils/accounts.ts

@@ -1,5 +1,3 @@
-import config from '../config';
-import constants from '../constants';
 import {
   broadcastTransaction,
   checkAccountExists,
@@ -39,14 +37,14 @@ const fundAccount = async (
 ): Promise<IPostTransactionResponse> => {
   const nonce = nonceOverride
     ? String(nonceOverride)
-    : await fetchRemoteNonce(config.preloader.address);
+    : await fetchRemoteNonce(process.env.REACT_APP_ADDRESS!);
 
   const tx = Transactions.BuilderFactory.transfer()
     .amount('5000000000')
     .recipientId(address)
     .vendorField('Test account pre-load')
     .nonce(nonce)
-    .sign(config.preloader.passphrase);
+    .sign(process.env.REACT_APP_PASSPHRASE!);
 
   return broadcastTransaction(tx.getStruct());
 };
@@ -68,11 +66,12 @@ const registerDelegate = async (
 
 export const newAccount = async (username: string): Promise<IUser> => {
   const { passphrase, address, publicKey } = generateRandomAccount();
+  const blockTime = Number(process.env.REACT_APP_BLOCK_TIME!);
 
   await fundAccount(address);
 
   // Wait for at least one block (+1 sec) to have balance saved
-  await delay(constants.blocktime * 1000 + 1000);
+  await delay(blockTime * 1000 + 1000);
 
   return registerDelegate(username, passphrase).then(() => {
     return {

src/utils/api.ts

@@ -1,11 +1,14 @@
-import config from '../config';
-import constants from '../constants';
 import axios from 'axios';
 import BigNumber from 'bignumber.js';
 
 import { IMessageTransaction, ITransactionData, IPostTransactionResponse } from '../interfaces';
 
-const path = (endpoint: string): string => config.nodes[0] + '/api' + endpoint;
+const path = (endpoint: string): string => process.env.REACT_APP_NODE + '/api' + endpoint;
+
+const messageTypes = {
+  type: process.env.REACT_APP_MESSAGE_TRANSACTION_TYPE,
+  typeGroup: process.env.REACT_APP_MESSAGE_TRANSACTION_TYPE_GROUP
+};
 
 export const checkAccountExists = async (id: string): Promise<boolean> => {
   try {
@@ -19,8 +22,7 @@ export const checkAccountExists = async (id: string): Promise<boolean> => {
 
 export const getTransactions = async (channel: string): Promise<IMessageTransaction[]> => {
   const res = await axios.post(path('/transactions/search'), {
-    type: constants.messageTransaction.type,
-    typeGroup: constants.messageTransaction.typeGroup,
+    ...messageTypes,
     recipientId: channel
   });
 
@@ -29,8 +31,7 @@ export const getTransactions = async (channel: string): Promise<IMessageTransact
 
 export const getLastMessage = async (channel: string): Promise<IMessageTransaction> => {
   const res = await axios.post(path('/transactions/search'), {
-    type: constants.messageTransaction.type,
-    typeGroup: constants.messageTransaction.typeGroup,
+    ...messageTypes,
     recipientId: channel
   });
 
@@ -48,18 +49,14 @@ export const fetchUsername = async (address: string): Promise<string | null> =>
 };
 
 export const fetchTotalMessages = async (): Promise<number> => {
-  const res = await axios.post(path('/transactions/search'), {
-    type: constants.messageTransaction.type,
-    typeGroup: constants.messageTransaction.typeGroup
-  });
+  const res = await axios.post(path('/transactions/search'), messageTypes);
 
   return res.data.meta.totalCount;
 };
 
 export const fetchTotalUserMessages = async (address: string): Promise<number> => {
   const res = await axios.post(path('/transactions/search'), {
-    type: constants.messageTransaction.type,
-    typeGroup: constants.messageTransaction.typeGroup,
+    ...messageTypes,
     senderId: address
   });
 
@@ -68,8 +65,8 @@ export const fetchTotalUserMessages = async (address: string): Promise<number> =
 
 export const fetchTotalUsers = async (): Promise<number> => {
   const res = await axios.get(path('/delegates'));
-
-  return res.data.meta.totalCount - constants.numOfDelegates;
+  const numOfDelegates = Number(process.env.REACT_APP_DELEGATES);
+  return res.data.meta.totalCount - numOfDelegates;
 };
 
 export const fetchRemoteNonce = async (address: string): Promise<string> => {

src/utils/crypto.ts

@@ -1,16 +1,16 @@
-import config from '../config';
-
 const crypto = require('crypto-browserify');
 
 export const encryptMessage = (message: string, passphrase: string): string => {
-  const cipher = crypto.createCipher(config.algorithm, passphrase);
+  const algorithm = process.env.REACT_APP_ENCRYPTION_ALGORITHM;
+  const cipher = crypto.createCipher(algorithm, passphrase);
   let crypted = cipher.update(message, 'utf8', 'hex');
   crypted += cipher.final('hex');
   return crypted;
 };
 
 export const decryptMessage = (message: string, passphrase: string): string => {
-  const decipher = crypto.createDecipher(config.algorithm, passphrase);
+  const algorithm = process.env.REACT_APP_ENCRYPTION_ALGORITHM;
+  const decipher = crypto.createDecipher(algorithm, passphrase);
   let dec = decipher.update(message, 'hex', 'utf8');
   dec += decipher.final('utf8');
   return dec;