Rewrite Trade as `function` component

This allows us to co-locate the `default` export with the component
definition.

taker-frontend/src/components/Trade.tsx

@@ -79,24 +79,22 @@ function AlertBox({ title, description }: AlertBoxProps) {
     </Alert>);
 }
 
-const Trade = (
+export default function Trade({
-    {
+    connectedToMaker,
-        connectedToMaker,
+    minQuantity,
-        minQuantity,
+    maxQuantity,
-        maxQuantity,
+    referencePrice: referencePriceAsNumber,
-        referencePrice: referencePriceAsNumber,
+    askPrice: askPriceAsNumber,
-        askPrice: askPriceAsNumber,
+    quantity,
-        quantity,
+    onQuantityChange,
-        onQuantityChange,
+    margin: marginAsNumber,
-        margin: marginAsNumber,
+    leverage,
-        leverage,
+    liquidationPrice: liquidationPriceAsNumber,
-        liquidationPrice: liquidationPriceAsNumber,
+    onLongSubmit,
-        onLongSubmit,
+    isLongSubmitting,
-        isLongSubmitting,
+    orderId,
-        orderId,
+    walletBalance,
-        walletBalance,
+}: TradeProps) {
-    }: TradeProps,
-) => {
     let outerCircleBg = useColorModeValue("gray.100", "gray.700");
     let innerCircleBg = useColorModeValue("gray.200", "gray.600");
 
@@ -271,8 +269,7 @@ const Trade = (
             </Grid>
         </Center>
     );
-};
+}
-export default Trade;
 
 interface QuantityProps {
     min: number;