Confirm popup

.gitignore

@@ -1,6 +1,7 @@
 .idea
 .vscode
 .eslintcache
+.env
 
 # dependencies
 /node_modules

src/components/AccountModal.js → src/components/AccountModal/index.js

@@ -23,7 +23,7 @@ export default function AccountModal({ address, onboard }) {
   return (
     <>
       <Button size="md" colorScheme="blue" variant="solid" fontFamily="Poppins" onClick={onOpen}>
-        {`${address?.substr(0, 6)}...${address?.substr(address.length - 4)}`}
+        {address?.substr(0, 6)}...{address?.substr(address.length - 4)}
       </Button>
 
       <Modal onClose={onClose} isOpen={isOpen} isCentered>
@@ -36,10 +36,10 @@ export default function AccountModal({ address, onboard }) {
           <ModalBody>
             <Box borderColor="grey.200" borderWidth={1} borderRadius={20} padding={6}>
               <Text fontSize="sm" fontFamily="Poppins" fontWeight="500">
-                Connected Wallet: {`${walletState.wallet.name}`}
+                Connected Wallet: {walletState.wallet.name}
               </Text>
               <Text fontSize="1.6em" fontFamily="Poppins" fontWeight="500">
-                {`${address?.substr(0, 8)}...${address?.substr(address.length - 6)}`}
+                {address?.substr(0, 8)}...{address?.substr(address.length - 6)}
               </Text>
               <Button fontSize="sm" fontFamily="Poppins" variant="link" onClick={onCopy}>
                 <CopyIcon mr={1} /> Copy Address

src/components/FullPageErrorFallback.js → src/components/FullPageErrorFallback/index.js

@@ -1,9 +1,7 @@
-/* eslint-disable no-console */
 import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
 import React from 'react';
 
-export default function FullPageSpinner({ error }) {
-  console.log('🚀 ~ file: FullPageErrorFallback.js ~ line 5 ~ FullPageSpinner ~ error', error);
+export default function FullPageErrorFallback({ error }) {
   return (
     <>
       <Alert status="error">

src/components/FullPageSpinner.js → src/components/FullPageSpinner/index.js

@@ -3,10 +3,10 @@ import { Spinner, Center, Text, VStack } from '@chakra-ui/react';
 
 export default function FullPageSpinner() {
   return (
-    <Center h="100vh">
+    <Center mt="50%">
       <VStack spacing={6}>
         <Spinner />
-        <Text>Connecting to Metamask</Text>
+        <Text>Loading Application</Text>
       </VStack>
     </Center>
   );

src/components/NavBar.js → src/components/NavBar/index.js

@@ -10,21 +10,19 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Spinner,
   Stack,
   Text,
   useColorModeValue,
   useDisclosure,
-  Spinner,
-  Image,
 } from '@chakra-ui/react';
 import React from 'react';
-
-import AccountModal from './AccountModal';
+import AccountModal from '../AccountModal';
 
 const NAV_ITEMS = [
   {
     label: 'Home',
-    href: 'https://www.okcoin.com',
+    href: 'https://okcoin-landing.vercel.app',
   },
   {
     label: 'Apps',
@@ -83,19 +81,26 @@ export default function Navbar({ address, balance, onboard, web3 }) {
         </Flex>
 
         {address && onboard && (
-          <Stack flex={{ base: 1, md: 0 }} justify="flex-end" direction="row" spacing={2}>
-            <Flex align="center">
-              <Text fontFamily="Poppins" fontWeight="600" color="gray.700" size="sm">
-                {typeof balance === 'string' ? (
-                  `${parseFloat(web3.utils.fromWei(balance, 'ether')).toPrecision(6)}`
-                ) : (
-                  <Spinner size="xs" />
-                )}
-              </Text>
+          <Stack
+            flex={{ base: 1, md: 0 }}
+            justify="flex-end"
+            direction="row"
+            spacing={2}
+            align="center"
+          >
+            <>
+              {typeof balance === 'string' ? (
+                <Text fontFamily="Poppins" fontWeight="600" color="gray.700" size="sm">
+                  {parseFloat(web3.utils.fromWei(balance, 'ether')).toPrecision(6)}
+                </Text>
+              ) : (
+                <Spinner size="xs" />
+              )}
+
               <Text fontFamily="Poppins" fontWeight="700" color="gray.700" size="sm" ml={1}>
                 ETH
               </Text>
-            </Flex>
+            </>
             <AccountModal address={address} onboard={onboard} />
           </Stack>
         )}
@@ -111,7 +116,6 @@ export default function Navbar({ address, balance, onboard, web3 }) {
 const DesktopNav = () => {
   return (
     <Stack direction="row" spacing={4} alignItems="center">
-      <Image src="/static/okcoin_icon.png" style={{ height: '30px', width: '130px' }} />
       {NAV_ITEMS.map((navItem) => (
         <Box key={navItem.label}>
           <Popover trigger="hover" placement="bottom-start">

src/components/SwapForm/SourceInfo.js

@@ -15,11 +15,10 @@ export default function SourceInfo({ exchanges, defaults }) {
         exchanges
           .sort((a, b) => parseFloat(b.proportion) - parseFloat(a.proportion))
           .map((item) => (
-            <Flex alignItems="center">
-              <Image src={Exchanges.data[item.name].iconSVG} width="25px" height="25px" m={1} />
+            <Flex alignItems="center" key={item.name}>
+              <Image src={Exchanges.data[item.name]?.iconSVG} width="25px" height="25px" m={1} />
               <Text style={{ fontWeight: 'bold', marginLeft: 5, fontFamily: 'Poppins' }}>
-                {Exchanges.data[item.name].name}
-                {` (${parseFloat(item.proportion * 100).toFixed(3)}%)`}
+                {Exchanges.data[item?.name]?.name} ({parseFloat(item.proportion * 100).toFixed(3)}%)
               </Text>
             </Flex>
           ))

src/components/SwapForm/SwapButton.js

@@ -0,0 +1,33 @@
+import { Button } from '@chakra-ui/react';
+import React from 'react';
+
+export default function SwapButton({
+  disabled,
+  isLoading,
+  loadingText,
+  buttonText,
+  onClick,
+  type,
+}) {
+  return (
+    <Button
+      w="100%"
+      h="60px"
+      _hover={{ backgroundColor: '#194BB6' }}
+      backgroundColor="#205FEC"
+      color="white"
+      size="lg"
+      mt={6}
+      mb={10}
+      fontFamily="Poppins"
+      fontWeight="600"
+      disabled={disabled}
+      isLoading={isLoading}
+      loadingText={loadingText}
+      onClick={onClick}
+      type={type}
+    >
+      {buttonText}
+    </Button>
+  );
+}