feat: provide testnet wallet warnings

app/components/testnet/exchange-withdrawal-warning.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { ExclamationMarkCircleIcon, Flex, Text, FlexProps } from '@blockstack/ui';
+
+export const ExchangeWithdrawalWarning: FC<FlexProps> = props => {
+  return (
+    <Flex
+      backgroundColor="#FCEBEC"
+      width="100%"
+      borderRadius="6px"
+      padding="base"
+      mt="tight"
+      pr="base-loose"
+      {...props}
+    >
+      <ExclamationMarkCircleIcon
+        color="#CF0000"
+        width="16px"
+        height="16px"
+        minWidth="16px"
+        mr="tight"
+        mt="1px"
+      />
+      <Text textStyle="body.small">
+        <strong>DO NOT withdraw</strong> from cryptocurrency exchanges, such as Binance, to this
+        wallet. <br /> This wallet is for <strong>testnet STX only</strong>.
+      </Text>
+    </Flex>
+  );
+};

app/modals/receive-stx/receive-stx-modal.tsx

@@ -4,8 +4,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import Qr from 'qrcode.react';
 import { Text, Modal, Button, Flex, Box, useClipboard } from '@blockstack/ui';
 
-import { TxModalHeader, TxModalFooter } from '../transaction/transaction-modal-layout';
+import { NETWORK } from '@constants/index';
 import { homeActions } from '@store/home/home.reducer';
+import { TxModalHeader, TxModalFooter } from '../transaction/transaction-modal-layout';
+import { ExchangeWithdrawalWarning } from '@components/testnet/exchange-withdrawal-warning';
 
 interface ReceiveStxModalProps {
   address: string;
@@ -36,6 +38,7 @@ export const ReceiveStxModal: FC<ReceiveStxModalProps> = ({ address }) => {
         <Text textStyle="body.large.medium" mt="loose">
           Wallet address
         </Text>
+        {NETWORK === 'testnet' && <ExchangeWithdrawalWarning />}
         <Flex
           mt="base-tight"
           justifyContent="center"