From 870b44cb6c4122cbd300236e310b03c376d4104c Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 24 Mar 2022 12:27:58 +0100
Subject: [PATCH] create dropdown ui for deploy to proxy.

---
 .eslintrc.json                                      |  3 ++-
 .../run-tab/src/lib/components/contractGUI.tsx      | 10 +++++++++-
 libs/remix-ui/run-tab/src/lib/css/run-tab.css       | 13 +++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 226848ea37..e2a852292a 100644
--- a/.eslintrc.json
+++ b/.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"
       }
     },
     {
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 74dade661e..6b7f675152 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 { 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'}
diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
index 00ddfadfbd..3599c5156a 100644
--- a/libs/remix-ui/run-tab/src/lib/css/run-tab.css
+++ b/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;
+}