binary-com · Jul 29, 2021 · Jun 20, 2021 · Jul 13, 2021 · Jul 14, 2021 · Jul 14, 2021
@@ -2,36 +2,41 @@
   Deriv.com
 </h1>
 
+Deriv.com - An online trading platform that offers a wide selection of derivatives to trade on 24/7.
+
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/binary-com/deriv-com/Release%20Staging) ![node](https://img.shields.io/badge/node-%3E%3D12.3.0-blue.svg) ![npm](https://img.shields.io/badge/npm-%3E%3D6.9.0-blue.svg) [![GATSBY](https://img.shields.io/badge/Gatsby-663399?style=flat&logo=gatsby&logoColor=white)](https://github.com/styled-components/styled-components) [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components) ![Sonar Violations (short format)](https://img.shields.io/sonar/violations/DerivFE_deriv-com?label=sonar%20violation&server=https%3A%2F%2Fsonarcloud.io)
+![Sonar Tech Debt](https://img.shields.io/sonar/tech_debt/DerivFE_deriv-com?server=http%3A%2F%2Fsonarcloud.io)
+
 ## In this document:
 
-- [In this document:](#in-this-document)
-- [Other Documents](#other-documents)
-- [Pre-installation](#pre-installation)
-- [Quick start](#quick-start)
-- [How to contribute](#how-to-contribute)
-  - [Base master](#base-master)
-  - [Base crowdin](#base-crowdin)
-- [Manage translations](#manage-translations)
-- [Manage releases](#manage-releases)
-- [Test link deployment](#test-link-deployment)
-- [FAQ](#faq)
+-   [Other Documents](#other-documents)
+-   [Pre-installation](#pre-installation)
+-   [Quick start](#quick-start)
+-   [How to contribute](#how-to-contribute)
+    -   [Base master](#base-master)
+    -   [Base Crowdin](#base-crowdin)
+-   [Manage translations](#manage-translations)
+-   [Manage releases](#manage-releases)
+-   [Test link deployment](#test-link-deployment)
+-   [FAQ](#faq)
 
 ## Other Documents
 
 -   [General implementation](documents/implementation-guide.md) - Contain ways to do development in deriv.com
--   [Developer guide](documents/developer-guide.md) - Contain advice for developers working on this project
+-   [Development guidelines](documents/development-guidelines.md) - Contain advice for developers working on this project
 -   [Git best practice](documents/git-best-practices.md) - Contain git practices and commit guidelines
 -   [File structures](documents/file-structures.md)
 -   [GTM Workflow](documents/gtm-workflow.md) - Contains Google Tag Manager workflow and additional information
+-   [Translation Workflow](documents/translation-workflow.md) - Contains general workflow and commands required for our translation process
 
 ## Pre-installation
 
-Before running or contribute to this project, you need to have the following packages setup in your environment
+Before running or contribute to this project, you need to have the setup of the following packages in your environment
 
--   node
--   npm
+-   node >=12.3.0
+-   npm >=6.9.0
 -   git (for `contribution`)
--   gatsby-cli (npm install -g gatsby-cli)
+-   gatsby-cli (npm install -g gatsby-cli) (for using commands that aren't listed in scripts)
 
 Moreover, having these extensions will help you to speed up the development process and adhere to the best practices
 
@@ -41,19 +46,35 @@ Moreover, having these extensions will help you to speed up the development proc
 
 ## Quick start
 
-1.  **Install your dependencies:**
+1.  **Fork the project**
+
+    In order to work on your own version of the Deriv application, please fork the project to your own repo.
+
+2.  **Clone using SSH**
+
+    ```sh
+    git clone [email protected]:your-github-username/deriv-com.git
+    ```
+
+3.  **Enter project directory**
+
+    ```sh
+    cd deriv-com
+    ```
+
+4.  **Install your dependencies:**
 
     ```sh
     npm ci
     ```
 
-2.  **To start developing:**
+5.  **To start developing:**
 
     ```sh
     npm start
     ```
 
-3.  **Open the source code and start editing!**
+6.  **Open the source code and start editing!**
 
     Your site is now running at `http://localhost:8000`!
 
@@ -63,19 +84,19 @@ Moreover, having these extensions will help you to speed up the development proc
 
 We have two types of PR (Pull request):
 
-### Base master
+### Base **Master**
 
-PR will be based on master branch if the commits are not having text changes
+PR will be based on the master branch if the commits are not having text changes
 
-1. Create branch from latest master branch
+1. Create branch from the latest master branch
 
     ```sh
     git checkout master
     git pull upstream master
     git checkout -b [_your_branch_name]
     ```
 
-2. MAKE YOUR CHANGES
+2. Make your changes
 
 3. Make pull request
 
@@ -85,17 +106,17 @@ PR will be based on master branch if the commits are not having text changes
     git push -u origin [_your_branch_name]
     ```
 
--   Click on the autogenerated link from terminal to open the PR
+-   Click on the autogenerated link from the terminal to open the PR
 
 -   Make sure to change the PR base to `master` branch
 
-### Base crowdin
+### Base Crowdin
 
 PR will be based on crowdin branch if the commits are having text changes
 
 1. Create branch from latest crowdin branch
 
--   if you dont have crowdin branch
+-   if you don't have crowdin branch
 
     ```sh
     git fetch upstream crowdin:crowdin
@@ -111,11 +132,11 @@ PR will be based on crowdin branch if the commits are having text changes
     git checkout -b [_your_branch_name]
     ```
 
-2. MAKE YOUR CHANGES
+2. Make your changes
 
 3. Extract translation
 
--   Make sure you have the latest crowdin changes, resolve conflicts if any
+-   Make sure you have the latest Crowdin changes, resolve conflicts if any
 
     ```sh
     git pull upstream crowdin
@@ -152,47 +173,47 @@ PR will be based on crowdin branch if the commits are having text changes
         brew install crowdin
         ```
 
-    -   Set up your crowdin API KEY in your .bash_profile or .zshrc
+    -   Set up your Crowdin API KEY in your .bash_profile or .zshrc
 
--   To upload source text to crowdin (When task merge to crowdin branch)
+-   To upload source text to Crowdin (When task merge to crowdin branch)
 
     ```sh
     npm run translate:upload
     ```
 
--   To download/get latest crowdin translations
+-   To download/get the latest Crowdin translations
 
     ```sh
     npm run translate:download
     ```
 
-Note\*: Don't forget to create a pull request to update crowdin branch
+**Note**: Don't forget to create a pull request to update crowdin branch
 
 ## Manage releases
 
 There are 2 types of releases:
 
 1. Release to staging:
 
-Merging to master (squash and merge) will automatically release last commit to staging server https://staging.deriv.com
+Merging to master (squash and merge) will automatically release the last commit to the staging server https://staging.deriv.com
 
-⚠️ If you want to release crowdin change, please make a PR from crowdin to master branch
+⚠️ If you want to release Crowdin changes, please make a PR from crowdin to master branch
 
 2. Release to production:
 
-Releasing to production require a tag using the following format:
+Releasing to production requires a tag using the following format:
 
 `production_VYYYYMMDD_${Integer}` --- Integer is the release version
 
 Example of release steps
 
--   Create the tag following todays date
+-   Create the tag following today's date
 
     ```sh
     git tag production_V20200806_0 -m 'release to production'
     ```
 
--   Push tag to main repository
+-   Push the tag to the main repository
 
     ```sh
     git push upstream production_V20200806_0
@@ -204,11 +225,11 @@ There are two types of test link deployment preview:
 
 1. Automatic deployment
 
-Upon creating PR, `vercel` (https://vercel.com/) will auto-generate test link inside the PR. you can use that to preview test link for the changes you have made.
+Upon creating PR, [Vercel](https://vercel.com/) will auto-generate a test link inside the PR. you can use that to preview the test link for the changes you have made.
 
 2. Manual deployment
 
-If preferrable to use manual deployment, you can use gh-pages functionality to create test link. here are ways to do it:
+If preferable to use manual deployment, you can use [gh-pages](https://pages.github.com/) functionality to create a test link. here are ways to do it:
 
 -   **Basic name.github.io/deriv-com/**
 
@@ -226,13 +247,13 @@ If preferrable to use manual deployment, you can use gh-pages functionality to c
 
     This will be deployed to name.github.io/deriv-com/br/fix_all_the_bugs
 
-⚠️ You have to enable pathPrefix in gatsby-config for manual deployment, otherwise the resources will not be uploaded to the site
+⚠️ You have to enable pathPrefix in gatsby-config for manual deployment, otherwise, the resources will not be uploaded to the site
 
 ## FAQ
 
--   [how to create new page?](documents/implementation-guide.md#create-new-page)
--   [how to insert image?](documents/implementation-guide.md#image-component)
+-   [how to create a new page?](documents/implementation-guide.md#create-new-page)
+-   [how to insert an image?](documents/implementation-guide.md#image-component)
 -   [how to style my element?](documents/implementation-guide.md#styled-component)
 -   [Where to put my new component?](documents/file-structures.md)
 
-⚠️ If you have more to questions to add, please open a PR to add question in FAQ section. Answer will be on the PR reviews
+⚠️ If you have more questions to add, please open a PR to add your question in FAQ section. The Answer will be on the PR reviews
@@ -3,10 +3,10 @@
 ## Do:
 
 -   Keep all files immediately relevant to a component inside the given component directory.
--   make it dead simple to import the component from elsewhere.
--   Feel free to create subdirectories for relevant utils or helpers
+-   Make it dead simple to import the component from elsewhere.
+-   Feel free to create sub-directories for relevant utils or helpers
     if it helps to keep things tidy
--   Keep components small, focused and easy to test, breaking up complex components into smaller components
+-   Keep components small, focused, and easy to test, breaking up complex components into smaller components
 -   Try to create new, reusable components instead of "sub-components"
     (i.e. prefer not to create sub-directories that contain more components)
 -   **Be consistent** — however, you choose to lay things out

@@ -1,8 +1,18 @@
+# Git best practices
+
+**In this document:**
+
+-   [Commit message guidelines](#commit-message-guidlines)
+    -   [Type](#type)
+-   [Changing base branch](#changing-base-branch)
+-   [Get latest Changes](#get-latest-changes)
+-   [Resolve translation conflict on message.json](#resolve-translation-conflict-on-message.json)
+
 ## Commit message guidelines
 
-We have a precise rules over how our git commit messages can be formatted. This leads to more **readable messages** that are easy to follow when looking through the **project history**.
+We have a set of precise rules over how our git commit messages can be formatted. This leads to more **readable messages** that are easy to follow when looking through the **project history**.
 
-Each commit message will consists of **type** and **subject**:
+Each commit message will consist of **type** and **subject**:
 
 ```sh
 <type>|<...other_types>: <subject>
@@ -27,7 +37,7 @@ Must be one of the following:
 
 ## Changing base branch
 
-There are cases when you want to change the base branch because the PR that didn't used to have text changes is now having text changes, so, you need to convert base branch from `master` to `crowdin`. The command to do that is as follows:
+There are cases when you want to change the base branch because the PR that didn't have text changes is now having text changes, so, you need to convert the base branch from `master` to `crowdin`. The command to do that is as follows:
 
 ```sh
 git rebase --onto crowdin master your_branch_name
@@ -41,7 +51,7 @@ git rebase --onto master crowdin your_branch_name
 
 ## Get latest Changes
 
-There are two ways to get latest changes:
+There are two ways to get the latest changes:
 
 ```sh
 git pull upstream master|crowdin --rebase
@@ -57,20 +67,20 @@ both of these will do the job. However, rebase won't add another commit to your
 
 ## Resolve translation conflict on message.json
 
-There are cases when other developers also work on translation (crowdin) branch, and get merged first. This way, your branch will get conflict of the extracted message.json. to fix this:
+There are cases when other developers also work on translation (crowdin) branch, and get merged first. This way, your branch will get conflict of the extracted message.json. To fix this:
 
--   get the latest crowdin changes
+-   Get the latest Crowdin changes
 
     ```sh
     git pull upstream crowdin
     ```
 
--   accept incoming change from crowdin
+-   Accept incoming change from Crowdin
 
     ```sh
     git checkout --theirs crowdin/messages.json
     ```
 
--   resolve other conflicts if any, or just commit your changes
+-   Resolve other conflicts if any, or just commit your changes
 
--   push to your origin branch to update the PR
+-   Push to your origin branch to update the PR
@@ -1,30 +1,37 @@
-## Google Tag Manager Workflow
+# Google Tag Manager Workflow
 
-### Introduction:
+**In this document:**
 
-Google Tag Manager is a tool with a user-friendly, web-based interface that simplifies the process of working with tags. With GTM, you’re able to add, edit, and disable tags without having to touch the source code. If there's another tag which doesn't have a template in GTM, you can add your own custom code. Using Deriv’s tag manager account, you can redirect to `Default Workspace`, under `Tags` tab you will see all our customised tags that have been created.
-Main point of this document is to familiarise user with how certain tags such as `Trade Deriv - Event Button Click` works and how we can add custom variables and make use of them in our tag.
+-   [Introduction](#introduction)
+-   [Required Information](#required-information)
+-   [Custom Tag](#custom-tag)
+-   [Create Custom Variable](#create-custom-variable)
 
-### Required Information
+## Introduction:
 
-**Tag**: A tag is code that send data to a system such as Google Analytics.
+Google Tag Manager is a tool with a user-friendly, web-based interface that simplifies the process of working with tags. With GTM, you’re able to add, edit, and disable tags without having to touch the source code. If there's another tag that doesn't have a template in GTM, you can add your own custom code. Using Deriv’s tag manager account, you can redirect to `Default Workspace`, under `Tags` tab you will see all our customised tags that have been created.
+The main point of this document is to familiarise users with how certain tags such as `Trade Deriv - Event Button Click` works and how we can add custom variables and make use of them in our tag.
+
+## Required Information
+
+**Tag**: A tag is a code that sends data to a system such as Google Analytics.
 `Custom Tag`: Trade Deriv - Event Button Click
 
 **Trigger**: A trigger listens for certain events, such as clicks, form submissions, or page loads. When an event is detected that matches the trigger definition, any tags that reference that trigger will fire.
 `Custom Trigger`: Trade Deriv - Button Click
 
-**Variable**: A variable is a named placeholder for a value that will change, such as a product name, a price value, or a date and in our case we have below variables.
+**Variable**: A variable is a named placeholder for a value that will change, such as a product name, a price value, or a date and in our case, we have the below variables.
 `User-Defined Variables`:
 
 -   event category da
 -   event action da
 -   event label da
 
-**Data layer**: Tag manager implements a data layer to temporarily hold values in the client so that they can be used by tags, triggers, and variables.
+**Data layer**: The tag manager implements a data layer to temporarily hold values in the client so that they can be used by tags, triggers, and variables.
 
-### Custom Tag: Trade Deriv - Event Button Click
+## Custom Tag: Trade Deriv - Event Button Click
 
-This tag is of type `Google Analytics: Universal Analytics` to track `Events` providing 4 parameters such as `Category`, `Action`, `Label` and `Value` of that event. To make use of this tag, we simply need to add a custom javascript data attribute namely `data-custom-events` on our clickable element which equals to a comma-separated value as below.
+This tag is of type `Google Analytics: Universal Analytics` to track `Events` providing 4 parameters such as `Category`, `Action`, `Label`, and `Value` of that event. To make use of this tag, we simply need to add a custom Javascript data attribute namely `data-custom-events` on our clickable element which equals to a comma-separated value as below.
 
 ```js
 <button data-custom-events="virtual_signup,click_button,gtm-button-trading">Click Here</button>
@@ -43,7 +50,7 @@ This tag is of type `Google Analytics: Universal Analytics` to track `Events` pr
 
 Upon starting `Tag Manager Preview Mode`, in the website, you can click on the button with the specific data attribute, it will trigger the action event which contain the value of `click_button`, it will provide all the `Tag Details Properties` and our defined `Variables` along with their respective values.
 
-### Create Custom Variable
+## Create Custom Variable
 
 To create a custom variable, you need to go to `Variables` tab in GTM and follow the steps below: