Merge main into sweep/add-sweep-config

NethermindEth · Nov 1, 2023 · 6bf0650 · 6bf0650
2 parents 4aee54e + 930f1e7
commit 6bf0650
Show file tree

Hide file tree

Showing 38 changed files with 1,116 additions and 557 deletions.
diff --git a/plugin/.env.development b/plugin/.env.development
@@ -1,4 +1,4 @@
-VITE_API_URL=https://cairo-compile-remix-test.nethermind.io
+VITE_API_URL=http://127.0.0.1:8000
 VITE_DEVNET_URL=http://127.0.0.1:5050
 VITE_REMOTE_DEVNET_URL=https://starknet-devnet-dev.nethermind.io
 VITE_VERSION=$npm_package_version
diff --git a/plugin/index.html b/plugin/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="Starknet remix plugin " />
     <title>Starknet remix plugin</title>
+    <link rel="stylesheet" href="/theme/theme.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/plugin/src/App.tsx b/plugin/src/App.tsx
@@ -10,7 +10,7 @@ const App: React.FC = () => {
   const { isPluginLoaded } = useRemixClient()
 
   return (
-    <div className="shell">
+    <div className="shell bg-primary">
       {isPluginLoaded
         ? (
           <Plugin />

diff --git a/plugin/src/components/BackgroundNotices/index.tsx b/plugin/src/components/BackgroundNotices/index.tsx
@@ -9,14 +9,14 @@ const Notices = [
 
 const BackgroundNotices: React.FC = () => {
   return (
-    <div>
-      <p className="text-center">Notices</p>
+    <div className='bg-transparent'>
+      <p className="text-center text-md text-light">Notices</p>
       {
         <ul className="list-group">
           {Notices.map((notice, index) => {
             return (
-              <li key={nanoid()} className="list-group-item d-flex justify-content-left align-items-center disabled">
-                <span className="badge badge-primary badge-pill mr-2">
+              <li key={nanoid()} className="list-group-item d-flex justify-content-left align-items-center text-disabled bg-primary">
+                <span className="badge badge-information badge-pilled mr-2">
                   {index + 1}
                 </span>
                 {notice}

diff --git a/plugin/src/components/DevnetAccountSelector/devnetAccountSelector.css b/plugin/src/components/DevnetAccountSelector/devnetAccountSelector.css
@@ -4,6 +4,11 @@
   justify-content: space-between;
 }
 
+.devnet-account-selector-trigger {
+  width: 100%;
+  border: 1px solid var(--primary-color-500);
+}
+
 .text-copied {
   top: 0px;
   left: 0px;

diff --git a/plugin/src/components/DevnetAccountSelector/index.tsx b/plugin/src/components/DevnetAccountSelector/index.tsx
@@ -1,6 +1,5 @@
 import {
   getRoundedNumber,
-  getSelectedAccountIndex,
   getShortenedHash,
   weiToEth
 } from '../../utils/utils'
@@ -15,6 +14,8 @@ import { availableDevnetAccountsAtom, devnetAtom, envAtom, isDevnetAliveAtom, se
 import useAccount from '../../hooks/useAccount'
 import useProvider from '../../hooks/useProvider'
 import useRemixClient from '../../hooks/useRemixClient'
+import * as D from '../../components/ui_components/Dropdown'
+import { BsCheck, BsChevronDown } from 'react-icons/bs'
 
 const DevnetAccountSelector: React.FC = () => {
   const { account, setAccount } = useAccount()
@@ -138,12 +139,12 @@ const DevnetAccountSelector: React.FC = () => {
     setProvider(newProvider)
   }, [devnet, selectedDevnetAccount])
 
-  function handleAccountChange (event: any): void {
-    if (event.target.value === -1) {
+  function handleAccountChange (value: number): void {
+    if (value === -1) {
       return
     }
-    setAccountIdx(event.target.value)
-    setSelectedDevnetAccount(availableDevnetAccounts[event.target.value])
+    setAccountIdx(value)
+    setSelectedDevnetAccount(availableDevnetAccounts[value])
     const newProvider = new Provider({
       sequencer: {
         baseUrl: devnet.url
@@ -153,8 +154,8 @@ const DevnetAccountSelector: React.FC = () => {
     setAccount(
       new Account(
         provider ?? newProvider,
-        availableDevnetAccounts[event.target.value].address,
-        availableDevnetAccounts[event.target.value].private_key
+        availableDevnetAccounts[value].address,
+        availableDevnetAccounts[value].private_key
       )
     )
   }
@@ -168,11 +169,52 @@ const DevnetAccountSelector: React.FC = () => {
     setAccountIdx(0)
   }, [env])
 
+  const [dropdownControl, setDropdownControl] = useState(false)
+
   return (
-    <>
+    <div className='mt-2'>
       <label className="">Devnet account selection</label>
       <div className="devnet-account-selector-wrapper">
-        <select
+        <D.Root open={dropdownControl} onOpenChange={(e) => { setDropdownControl(e) }}>
+          <D.Trigger >
+            <div className='flex flex-row justify-content-space-between align-items-center p-2 br-1 devnet-account-selector-trigger'>
+              <label className='text-light text-sm m-0'>{getShortenedHash(
+                availableDevnetAccounts[accountIdx]?.address ?? '',
+                6,
+                4
+              )}</label>
+              <BsChevronDown style={{
+                transform: dropdownControl ? 'rotate(180deg)' : 'none',
+                transition: 'all 0.3s ease'
+              }} />            </div>
+          </D.Trigger>
+          <D.Portal>
+            <D.Content>
+              {isDevnetAlive && availableDevnetAccounts.length > 0
+                ? availableDevnetAccounts.map((account, index) => {
+                  return (
+                    <D.Item onClick={() => { handleAccountChange(index) }} key={index}>
+                      {accountIdx === index && <BsCheck size={18} />}
+                      {`${getShortenedHash(
+                        account.address ?? '',
+                        6,
+                        4
+                      )} (${getRoundedNumber(
+                        weiToEth(account.initial_balance),
+                        2
+                      )} ether)`}
+                    </D.Item>
+                  )
+                })
+                : ([
+                  <D.Item onClick={() => { handleAccountChange(-1) }} key={-1}>
+                    No accounts found
+                  </D.Item>
+                  ] as JSX.Element[])}
+            </D.Content>
+          </D.Portal>
+        </D.Root>
+        {/* <select
           className="custom-select"
           aria-label=".form-select-sm example"
           onChange={handleAccountChange}
@@ -201,8 +243,8 @@ const DevnetAccountSelector: React.FC = () => {
               <option value={-1} key={-1}>
                 No accounts found
               </option>
-              ] as JSX.Element[])}
-        </select>
+            ] as JSX.Element[])}
+        </select> */}
         <div className="position-relative">
           <button
             className="btn"
@@ -230,7 +272,7 @@ const DevnetAccountSelector: React.FC = () => {
           <MdRefresh />
         </button>
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/plugin/src/components/EnvironmentSelector/index.tsx b/plugin/src/components/EnvironmentSelector/index.tsx
@@ -1,62 +1,87 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { devnets } from '../../utils/network'
 
 import './styles.css'
 import { devnetAtom, envAtom } from '../../atoms/environment'
 import { useAtom, useSetAtom } from 'jotai'
 import useStarknetWindow from '../../hooks/starknetWindow'
 import useProvider from '../../hooks/useProvider'
+import * as D from '../../components/ui_components/Dropdown'
+import { BsChevronDown } from 'react-icons/bs'
 
 const EnvironmentSelector: React.FC = () => {
   const { setProvider } = useProvider()
   const [env, setEnv] = useAtom(envAtom)
   const setDevnet = useSetAtom(devnetAtom)
   const { starknetWindowObject, connectWalletHandler } = useStarknetWindow()
 
-  async function handleEnvironmentChange (event: any): Promise<void> {
-    const value = parseInt(event.target.value)
-    if (value > 0) {
+  const handleEnvironmentChange = (ipValue: string): void => {
+    const value = parseInt(ipValue)
+    if (!isNaN(value) && value > 0) {
       setDevnet(devnets[value - 1])
       if (value === 2) setEnv('remoteDevnet')
       else setEnv('localDevnet')
       setProvider(null)
       return
     }
     setEnv('wallet')
-    if (starknetWindowObject === null) await connectWalletHandler()
+    if (starknetWindowObject === null) {
+      connectWalletHandler()
+        .catch(
+          e => {
+            console.error(e)
+          })
+    }
   }
 
-  const getDefualtIndex = (): number => {
-    if (env === 'wallet') return 0
-    if (env === 'localDevnet') return 1
-    return 2
+  const getActiveEnv = (lEnv: typeof env): string => {
+    switch (lEnv) {
+      case 'manual': return 'Manual'
+      case 'localDevnet': return 'Local Devnet'
+      case 'remoteDevnet': return 'Remote Devnet'
+      case 'wallet': return 'Wallet'
+    }
   }
 
+  const [dropdownControl, setDropdownControl] = useState(false)
+
   return (
     <div className="environment-selector-wrapper">
-      <select
-        className="custom-select"
-        aria-label=".form-select-sm example"
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        onChange={handleEnvironmentChange}
-        defaultValue={getDefualtIndex()}
-      >
-        {devnets.reduce<JSX.Element[]>(
-          (acc, devnet, index) => {
-            acc.push(
-              <option value={index + 1} key={index + 1}>
-                {devnet.name}
-              </option>
-            )
-            return acc
-          },
-          [
-            <option value={0} key={0}>
-              Wallet Selection
-            </option>
-          ]
-        )}
-      </select>
+      <D.Root open={dropdownControl} onOpenChange={(e) => { setDropdownControl(e) }}>
+        <D.Trigger>
+          <div className="flex flex-row justify-content-space-between align-items-center p-2 br-1 devnet-trigger-wrapper">
+            <label className='text-light text-sm m-0'>{getActiveEnv(env)}</label>
+            <BsChevronDown style={{
+              transform: dropdownControl ? 'rotate(180deg)' : 'none',
+              transition: 'all 0.3s ease'
+            }} />
+          </div>
+        </D.Trigger>
+        <D.Portal>
+          <D.Content>
+            <D.Item
+              key={'0wallet'}
+              onClick={() => {
+                handleEnvironmentChange('0')
+              }}
+            >
+              Wallet
+            </D.Item>
+            {devnets.map((devnet, i) => {
+              return (
+                <D.Item
+                  key={i.toString() + devnet?.name}
+                  onClick={() => {
+                    handleEnvironmentChange((i + 1).toString())
+                  }}
+                >
+                  {devnet?.name}
+                </D.Item>
+              )
+            })}
+          </D.Content>
+        </D.Portal>
+      </D.Root>
     </div>
   )
 }

diff --git a/plugin/src/components/EnvironmentSelector/styles.css b/plugin/src/components/EnvironmentSelector/styles.css
@@ -1,3 +1,7 @@
 .environment-selector-wrapper {
     width: 100%;
+}
+
+.devnet-trigger-wrapper {
+    border: 1px solid var(--primary-color-500);
 }