fix hooks issue

resources/dev-tools/xrp-faucets.page.tsx

@@ -100,7 +100,7 @@ export default function XRPFaucets(): React.JSX.Element {
                 )) }
 
                 <br/>
-                <TestCredentials selectedFaucet={selectedFaucet}/>
+                <TestCredentials selectedFaucet={selectedFaucet} translate={translate}/>
             </div>
           </section>
         </main>
@@ -116,7 +116,8 @@ async function generateFaucetCredentialsAndUpdateUI(
   setAddress: React.Dispatch<React.SetStateAction<string>>, 
   setSecret: React.Dispatch<React.SetStateAction<string>>, 
   setBalance: React.Dispatch<React.SetStateAction<string>>, 
-  setSequence: React.Dispatch<React.SetStateAction<string>>): Promise<void> {
+  setSequence: React.Dispatch<React.SetStateAction<string>>,
+  translate: (key: string) => string): Promise<void> {
 
   setButtonClicked(true)
 
@@ -126,8 +127,6 @@ async function generateFaucetCredentialsAndUpdateUI(
   setSecret("")
   setBalance("")
   setSequence("")
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
 
 
   const wallet = Wallet.generate()
@@ -152,9 +151,7 @@ async function generateFaucetCredentialsAndUpdateUI(
   setButtonClicked(false)
 }
 
-function TestCredentials({selectedFaucet}) {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
+function TestCredentials({selectedFaucet, translate}) {
 
   const [generatedCredentialsFaucet, setGeneratedCredentialsFaucet] = useState("")
   const [address, setAddress] = useState("")
@@ -174,7 +171,8 @@ function TestCredentials({selectedFaucet}) {
                 setAddress, 
                 setSecret, 
                 setBalance, 
-                setSequence)
+                setSequence,
+                translate)
             } className="btn btn-primary mr-2 mb-2">
               {translate(`Generate ${selectedFaucet.shortName} credentials`)}
           </button>