feat: add facuet button in testnet mode

app/api/api.ts

@@ -20,8 +20,13 @@ async function getTxDetails(txid: string) {
   return axios.get<Transaction | MempoolTransaction>(api + `/v1/tx/${txid}`);
 }
 
+async function getFaucetStx(address: string) {
+  return axios.post(api + `/v1/debug/faucet?address=${address}`, { address });
+}
+
 export const Api = {
   getAddressBalance,
   getAddressTransactions,
   getTxDetails,
+  getFaucetStx,
 };

app/components/home/balance-card.tsx

@@ -1,14 +1,24 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { Box, Button, Text, ArrowIcon } from '@blockstack/ui';
 import { toHumanReadableStx } from '../../utils/unit-convert';
+import { safeAwait } from '../../utils/safe-await';
+import { delay } from '../../utils/delay';
 
 interface BalanceCardProps {
   balance: string | null;
-  onSelectSend: () => void;
-  onSelectReceive: () => void;
+  onSelectSend(): void;
+  onSelectReceive(): void;
+  onRequestTestnetStx(): Promise<any>;
 }
 
-export const BalanceCard: FC<BalanceCardProps> = ({ balance, onSelectReceive, onSelectSend }) => {
+export const BalanceCard: FC<BalanceCardProps> = args => {
+  const { balance, onSelectReceive, onSelectSend, onRequestTestnetStx } = args;
+  const [requestingTestnetStx, setRequestingTestnetStx] = useState(false);
+  const requestTestnetStacks = async () => {
+    setRequestingTestnetStx(true);
+    await safeAwait(Promise.allSettled([onRequestTestnetStx(), delay(1500)]));
+    setRequestingTestnetStx(false);
+  };
   return (
     <Box>
       <Text textStyle="body.large.medium" display="block">
@@ -26,6 +36,12 @@ export const BalanceCard: FC<BalanceCardProps> = ({ balance, onSelectReceive, on
           <ArrowIcon direction="down" mr="base-tight" />
           Receive
         </Button>
+        <Button mode="secondary" size="md" ml="tight" onClick={requestTestnetStacks}>
+          <Box mr="extra-tight" fontSize="18px" left="-4px" position="relative">
+            🚰
+          </Box>
+          {requestingTestnetStx ? 'Requesting faucet' : 'Get testnet STX'}
+        </Button>
       </Box>
     </Box>
   );

app/modals/transaction/decrypt-wallet-form.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, Input, Text, Button } from '@blockstack/ui';
+import { Box, Input, Text } from '@blockstack/ui';
 import { ErrorLabel } from '../../components/error-label';
 import { ErrorText } from '../../components/error-text';
 
@@ -31,9 +31,15 @@ export const DecryptWalletForm: Props = args => {
       )}
       <Text textStyle="body.small" mt="base-tight" mb="base-loose" display="block">
         Forgot password?{' '}
-        <Button variant="link" onClick={onForgottenPassword}>
+        <Text
+          as="button"
+          color="blue"
+          fontWeight={500}
+          onClick={onForgottenPassword}
+          _focus={{ textDecoration: 'underline', outline: 0 }}
+        >
           Reset your wallet
-        </Button>{' '}
+        </Text>{' '}
         to set a new password.
       </Text>
     </Box>

app/modals/transaction/transaction-form.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Flex, Text, Input, Box } from '@blockstack/ui';
+import { Flex, Text, Input, Box, Button } from '@blockstack/ui';
 import { ErrorLabel } from '../../components/error-label';
 import { ErrorText } from '../../components/error-text';
 import { FormikProps } from 'formik';
@@ -9,9 +9,12 @@ import { toHumanReadableStx } from '../../utils/unit-convert';
 interface TxModalFormProps {
   balance: string;
   form: FormikProps<{ recipient: string; amount: string; memo: string }>;
+  isCalculatingMaxSpend: boolean;
+  onSendEntireBalance(): void;
 }
 
-export const TxModalForm: FC<TxModalFormProps> = ({ balance, form }) => {
+export const TxModalForm: FC<TxModalFormProps> = args => {
+  const { balance, form, isCalculatingMaxSpend, onSendEntireBalance } = args;
   return (
     <Box mb="extra-loose">
       <Flex flexDirection="column" alignItems="center" mt="48px">

app/pages/app.tsx

@@ -43,7 +43,7 @@ export function App(props: Props) {
           justifyContent="space-between"
           pl="90px"
           height="100%"
-          backgroundColor={winState === 'focused' ? null : '#FAFAFC'}
+          backgroundColor={winState === 'focused' ? 'white' : '#FAFAFC'}
         >
           <BackButton
             backUrl={backUrl}

app/pages/home/home.tsx

@@ -92,6 +92,7 @@ export const Home: FC = () => {
       balance={balance}
       onSelectSend={() => dispatch(homeActions.openTxModal())}
       onSelectReceive={() => dispatch(homeActions.openReceiveModal())}
+      onRequestTestnetStx={async () => Api.getFaucetStx(address)}
     />
   );
   const stackingPromoCard = <StackingPromoCard />;