clean & refactor udapp env list

7 months ago · ffdf082529
parent c26a74fb4d
commit ffdf082529
4 changed files with 87 additions and 96 deletions
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@ -128,8 +128,9 @@ export class RunTab extends ViewPlugin {
  async onInitDone() {
    const udapp = this // eslint-disable-line

-    const addProvider = async (name, displayName, isInjected, isVM, fork = '', dataId = '', title = '') => {
+    const addProvider = async (position, name, displayName, isInjected, isVM, fork = '', dataId = '', title = '') => {
      await this.call('blockchain', 'addProvider', {
+        position,
        options: {},
        dataId,
        name,
@ -153,52 +154,47 @@ export class RunTab extends ViewPlugin {
      })
    }

-    const addCustomInjectedProvider = async (event, name, networkId, urls, nativeCurrency) => {
-      name = `${name} through ${event.detail.info.name}`
+    const addCustomInjectedProvider = async (position, event, name, networkId, urls, nativeCurrency) => {
+      // name = `${name} through ${event.detail.info.name}`
      await this.engine.register([new InjectedCustomProvider(event.detail.provider, name, networkId, urls, nativeCurrency)])
-      await addProvider(name, name, true, false, false)
+      await addProvider(position, name, name, true, false, false)
    }
    const registerInjectedProvider = async (event) => {
      console.log('registerInjectedProvider', event)
      await this.engine.register([new InjectedProviderDefault(event.detail.provider, event.detail.info.name)])
-      await addProvider(event.detail.info.name, event.detail.info.name, true, false, false)
-
-      await addCustomInjectedProvider(event, 'Optimism', '0xa', ['https://mainnet.optimism.io'])
-      await addCustomInjectedProvider(event, 'Arbitrum One', '0xa4b1', ['https://arb1.arbitrum.io/rpc'])
-      await addCustomInjectedProvider(event, 'SKALE Chaos Testnet', '0x50877ed6', ['https://staging-v3.skalenodes.com/v1/staging-fast-active-bellatrix'], {
-        "name": "sFUEL",
-        "symbol": "sFUEL",
-        "decimals": 18
-      })
-      await addCustomInjectedProvider(event, 'Ephemery Testnet', '', ['https://arb1.arbitrum.io/rpc'])
+      await addProvider(0, event.detail.info.name, 'Injected Provider - ' + event.detail.info.name, true, false, false)
+
+      if (event.detail.info.name === 'MetaMask') {
+        await addCustomInjectedProvider(5, event, 'L2 - Optimism', '0xa', ['https://mainnet.optimism.io'])
+        await addCustomInjectedProvider(6, event, 'L2 - Arbitrum One', '0xa4b1', ['https://arb1.arbitrum.io/rpc'])
+        await addCustomInjectedProvider(32, event, 'SKALE Chaos Testnet', '0x50877ed6', ['https://staging-v3.skalenodes.com/v1/staging-fast-active-bellatrix'], {
+          "name": "sFUEL",
+          "symbol": "sFUEL",
+          "decimals": 18
+        })
+        await addCustomInjectedProvider(33, event, 'Ephemery Testnet', '', ['https://arb1.arbitrum.io/rpc'])
+      }      
    }

    // VM
    const titleVM = 'Execution environment is local to Remix.  Data is only saved to browser memory and will vanish upon reload.'
-    await addProvider('vm-cancun', 'Remix VM (Cancun)', false, true, 'cancun', 'settingsVMCancunMode', titleVM)
-    await addProvider('vm-shanghai', 'Remix VM (Shanghai)', false, true, 'shanghai', 'settingsVMShanghaiMode', titleVM)
-    await addProvider('vm-paris', 'Remix VM (Paris)', false, true, 'paris', 'settingsVMParisMode', titleVM)
-    await addProvider('vm-london', 'Remix VM (London)', false, true, 'london', 'settingsVMLondonMode', titleVM)
-    await addProvider('vm-berlin', 'Remix VM (Berlin)', false, true, 'berlin', 'settingsVMBerlinMode', titleVM)
-    await addProvider('vm-mainnet-fork', 'Remix VM - Mainnet fork', false, true, 'cancun', 'settingsVMMainnetMode', titleVM)
-    await addProvider('vm-sepolia-fork', 'Remix VM - Sepolia fork', false, true, 'cancun', 'settingsVMSepoliaMode', titleVM)
-    await addProvider('vm-goerli-fork', 'Remix VM - Goerli fork', false, true, 'paris', 'settingsVMGoerliMode', titleVM)
-    await addProvider('vm-custom-fork', 'Remix VM - Custom fork', false, true, '', 'settingsVMCustomMode', titleVM)
+    await addProvider(1, 'vm-cancun', 'Remix VM (Cancun)', false, true, 'cancun', 'settingsVMCancunMode', titleVM)
+    await addProvider(50, 'vm-shanghai', 'Remix VM (Shanghai)', false, true, 'shanghai', 'settingsVMShanghaiMode', titleVM)
+    await addProvider(51, 'vm-paris', 'Remix VM (Paris)', false, true, 'paris', 'settingsVMParisMode', titleVM)
+    await addProvider(52, 'vm-london', 'Remix VM (London)', false, true, 'london', 'settingsVMLondonMode', titleVM)
+    await addProvider(53, 'vm-berlin', 'Remix VM (Berlin)', false, true, 'berlin', 'settingsVMBerlinMode', titleVM)
+    await addProvider(2, 'vm-mainnet-fork', 'Remix VM - Mainnet fork', false, true, 'cancun', 'settingsVMMainnetMode', titleVM)
+    await addProvider(3, 'vm-sepolia-fork', 'Remix VM - Sepolia fork', false, true, 'cancun', 'settingsVMSepoliaMode', titleVM)
+    await addProvider(4, 'vm-custom-fork', 'Remix VM - Custom fork', false, true, '', 'settingsVMCustomMode', titleVM)

    // wallet connect
-    await addProvider('walletconnect', 'WalletConnect', false, false)
-
-    // testnet
-    /*
-    await addProvider('injected-ephemery-testnet-provider', 'Ephemery Testnet', true, false)
-    await addProvider('injected-skale-chaos-testnet-provider', 'SKALE Chaos Testnet', true, false)
-    */
+    await addProvider(0, 'walletconnect', 'WalletConnect', false, false)

    // external provider
-    await addProvider('basic-http-provider', 'Custom - External Http Provider', false, false)
-    await addProvider('hardhat-provider', 'Dev - Hardhat Provider', false, false)
-    await addProvider('ganache-provider', 'Dev - Ganache Provider', false, false)
-    await addProvider('foundry-provider', 'Dev - Foundry Provider', false, false)
+    await addProvider(7, 'basic-http-provider', 'Custom - External Http Provider', false, false)
+    await addProvider(20, 'hardhat-provider', 'Dev - Hardhat Provider', false, false)
+    await addProvider(21, 'ganache-provider', 'Dev - Ganache Provider', false, false)
+    await addProvider(22, 'foundry-provider', 'Dev - Foundry Provider', false, false)

    // register injected providers
    
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@ -1,24 +1,25 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
 import {FormattedMessage} from 'react-intl'
-import {EnvironmentProps} from '../types'
+import {EnvironmentProps, Provider} from '../types'
 import {Dropdown} from 'react-bootstrap'
 import {CustomMenu, CustomToggle, CustomTooltip} from '@remix-ui/helper'

 export function EnvironmentUI(props: EnvironmentProps) {
  const handleChangeExEnv = (env: string) => {
-    const provider = props.providers.providerList.find((exEnv) => exEnv.value === env)
-    const context = provider.value
+    const provider = props.providers.providerList.find((exEnv) => exEnv.name === env)
+    const context = provider.name
    props.setExecutionContext({context})
  }

-  const currentProvider = props.providers.providerList.find((exEnv) => exEnv.value === props.selectedEnv)
+  const currentProvider = props.providers.providerList.find((exEnv) => exEnv.name === props.selectedEnv)
  const bridges = {
-    'injected-optimism-provider': 'https://app.optimism.io/bridge/deposit',
-    'injected-arbitrum-one-provider': 'https://bridge.arbitrum.io/'
+    'L2 - Optimism': 'https://app.optimism.io/bridge/deposit',
+    'L2 - Arbitrum One': 'https://bridge.arbitrum.io/'
  }

-  const isL2 = (provider) => provider && (provider.value === 'Optimism Provider' || provider.value === 'Arbitrum One Provider')
+  const isL2 = (providerDisplayName: string) => providerDisplayName === 'Optimism Provider' || providerDisplayName === 'Arbitrum One Provider'
+  console.log('current PROVIDER', currentProvider, props.selectedEnv)
  return (
    <div className="udapp_crow">
      <label id="selectExEnv" className="udapp_settingsLabel">
@ -33,33 +34,33 @@ export function EnvironmentUI(props: EnvironmentProps) {
      <div className="udapp_environment">
        <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
          <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
-            {isL2(currentProvider) && 'L2 - '}
-            {currentProvider && currentProvider.content}
-            {currentProvider && bridges[currentProvider.value] && (
+            {isL2(currentProvider && currentProvider.displayName) && 'L2 - '}
+            {currentProvider && currentProvider.displayName}
+            {currentProvider && bridges[currentProvider.name] && (
              <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
                <i
                  style={{fontSize: 'medium'}}
                  className={'ml-2 fa fa-rocket-launch'}
                  aria-hidden="true"
                  onClick={() => {
-                    window.open(bridges[currentProvider.value], '_blank')
+                    window.open(bridges[currentProvider.name], '_blank')
                  }}
                ></i>
              </CustomTooltip>
            )}
          </Dropdown.Toggle>
          <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
-            {props.providers.providerList.map(({content, value}, index) => (
+            {props.providers.providerList.map(({displayName, name}, index) => (
              <Dropdown.Item
                key={index}
                onClick={() => {
-                  handleChangeExEnv(value)
+                  handleChangeExEnv(name)
                }}
-                data-id={`dropdown-item-${value}`}
+                data-id={`dropdown-item-${name}`}
              >
                <span className="">
-                  {isL2({value}) && 'L2 - '}
-                  {content}
+                  {isL2(displayName) && 'L2 - '}
+                  {displayName}
                </span>
              </Dropdown.Item>
            ))}
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@ -78,14 +78,6 @@ export const runTabInitialState: RunTabState = {
  }
 }

-type AddProvider = {
-  name: string,
-  displayName: string,
-  provider: any,
-  title?: string,
-  dataId?: string
-}
-
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
  switch (action.type) {
  case FETCH_ACCOUNTS_LIST_REQUEST: {
@ -223,13 +215,11 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
  }

  case FETCH_PROVIDER_LIST_SUCCESS: {
-    const payload: { id?: string, dataId?: string, title?: string, value: string, fork?: string, content: string }[] = action.payload
-
    return {
      ...state,
      providers: {
        ...state.providers,
-        providerList: payload,
+        providerList: action.payload,
        isSuccessful: true,
        isRequesting: false,
        error: null
@ -252,15 +242,23 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
  }

  case ADD_PROVIDER: {
-    const payload: AddProvider = action.payload
-    const id = action.payload.name
-    state.providers.providerList.push({
-      content: payload.displayName,
-      dataId: payload.dataId,
-      id,
-      title: payload.title,
-      value: id
-    })
+    const payload = action.payload
+    const length = state.providers.providerList.length
+    if (state.providers.providerList.length === 0) {
+      state.providers.providerList.push(payload)
+    } else {
+      let index = 0
+      for (const provider of state.providers.providerList) { 
+        if (provider.position >= payload.position) {
+          state.providers.providerList.splice(index, 0, payload)
+          break;
+        }
+        index++
+      }
+      if (length === state.providers.providerList.length) {
+        state.providers.providerList.push(payload)
+      }
+    }
    return {
      ...state,
      providers: {
@ -271,8 +269,8 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
  }

  case REMOVE_PROVIDER: {
-    const id: string = action.payload
-    const providers = state.providers.providerList.filter((el) => el.id !== id)
+    const name: string = action.payload
+    const providers = state.providers.providerList.filter((el) => el.name !== name)
    return {
      ...state,
      providers: {
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@ -19,6 +19,23 @@ export interface Contract {
 export interface ContractList {
  [file: string]: Contract[]
 }
+
+export type Provider = {
+  name: string
+  displayName: string
+  provider: {
+    sendAsync: () => void
+  },
+  init: () => void
+  title: string
+  dataId: string
+  options: { [key: string]: string}
+  fork: boolean
+  isVM: boolean
+  isInjected: boolean
+  position: number
+}
+
 export interface RunTabState {
  accounts: {
    loadedAccounts: Record<string, string>,
@ -35,14 +52,7 @@ export interface RunTabState {
  networkName: string,
  chainId: string
  providers: {
-    providerList: {
-      id?: string,
-      dataId?: string,
-      title?: string,
-      value: string,
-      fork?: string
-      content: string
-    }[],
+    providerList: Provider[],
    isRequesting: boolean,
    isSuccessful: boolean,
    error: string
@ -138,14 +148,7 @@ export interface SettingsProps {
  personalMode: boolean,
  networkName: string,
  providers: {
-    providerList: {
-      id?: string,
-      dataId?: string,
-      title?: string,
-      value: string,
-      fork?: string
-      content: string
-    }[],
+    providerList: Provider[],
    isRequesting: boolean,
    isSuccessful: boolean,
    error: string
@ -164,14 +167,7 @@ export interface SettingsProps {
 export interface EnvironmentProps {
  selectedEnv: string,
  providers: {
-    providerList: {
-      id?: string,
-      dataId?: string,
-      title?: string,
-      value: string,
-      fork?: string
-      content: string
-    }[],
+    providerList: Provider[],
    isRequesting: boolean,
    isSuccessful: boolean,
    error: string