Sandbox run plugin/src/components/DevnetAccountSelector/index.tsx

NethermindEth · Nov 1, 2023 · d92ee01 · d92ee01
1 parent 7296dc8
commit d92ee01
Showing 1 changed file with 68 additions and 42 deletions.
diff --git a/plugin/src/components/DevnetAccountSelector/index.tsx b/plugin/src/components/DevnetAccountSelector/index.tsx
@@ -1,16 +1,18 @@
-import {
-  getRoundedNumber,
-  getShortenedHash,
-  weiToEth
-} from '../../utils/utils'
+import { getRoundedNumber, getShortenedHash, weiToEth } from '../../utils/utils'
 import { getAccounts } from '../../utils/network'
 import React, { useEffect, useState } from 'react'
 import { Account, Provider } from 'starknet'
 import { MdCopyAll, MdRefresh } from 'react-icons/md'
 import './devnetAccountSelector.css'
 import copy from 'copy-to-clipboard'
 import { useAtom, useAtomValue } from 'jotai'
-import { availableDevnetAccountsAtom, devnetAtom, envAtom, isDevnetAliveAtom, selectedDevnetAccountAtom } from '../../atoms/environment'
+import {
+  availableDevnetAccountsAtom,
+  devnetAtom,
+  envAtom,
+  isDevnetAliveAtom,
+  selectedDevnetAccountAtom
+} from '../../atoms/environment'
 import useAccount from '../../hooks/useAccount'
 import useProvider from '../../hooks/useProvider'
 import useRemixClient from '../../hooks/useRemixClient'
@@ -24,8 +26,12 @@ const DevnetAccountSelector: React.FC = () => {
   const env = useAtomValue(envAtom)
   const devnet = useAtomValue(devnetAtom)
   const [isDevnetAlive, setIsDevnetAlive] = useAtom(isDevnetAliveAtom)
-  const [selectedDevnetAccount, setSelectedDevnetAccount] = useAtom(selectedDevnetAccountAtom)
-  const [availableDevnetAccounts, setAvailableDevnetAccounts] = useAtom(availableDevnetAccountsAtom)
+  const [selectedDevnetAccount, setSelectedDevnetAccount] = useAtom(
+    selectedDevnetAccountAtom
+  )
+  const [availableDevnetAccounts, setAvailableDevnetAccounts] = useAtom(
+    availableDevnetAccountsAtom
+  )
 
   const checkDevnetUrl = async (): Promise<void> => {
     try {
@@ -37,7 +43,7 @@ const DevnetAccountSelector: React.FC = () => {
         }
       })
       const status = await response.json()
-      
+
       if (!status.version || response.status !== 200) {
         setIsDevnetAlive(false)
       } else {
@@ -51,7 +57,7 @@ const DevnetAccountSelector: React.FC = () => {
   // devnet live status
   useEffect(() => {
     const interval = setInterval(() => {
-      checkDevnetUrl().catch(e => {
+      checkDevnetUrl().catch((e) => {
         console.error(e)
       })
     }, 3000)
@@ -103,7 +109,7 @@ const DevnetAccountSelector: React.FC = () => {
       if (!isDevnetAlive) {
         return
       }
-      refreshDevnetAccounts().catch(e => {
+      refreshDevnetAccounts().catch((e) => {
         console.error(e)
       })
     }, 1)
@@ -139,7 +145,7 @@ const DevnetAccountSelector: React.FC = () => {
     setProvider(newProvider)
   }, [devnet, selectedDevnetAccount])
 
-  function handleAccountChange (value: number): void {
+  function handleAccountChange(value: number): void {
     if (value === -1) {
       return
     }
@@ -172,44 +178,64 @@ const DevnetAccountSelector: React.FC = () => {
   const [dropdownControl, setDropdownControl] = useState(false)
 
   return (
-    <div className='mt-2'>
+    <div className="mt-2">
       <label className="">Devnet account selection</label>
       <div className="devnet-account-selector-wrapper">
-        <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.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>
-                  )
-                })
+                    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>
+                    <D.Item
+                      onClick={() => {
+                        handleAccountChange(-1)
+                      }}
+                      key={-1}
+                    >
+                      No accounts found
+                    </D.Item>
                   ] as JSX.Element[])}
             </D.Content>
           </D.Portal>