MetaMask / MetaMask/metamask-extension

Create the background folder structure in the UI folder

Open
#17,600 0 comments 0 reactions 0 assignees View on GitHub
MV3 team-extension-platform
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### Background Info
We want to clearly indicate the files responsible for selecting, fetching and modifying data in the background. If we create a background folder, separate from the store, ducks and selectors folder, we can store our methods for calling into the background as well as our data selectors, the action-queue file as well as other background communication specific files.

This folder should have a sub folder per controller, cased in UpperCamelCase like the Controller’s base name. This way searching for the controller name will yield results for that folder. Inside each Controller folder we will have a api.ts and selectors.ts file.

At the root of the background folder we will have the action-queue file, we can move that file as part of this work (it’ll require updating minimal imports).

Where importing a background method in the Extension currently looks like this:

```ts
Import { getNetworkIdentifier } from ‘../../selectors/selectors’;
Import { setPreference } from ‘../../store/actions’;
```

Would become something like:

```ts
Import { getNetworkIdentifier } from ‘../../background/NetworkController/selectors’;
Import { setPreference } from ‘../../background/PreferencesController/api’;
```

This will allow us to do a search for ‘/PreferencesController/api’ in the UI and see everywhere that PreferencesController state might be modified by the UI and ‘/NetworkController/selectors’ to see everywhere we are relying upon the NetworkController state to render the UI.

Contributor guide

Open the contributing guide

Research direction

Start by inspecting the UI folder, the existing selectors/selectors and store/actions imports, and the action-queue file. Map each controller to a background//api.ts and selectors.ts location using UpperCamelCase names. Done means the requested folder structure exists, the action-queue file is moved, and the affected imports use the new paths.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.