create dropdown ui for deploy to proxy.

.eslintrc.json

@@ -29,7 +29,8 @@
         "@typescript-eslint/no-this-alias": "off",
         "@typescript-eslint/no-empty-function": "off",
         "eslint-disable-next-line no-empty": "off",
-        "no-empty": "off"
+        "no-empty": "off",
+        "jsx-a11y/anchor-is-valid": "off"
       }
     },
     {

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 { ButtonGroup, Dropdown } from 'react-bootstrap'
 
 const txFormat = remixLib.execution.txFormat
 export function ContractGUI (props: ContractGUIProps) {
@@ -164,7 +165,14 @@ export function ContractGUI (props: ContractGUIProps) {
   return (
     <div className={`udapp_contractProperty ${(props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive') ? 'udapp_hasArgs' : ''}`}>
       <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}>
-        <button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{title}</button>
+        <Dropdown as={ButtonGroup}>
+          <button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{title}</button>
+          <Dropdown.Toggle split id="dropdown-split-basic" className={`btn btn-sm dropdown-toggle dropdown-toggle-split ${buttonOptions.classList}`} style={{ maxWidth: 25, minWidth: 0 }} />
+          <Dropdown.Menu className="deploy-items border-0 bg-gray">
+            <Dropdown.Item active>&#10003; Deploy</Dropdown.Item>
+            <Dropdown.Item>Deploy with Proxy</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
         <input
           className="form-control"
           data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'}

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -513,4 +513,17 @@
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
+.deploy-items {
+  padding: 0.25rem 0.25rem;
+  border-radius: .25rem;
+}
+.deploy-items a {
+  border-radius: .25rem;
+  text-transform: none;
+  text-decoration: none;
+  font-weight: normal;
+  font-size: .8rem;
+  padding: 0.25rem 0.25rem;
+  width:auto;
+}