diff --git a/.github/workflows/build-test.yml b/.github/workflows/build-test.yml
new file mode 100644
index 00000000..0def5f81
--- /dev/null
+++ b/.github/workflows/build-test.yml
@@ -0,0 +1,72 @@
+name: Build, Lint, and Test
+
+on:
+ workflow_call:
+
+jobs:
+ prepare:
+ name: Prepare
+ runs-on: ubuntu-latest
+ steps:
+ # v4.1.1
+ - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+ - name: Use Node.js
+ # v4.0.0
+ uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
+ with:
+ node-version-file: '.nvmrc'
+ cache: 'yarn'
+ - name: Install Yarn dependencies
+ run: yarn
+
+ build:
+ name: Build
+ runs-on: ubuntu-latest
+ needs:
+ - prepare
+ steps:
+ - uses: actions/checkout@v4
+ - name: Use Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version-file: '.nvmrc'
+ cache: 'yarn'
+ - run: yarn --immutable
+ - run: yarn build
+ - name: Store build artifact
+ uses: actions/upload-artifact@v4
+ with:
+ name: build
+ path: ./build/
+ - name: Require clean working directory
+ shell: bash
+ run: |
+ if ! git diff --exit-code; then
+ echo "Working tree dirty at end of job"
+ exit 1
+ fi
+
+ test:
+ name: Test
+ runs-on: ubuntu-latest
+ needs:
+ - prepare
+ steps:
+ # v4.1.1
+ - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+ - name: Use Node.js
+ # v4.0.0
+ uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
+ with:
+ node-version-file: '.nvmrc'
+ cache: 'yarn'
+ - run: yarn --immutable
+ - run: yarn test
+ - name: Require clean working directory
+ shell: bash
+ run: |
+ if ! git diff --exit-code; then
+ echo "Working tree dirty at end of job"
+ exit 1
+ fi
+
diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml
new file mode 100644
index 00000000..09588c84
--- /dev/null
+++ b/.github/workflows/master.yml
@@ -0,0 +1,57 @@
+name: Main
+
+on:
+ pull_request:
+ push:
+ branches: [master]
+
+jobs:
+ check-workflows:
+ name: Check workflows
+ runs-on: ubuntu-latest
+ steps:
+ # v4.1.1
+ - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+ - name: Download actionlint
+ id: download-actionlint
+ run: bash <(curl https://raw.githubusercontent.com/rhysd/actionlint/7fdc9630cc360ea1a469eed64ac6d78caeda1234/scripts/download-actionlint.bash) 1.6.23
+ shell: bash
+ - name: Check workflow files
+ run: ${{ steps.download-actionlint.outputs.executable }} -color
+ shell: bash
+
+ build-test:
+ name: Build and test
+ uses: ./.github/workflows/build-test.yml
+
+ release-uat:
+ name: UAT Release
+ uses: ./.github/workflows/release.yml
+ needs: [ build-test ]
+ # Todo Remove After testing
+ # if: github.ref == 'refs/heads/master'
+ permissions:
+ contents: read
+ id-token: write
+ with:
+ #environment: uat
+ aws-region: us-east-1
+ aws-role-arn: arn:aws:iam::722264665990:role/OIDCGithubProviderRoleMetamaskHome
+ aws-bucket-name: stage.home.metamask.io
+ cloudfront-distribution-id: E1RY04JD0H4SYF
+
+ release-prd:
+ name: PRD Release
+ uses: ./.github/workflows/release.yml
+ needs: [ build-test, release-uat ]
+ if: github.ref == 'refs/heads/master'
+ permissions:
+ contents: read
+ id-token: write
+ with:
+ #TODO Update
+ #environment: prd
+ aws-region: us-east-1
+ aws-role-arn: arn:aws:iam::722264665990:role/OIDCGithubProviderRoleMetamaskHome
+ aws-bucket-name: stage.home.metamask.io
+ cloudfront-distribution-id: E1RY04JD0H4SYF
\ No newline at end of file
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 00000000..af7fcd89
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,46 @@
+on:
+ workflow_call:
+ inputs:
+ # environment:
+ # required: true
+ # description: Environment name
+ # type: string
+ aws-region:
+ required: true
+ description: AWS region
+ type: string
+ aws-role-arn:
+ required: true
+ description: AWS role ARN
+ type: string
+ aws-bucket-name:
+ required: true
+ description: AWS S3 bucket name
+ type: string
+ cloudfront-distribution-id:
+ required: true
+ description: AWS CloudFront distribution ID
+ type: string
+jobs:
+ deploy:
+ name: Deploy
+ runs-on: ubuntu-latest
+ # environment:
+ # name: ${{ inputs.environment }}
+ steps:
+ - name: configure AWS credentials
+ # v4.0.1
+ uses: aws-actions/configure-aws-credentials@v4
+ with:
+ role-to-assume: ${{ inputs.aws-role-arn }}
+ role-session-name: github-actions
+ aws-region: ${{ inputs.aws-region }}
+ - name: download build artifact
+ uses: actions/download-artifact@v4
+ with:
+ name: build
+ path: ./build/
+ - name: Deploy website
+ run: |
+ aws s3 cp ./build/ s3://${{ inputs.aws-bucket-name }}/ --recursive --acl private
+ aws cloudfront create-invalidation --distribution-id ${{ inputs.cloudfront-distribution-id }} --paths "/"
diff --git a/.nvmrc b/.nvmrc
index dae199ae..5edcff03 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v12
+v16
\ No newline at end of file
diff --git a/README.md b/README.md
index bc8c2681..9db5a197 100644
--- a/README.md
+++ b/README.md
@@ -71,12 +71,45 @@ The project follows the same release process as the other projects in the MetaMa
### Deployments
-- Make sure you have the netlify client configured with your credentials and you have access to the project.
+#### Repository Release Process Documentation
-#### Staging
+This section provides a detailed explanation of the release process for this repository, which is managed through a GitHub Action workflow.
-- `npm run deploy`
+##### Workflow Overview
-#### Production
+The GitHub Action workflow is named `master` and it is triggered on every pull request and push to the `master` branch. The workflow consists of four jobs:
+
+1. `check-workflows`
+2. `build-test`
+3. `release-uat`
+4. `release-prd`
+
+###### 1. Check Workflows
+
+This job performs the following steps:
+
+- Checks out the repository using the `actions/checkout` action.
+- Downloads `actionlint`, a tool for linting GitHub Actions workflow files.
+- Checks the workflow files using `actionlint`.
+
+###### 2. Build and Test
+
+This job uses the workflow defined in `./.github/workflows/build-test.yml`. It is responsible for building the project and running tests to ensure the code is working as expected.
+
+###### 3. UAT Release
+
+This job uses the workflow defined in `./.github/workflows/release.yml`. It is dependent on the `build-test` job and only runs if the `build-test` job is successful and the current branch is `master`. This job is responsible for releasing the project to the User Acceptance Testing (UAT) environment.
+
+###### 4. PRD Release
+
+This job is similar to the `release-uat` job but it releases the project to the Production (PRD) environment. It also depends on the `build-test` job and only runs if the `build-test` job is successful and the current branch is `master`.
+
+##### Release Process
+
+The release process is initiated when a pull request is merged into the `master` branch or when a direct push is made to the `master` branch. Here are the steps that are followed:
+
+1. The `check-workflows` job is run to ensure the workflow files are valid.
+2. If the workflow files are valid, the `build-test` job is run to build the project and run tests.
+3. If the `build-test` job is successful, the `release-uat` job is run to release the project to the UAT environment.
+4. If the `release-uat` job is successful, the `release-prd` job is run to release the project to the PRD environment, ideally `prd` GitHub environment has configured environment deployment policy (approvals).
-- `npm run deploy:prod`
diff --git a/package.json b/package.json
index b206b86b..fad0680a 100644
--- a/package.json
+++ b/package.json
@@ -1,47 +1,50 @@
{
- "name": "@metamask/dapps",
- "license": "ISC",
- "version": "1.1.0",
- "private": true,
- "resolutions": {
- "**/optimist/minimist": "^1.2.5",
- "**/loader-fs-cache/mkdirp": "^0.5.1"
- },
- "dependencies": {
- "@fortawesome/fontawesome-svg-core": "^1.2.19",
- "@fortawesome/free-solid-svg-icons": "^5.9.0",
- "@fortawesome/react-fontawesome": "^0.1.4",
- "react": "^16.8.6",
- "react-device-detect": "^1.17.0",
- "react-dom": "^16.8.6",
- "react-router-dom": "^5.0.1",
- "react-router-transition": "^1.3.0",
- "react-scripts": "5.0.1",
- "url-parse": "^1.5.9"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "deploy": "react-scripts build && netlify deploy --dir \"build\"",
- "deploy:prod": "react-scripts build && netlify deploy --dir \"build\" --prod",
- "test": "react-scripts test",
- "eject": "react-scripts eject",
- "update-changelog": "./scripts/auto-changelog.sh"
- },
- "homepage": "https://metamask.github.io/dapps/",
- "eslintConfig": {
- "extends": "react-app"
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
+ "name": "@metamask/dapps",
+ "license": "ISC",
+ "version": "1.1.0",
+ "private": true,
+ "resolutions": {
+ "**/optimist/minimist": "^1.2.5",
+ "**/loader-fs-cache/mkdirp": "^0.5.1"
+ },
+ "dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^1.2.19",
+ "@fortawesome/free-solid-svg-icons": "^5.9.0",
+ "@fortawesome/react-fontawesome": "^0.1.4",
+ "react": "^16.8.6",
+ "react-device-detect": "^1.17.0",
+ "react-dom": "^16.8.6",
+ "react-router-dom": "^5.0.1",
+ "react-router-transition": "^1.3.0",
+ "react-scripts": "5.0.1",
+ "url-parse": "^1.5.9"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "deploy": "react-scripts build && netlify deploy --dir \"build\"",
+ "deploy:prod": "react-scripts build && netlify deploy --dir \"build\" --prod",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject",
+ "update-changelog": "./scripts/auto-changelog.sh"
+ },
+ "homepage": "https://metamask.github.io/",
+ "eslintConfig": {
+ "extends": "react-app",
+ "rules": {
+ "import/no-anonymous-default-export": "off"
+ }
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
}
diff --git a/src/App.js b/src/App.js
index 3557bb8b..1d5ac677 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,60 +1,60 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Route } from "react-router-dom";
-import { AnimatedRoute } from 'react-router-transition';
-import Home from './pages/Home';
-import Category from './pages/Category';
-import ScrollToTop from './components/ScrollToTop/';
-import './App.css';
+import React, { useState, useEffect } from 'react'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+import { AnimatedRoute } from 'react-router-transition'
+import Home from './pages/Home'
+import Category from './pages/Category'
+import ScrollToTop from './components/ScrollToTop/'
+import './App.css'
function App() {
- const [isLoading, setIsLoading] = useState(true);
+ const [isLoading, setIsLoading] = useState(true)
- useEffect(() => {
- const run = async () => {
- try {
- await window.ethereum.send('metamask_injectHomepageScripts');
- } catch (e) {
- /**
- * To render the app in the desktop browser we need to set loading to false
- * as it throws by not finding the metamask_injectHomepageScripts event which is only
- * available in MM webview.
- * */
- setIsLoading(false);
- console.error(e);
- }
- }
+ useEffect(() => {
+ const run = async () => {
+ try {
+ await window.ethereum.send('metamask_injectHomepageScripts')
+ } catch (e) {
+ /**
+ * To render the app in the desktop browser we need to set loading to false
+ * as it throws by not finding the metamask_injectHomepageScripts event which is only
+ * available in MM webview.
+ * */
+ setIsLoading(false)
+ console.error(e)
+ }
+ }
- window.addEventListener('metamask_onHomepageScriptsInjected', () => {
- setIsLoading(false)
- })
+ window.addEventListener('metamask_onHomepageScriptsInjected', () => {
+ setIsLoading(false)
+ })
- run()
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ run()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
- if (isLoading) return null
+ if (isLoading) return null
- return (
-
-
-
-
-
-
({
- transform: `translateX(${styles.offset}%)`,
- })}
- />
-
-
+
+
+
({
+ transform: `translateX(${styles.offset}%)`,
+ })}
+ />
+
+