From d4b24364d9da603928a08d219d5e8fad92c42aef Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 14 Nov 2024 19:17:27 +0100
Subject: [PATCH] change dropdown to custom dropdown

---
 .../run-tab/src/lib/components/account.tsx    | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index 27b3b7264d..76280db056 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 import { PassphrasePrompt } from './passphrase'
-import { CustomTooltip } from '@remix-ui/helper'
+import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
+import { Dropdown } from 'react-bootstrap'
 const _paq = window._paq = window._paq || []
 
 export function AccountUI(props: AccountProps) {
@@ -235,7 +236,27 @@ export function AccountUI(props: AccountProps) {
         {props.accounts.isRequesting && <i className="fa fa-spinner fa-pulse ml-2" aria-hidden="true"></i>}
       </label>
       <div className="udapp_account">
-        <select
+        <Dropdown className="udapp_selectExEnvOptions">
+          <Dropdown.Toggle as={CustomToggle} icon={null} id="txorigin" data-id="runTabSelectAccount" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
+            {selectedAccount ? loadedAccounts[selectedAccount] : ''}
+          </Dropdown.Toggle>
+          <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
+            {accounts && accounts.length > 0 ? accounts.map((value, index) => (
+              <Dropdown.Item
+                key={index}
+                eventKey={selectedAccount}
+                onSelect={(e) => {
+                  props.setAccount(value)
+                }}
+              >
+                <span className="">
+                  {loadedAccounts[value]}
+                </span>
+              </Dropdown.Item>
+            )) : <Dropdown.Item></Dropdown.Item>}
+          </Dropdown.Menu>
+        </Dropdown>
+        {/* <select
           id="txorigin"
           data-id="runTabSelectAccount"
           name="txorigin"
@@ -250,7 +271,7 @@ export function AccountUI(props: AccountProps) {
               {loadedAccounts[value]}
             </option>
           ))}
-        </select>
+        </select> */}
       </div>
     </div>
   )
@@ -280,4 +301,4 @@ const EIP712_Example = {
       { name: 'createdAt', type: 'uint256' },
     ],
   },
-}
\ No newline at end of file
+}