-
+
- ![]({"assets/img/bgRemi.webp"})
-
![]({"/assets/img/remixRewardUser.webp"})
-
![]({"/assets/img/remixRewardBetaTester.webp"})
-
-
+
+
+ JUMP INTO WEB3
- The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum. +The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.
+ More
-
+
REMIX REWARDS
-NFTs for our users!
- Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice +NFTs for our users!
++ Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice. +
+ More
-
+
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
index a0913e4469..1741d6bb32 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
@@ -1,18 +1,18 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef, useContext } from 'react'
+import React, { useEffect, useRef, useContext } from 'react'
import { FormattedMessage } from 'react-intl'
import PluginButton from './pluginButton'
-import { ThemeContext, themes } from '../themeContext'
+import { ThemeContext } from '../themeContext'
import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'
import CustomNavButtons from './customNavButtons'
+const itemsToShow = 5
declare global {
interface Window {
_paq: any
}
}
const _paq = window._paq = window._paq || [] //eslint-disable-line
-
interface HomeTabFeaturedPluginsProps {
plugin: any
}
@@ -21,16 +21,40 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
const themeFilter = useContext(ThemeContext)
const carouselRef = useRef(null)
+ const carouselRefDiv = useRef(null)
- // Todo doesn't work
useEffect(() => {
- window.addEventListener("scroll", handleScroll)
+ document.addEventListener("wheel", handleScroll)
return () => {
- window.removeEventListener("scroll", handleScroll)
+ document.removeEventListener("wheel", handleScroll)
}
}, [])
+ function isDescendant(parent, child) {
+ let node = child.parentNode;
+ while (node != null) {
+ if (node === parent) {
+ return true;
+ }
+ node = node.parentNode;
+ }
+ return false;
+ }
+
const handleScroll = (e) => {
+ if (isDescendant(carouselRefDiv.current, e.target)) {
+ e.stopPropagation()
+ let nextSlide = 0
+ if (e.wheelDelta < 0) {
+ nextSlide = carouselRef.current.state.currentSlide + 1;
+ if ((carouselRef.current.state.totalItems - carouselRef.current.state.currentSlide) * carouselRef.current.state.itemWidth + 5 < carouselRef.current.state.containerWidth) return // 5 is approx margins
+ carouselRef.current.goToSlide(nextSlide)
+ } else {
+ nextSlide = carouselRef.current.state.currentSlide - 1;
+ if (nextSlide < 0) nextSlide = 0
+ carouselRef.current.goToSlide(nextSlide)
+ }
+ }
}
const startSolidity = async () => {
@@ -62,17 +86,30 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
return (
BETA TESTING
-Our community supports us.
- You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features! +Our community supports us.
+You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!
+ More
-
+
+
-
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index ad5716f45c..cccbbbbb2e 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'
import * as remixLib from '@remix-project/remix-lib'
import { ContractGUIProps } from '../types'
import { CopyToClipboard } from '@remix-ui/clipboard'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
const txFormat = remixLib.execution.txFormat
const txHelper = remixLib.execution.txHelper
@@ -233,66 +234,187 @@ export function ContractGUI (props: ContractGUIProps) {
}
return (
-
0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive') ? 'udapp_hasArgs' : ''}`}>
-
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 4c2deaebcb..b9bdfa82ed 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -7,6 +7,7 @@ import * as remixLib from '@remix-project/remix-lib'
import * as ethJSUtil from 'ethereumjs-util'
import { ContractGUI } from './contractGUI'
import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
import { BN } from 'ethereumjs-util'
import { is0XPrefixed, isHexadecimal, isNumeric, shortenAddress } from '@remix-ui/helper'
@@ -210,104 +211,190 @@ export function UniversalDappUI (props: UdappProps) {
}
return (
-
-
- 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive')) ? 'hidden' : 'visible' }} />
+
+ {'The number of recorded transactions'}
+
+ }>
+
Save transactions (deployed contracts and function executions) and replay them in another environment.
e.g Transactions created in Remix VM can be replayed in the Injected Provider. @@ -62,19 +68,33 @@ export function RecorderUI (props: RecorderProps) {
0) ||
+ props.funcABI.type === "fallback" ||
+ props.funcABI.type === "receive"
+ ? "udapp_hasArgs"
+ : ""
+ }`}
+ >
+
)
diff --git a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
index 3b46a72627..77350e9099 100644
--- a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
@@ -1,6 +1,7 @@
// eslint-disable-next-line no-use-before-define
import React from 'react'
import { FormattedMessage } from 'react-intl'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import { GasPriceProps } from '../types'
export function GasPriceUI (props: GasPriceProps) {
@@ -11,7 +12,13 @@ export function GasPriceUI (props: GasPriceProps) {
return (
+
+ {buttonOptions.title}
+
+ }
+ >
+
+
+
+
+ {props.funcABI.type === "fallback" ||
+ props.funcABI.type === "receive"
+ ? `'(${props.funcABI.type}')`
+ : props.inputs}
+
+
+ }
+ >
+ 0) ||
+ props.funcABI.type === "fallback" ||
+ props.funcABI.type === "receive"
+ )
+ ? "hidden"
+ : "visible",
+ }}
+ />
+
0) ? 'hidden' : 'visible' }}>
+ style={{
+ visibility: !(
+ props.funcABI.inputs && props.funcABI.inputs.length > 0
+ )
+ ? "hidden"
+ : "visible",
+ }}
+ >
-
+
- { props.deployOption && (props.deployOption || []).length > 0 ?
+ {props.deployOption && (props.deployOption || []).length > 0 ? (
<>
-
-
{title}
-
+
+ {title}
+
+
{props.funcABI.inputs.map((inp, index) => {
return (
+ {inp.name}
+
+ }
+ >
+ {
+ multiFields.current[index] = el;
+ }}
+ className="form-control"
+ placeholder={inp.type}
+ data-id={`multiParamManagerInput${inp.name}`}
+ />
+
+
+ );
})}
- { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} title={inp.name} data-id={`multiParamManagerInput${inp.name}`} />
-
)
+
-
+
-
+
-
+
+
+
- {
- props.initializerOptions && props.initializerOptions.initializeInputs ?
- (false)
@@ -25,9 +25,18 @@ export function DeployButton (props: DeployButtonProps) {
}
:
-
+
+ {props.buttonOptions.title}
+
+ }
+ >
+
+
}
)
diff --git a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
index 26fcf2a164..c5dc153e42 100644
--- a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
@@ -1,4 +1,5 @@
import React from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import { DeployInputProps } from '../types'
import { DeployButton } from './deployButton'
@@ -6,15 +7,24 @@ export function DeployInput (props: DeployInputProps) {
return (
+ {props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
+
+ }
+ >
+
+
)
}
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 04315d6d8b..2d99734d96 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -1,12 +1,13 @@
// eslint-disable-next-line no-use-before-define
import React from 'react'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
import { EnvironmentProps } from '../types'
import { Dropdown } from 'react-bootstrap'
import { CustomMenu, CustomToggle } from '@remix-ui/helper'
import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
export function EnvironmentUI (props: EnvironmentProps) {
+
const handleChangeExEnv = (env: string) => {
const provider = props.providers.providerList.find(exEnv => exEnv.value === env)
const fork = provider.fork // can be undefined if connected to an external source (External Http Provider / injected)
@@ -17,8 +18,6 @@ export function EnvironmentUI (props: EnvironmentProps) {
props.setExecutionContext({ context, fork })
}
- const intl = useIntl()
-
const currentProvider = props.providers.providerList.find(exEnv => exEnv.value === props.selectedEnv)
const bridges = {
'Optimism Provider': 'https://www.optimism.io/apps/bridges',
@@ -68,12 +67,13 @@ export function EnvironmentUI (props: EnvironmentProps) {
}
-
-
-
+
+
- {
- props.initializerOptions && props.initializerOptions.initializeInputs ?
+ {props.initializerOptions &&
+ props.initializerOptions.initializeInputs ? (
-
- : null
- }
+
+
+ ) : null}
-
: null
- }
- {
- props.initializerOptions.inputs.inputs.map((inp, index) => {
- return (
-
-
-
- { initializeFields.current[index] = el }} style={{ height: 32 }} className="form-control udapp_input" placeholder={inp.type} title={inp.name} />
-
- )})
- }
-
+ {props.initializerOptions &&
+ props.initializerOptions.initializeInputs ? (
+
-
+
-
- )
+ );
}
diff --git a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
index 5cc3f69b97..98cdb72262 100644
--- a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { DeployButtonProps } from '../types'
-import { ButtonGroup, Dropdown } from 'react-bootstrap'
+import { ButtonGroup, Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
export function DeployButton (props: DeployButtonProps) {
const [showOptions, setShowOptions] = useState
+
+ ) : null}
+
+ {props.initializerOptions.inputs.inputs.map((inp, index) => {
+ return (
+
+
+
+ {
+ initializeFields.current[index] = el;
+ }}
+ style={{ height: 32 }}
+ className="form-control udapp_input"
+ placeholder={inp.type}
+ title={inp.name}
+ />
+
+ );
+ })}
+
+
- {
- !useLastProxy ?
+ {!useLastProxy ? (
+ ) : (
+
+ {proxyAddress || "No proxy address available"}
+
+ )}
- : null
- }
+
+ ) : null}
-
-
-
:
- { proxyAddress || 'No proxy address available' }
- }
+
+
+
-
+
+ {"The default gas limit is 3M. Adjust as needed."}
+
+ }>
+
+
)
}
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index e96bc6f07f..d5123be03f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -1,6 +1,7 @@
// eslint-disable-next-line no-use-before-define
import React from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import { InstanceContainerProps } from '../types'
import { UniversalDappUI } from './universalDappUI'
@@ -15,15 +16,35 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
return (
-
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
index 9b3a99ae6f..554c75d29f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -34,7 +34,13 @@ export function RecorderUI (props: RecorderProps) {
- {props.count}
+ {props.count}
+ e.g Transactions created in Remix VM can be replayed in the Injected Provider. @@ -62,19 +68,33 @@ export function RecorderUI (props: RecorderProps) {
-
- Save {props.count} transaction{props.count === 1 ? '' : 's'} as scenario file
+
+
+ {
+ props.count === 0 ? 'No transactions to save'
+ : props.count === 1 ? `Save ${props.count} transaction as scenario file`
+ : `Save ${props.count} transactions as scenario file`
+ }
+
}>
-
+
+
+
Run transaction(s) from the current scenario file
}>
-
+
+
+
+
-
-
+
+
-
+
+
-
- {props.instance.name} at {shortenAddress(address)} ({props.context})
+ {props.instance.name} at {shortenAddress(address)} (
+ {props.context})
-
+
+
- )
+ );
}
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx
index 81935ae8d2..2090f59ab3 100644
--- a/libs/remix-ui/run-tab/src/lib/components/value.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl'
import { BN } from 'ethereumjs-util'
import { isNumeric } from '@remix-ui/helper'
import { ValueProps } from '../types'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
export function ValueUI (props: ValueProps) {
const [sendValue, setSendValue] = useState(props.sendValue)
@@ -50,6 +51,11 @@ export function ValueUI (props: ValueProps) {
-
-
-
- {
- contractABI && contractABI.map((funcABI, index) => {
- if (funcABI.type !== 'function') return null
- const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
- const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
- const inputs = props.getFuncABIInputs(funcABI)
+
+
+
+ {contractABI &&
+ contractABI.map((funcABI, index) => {
+ if (funcABI.type !== "function") return null;
+ const isConstant =
+ funcABI.constant !== undefined ? funcABI.constant : false;
+ const lookupOnly =
+ funcABI.stateMutability === "view" ||
+ funcABI.stateMutability === "pure" ||
+ isConstant;
+ const inputs = props.getFuncABIInputs(funcABI);
- return
- {
- runTransaction(lookupOnly, funcABI, valArray, inputsValues, index)
- }}
- inputs={inputs}
- evmBC={evmBC}
- lookupOnly={lookupOnly}
- key={index}
- />
-
-
- {
- Object.keys(props.instance.decodedResponse || {}).map((key) => {
- const funcIndex = index.toString()
- const response = props.instance.decodedResponse[key]
+ return (
+
- })
- }
+ );
+ })}
+ {
+ runTransaction(
+ lookupOnly,
+ funcABI,
+ valArray,
+ inputsValues,
+ index
+ );
+ }}
+ inputs={inputs}
+ evmBC={evmBC}
+ lookupOnly={lookupOnly}
+ key={index}
+ />
+
-
+
+ {Object.keys(props.instance.decodedResponse || {}).map(
+ (key) => {
+ const funcIndex = index.toString();
+ const response = props.instance.decodedResponse[key];
- return key === funcIndex ? Object.keys(response || {}).map((innerkey, index) => {
- return renderData(props.instance.decodedResponse[key][innerkey], response, innerkey, innerkey)
- }) : null
- })
- }
-
+ return key === funcIndex
+ ? Object.keys(response || {}).map(
+ (innerkey, index) => {
+ return renderData(
+ props.instance.decodedResponse[key][
+ innerkey
+ ],
+ response,
+ innerkey,
+ innerkey
+ );
+ }
+ )
+ : null;
+ }
+ )}
+
+
-
-
+
+
-
+
+
+ {"Enter an amount and choose its unit"}
+
+ }>
+