From fc85598bd735dc8506f368268290e1bdaf02518e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 22 Sep 2023 23:15:45 +0100
Subject: [PATCH] extract new component. add use effect

---
 .../run-tab/src/lib/components/account.tsx    |  9 +++++----
 .../src/lib/components/copyToClipboard.tsx    | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/copyToClipboard.tsx

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 86e6132ca72..9bac4b39634 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -1,10 +1,10 @@
 // eslint-disable-next-line no-use-before-define
 import React, {useEffect, useState, useRef} from 'react'
 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 CopyIcon from './copyToClipboard'
 
 export function AccountUI(props: AccountProps) {
   const {selectedAccount, loadedAccounts} = props.accounts
@@ -214,9 +214,10 @@ export function AccountUI(props: AccountProps) {
             </option>
           ))}
         </select>
-        <div style={{marginLeft: -5}}>
-          <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copyAccount'})} content={selectedAccount} direction="top" />
-        </div>
+        <CopyIcon
+          selectedAccount={selectedAccount}
+          intl={intl}
+        />
         <CustomTooltip placement={'top-start'} tooltipClasses="text-nowrap" tooltipId="remixSignMsgTooltip" tooltipText={<FormattedMessage id="udapp.signMsgUsingAccount" />}>
           <i id="remixRunSignMsg" data-id="settingsRemixRunSignMsg" className="mx-1 fas fa-edit udapp_icon" aria-hidden="true" onClick={signMessage}></i>
         </CustomTooltip>
diff --git a/libs/remix-ui/run-tab/src/lib/components/copyToClipboard.tsx b/libs/remix-ui/run-tab/src/lib/components/copyToClipboard.tsx
new file mode 100644
index 00000000000..a2ed7c4eaa8
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/copyToClipboard.tsx
@@ -0,0 +1,20 @@
+
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import React, { useEffect, useState } from 'react'
+
+export default function CopyIcon({ selectedAccount, intl}) {
+
+  useEffect(() => {
+  }, [selectedAccount])
+
+  return (
+    <div style={{marginLeft: -5}}>
+      <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copyAccount'})} content={selectedAccount} direction="top" />
+    </div>
+  )
+}
+declare global {
+  interface Window {
+    ethereum: import('ethers').providers.ExternalProvider & any
+  }
+}