hook up more parts

shapeshift · Jan 8, 2024 · f81c38b · f81c38b
1 parent 36c9199
commit f81c38b
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 45 deletions.
diff --git a/src/components/AssetSelection.tsx b/src/components/AssetSelection.tsx
@@ -3,14 +3,21 @@ import { Avatar, Button, Text } from '@chakra-ui/react'
 type AssetSelectionProps = {
   onClick: () => void
   label: string
+  assetIcon: string
+  assetName: string
 }
 
-export const AssetSelection: React.FC<AssetSelectionProps> = ({ label, onClick }) => {
+export const AssetSelection: React.FC<AssetSelectionProps> = ({
+  label,
+  onClick,
+  assetIcon,
+  assetName,
+}) => {
   return (
     <Button flexDir='column' height='auto' py={4} gap={4} flex={1} onClick={onClick}>
       <Text color='text.subtle'>{label}</Text>
-      <Avatar />
-      <Text>Bitcoin</Text>
+      <Avatar src={assetIcon} />
+      <Text>{assetName}</Text>
     </Button>
   )
 }
diff --git a/src/components/SelectPair.tsx b/src/components/SelectPair.tsx
@@ -2,6 +2,7 @@ import { Button, Card, CardBody, Flex, Heading, IconButton } from '@chakra-ui/re
 import { useCallback, useMemo } from 'react'
 import { FaArrowRightArrowLeft } from 'react-icons/fa6'
 import { useNavigate } from 'react-router-dom'
+import { BTCImage, ETHImage } from 'lib/const'
 
 import { AssetSelection } from './AssetSelection'
 
@@ -26,9 +27,19 @@ export const SelectPair = () => {
           Choose which assets to trade
         </Heading>
         <Flex alignItems='center' gap={4} color='text.subtle' width='full'>
-          <AssetSelection label='Deposit' onClick={handleFromAssetClick} />
+          <AssetSelection
+            label='Deposit'
+            onClick={handleFromAssetClick}
+            assetIcon={BTCImage}
+            assetName='Bitcoin'
+          />
           <IconButton variant='ghost' icon={switchIcon} aria-label='Switch assets' />
-          <AssetSelection label='Recieve' onClick={handleToAssetClick} />
+          <AssetSelection
+            label='Recieve'
+            onClick={handleToAssetClick}
+            assetIcon={ETHImage}
+            assetName='Ethereum'
+          />
         </Flex>
         <Button size='lg' colorScheme='blue' onClick={handleSubmit}>
           Continue

diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
@@ -5,6 +5,7 @@ import {
   CardFooter,
   CardHeader,
   Center,
+  Collapse,
   Divider,
   Flex,
   IconButton,
@@ -74,47 +75,49 @@ export const Status = () => {
         <Text color='text.subtle'>TX ID</Text>
         <Text>0x124567</Text>
       </CardHeader>
-      <CardBody display='flex' flexDir='row-reverse' gap={6} px={4}>
-        <Flex flexDir='column' gap={4}>
-          <Center boxSize='150px' bg='background.surface.raised.base' borderRadius='xl' />
-          <Tag colorScheme='green' size='sm' justifyContent='center'>
-            Time remaining 06:23
-          </Tag>
-        </Flex>
-        <Stack spacing={4} flex={1}>
-          <Stack>
-            <Text fontWeight='bold'>Send</Text>
-            <Flex alignItems='center' gap={2}>
-              <Avatar size='sm' src={BTCImage} />
-              <Text>0.002 BTC</Text>
-            </Flex>
-          </Stack>
-          <Stack>
-            <Text fontWeight='bold'>To</Text>
-            <InputGroup>
-              <Input isReadOnly value='bc1q8n6t65jpm6k0...x7gl' />
-              <InputRightElement>
-                <IconButton
-                  borderRadius='lg'
-                  size='sm'
-                  variant='ghost'
-                  icon={isToAddressCopied ? CheckIcon : CopyIcon}
-                  aria-label='Copy address'
-                  onClick={handleCopyToAddress}
-                />
-              </InputRightElement>
-            </InputGroup>
-          </Stack>
-          <Divider borderColor='border.base' />
-          <Stack>
-            <Text fontWeight='bold'>You will receive</Text>
-            <Flex gap={2} alignItems='center'>
-              <Avatar size='xs' src={ETHImage} />
-              <Text>0.000158162 ETH</Text>
-            </Flex>
+      <Collapse in={activeStep === 0}>
+        <CardBody display='flex' flexDir='row-reverse' gap={6} px={4}>
+          <Flex flexDir='column' gap={4}>
+            <Center boxSize='150px' bg='background.surface.raised.base' borderRadius='xl' />
+            <Tag colorScheme='green' size='sm' justifyContent='center'>
+              Time remaining 06:23
+            </Tag>
+          </Flex>
+          <Stack spacing={4} flex={1}>
+            <Stack>
+              <Text fontWeight='bold'>Send</Text>
+              <Flex alignItems='center' gap={2}>
+                <Avatar size='sm' src={BTCImage} />
+                <Text>0.002 BTC</Text>
+              </Flex>
+            </Stack>
+            <Stack>
+              <Text fontWeight='bold'>To</Text>
+              <InputGroup>
+                <Input isReadOnly value='bc1q8n6t65jpm6k0...x7gl' />
+                <InputRightElement>
+                  <IconButton
+                    borderRadius='lg'
+                    size='sm'
+                    variant='ghost'
+                    icon={isToAddressCopied ? CheckIcon : CopyIcon}
+                    aria-label='Copy address'
+                    onClick={handleCopyToAddress}
+                  />
+                </InputRightElement>
+              </InputGroup>
+            </Stack>
+            <Divider borderColor='border.base' />
+            <Stack>
+              <Text fontWeight='bold'>You will receive</Text>
+              <Flex gap={2} alignItems='center'>
+                <Avatar size='xs' src={ETHImage} />
+                <Text>0.000158162 ETH</Text>
+              </Flex>
+            </Stack>
           </Stack>
-        </Stack>
-      </CardBody>
+        </CardBody>
+      </Collapse>
       <StatusStepper steps={steps} activeStep={activeStep} />
       <CardFooter
         flexDir='column'