diff --git a/src/Routes/RoutesCommon.tsx b/src/Routes/RoutesCommon.tsx
index 28a02616ec7..d1f476bf00f 100644
--- a/src/Routes/RoutesCommon.tsx
+++ b/src/Routes/RoutesCommon.tsx
@@ -9,6 +9,7 @@ import {
   FaWallet,
   FaWater,
 } from 'react-icons/fa'
+import { GrSync } from 'react-icons/gr'
 import { AssetsIcon } from 'components/Icons/Assets'
 import { DashboardIcon } from 'components/Icons/Dashboard'
 import { Account } from 'pages/Accounts/Account'
@@ -25,6 +26,7 @@ import { LiquidityPools } from 'pages/Defi/views/LiquidityPools'
 import { Overview } from 'pages/Defi/views/Overview'
 import { StakingVaults } from 'pages/Defi/views/StakingVaults'
 import { Flags } from 'pages/Flags/Flags'
+import { SimpleSwap } from 'pages/Swap/SimpleSwap'
 import { TransactionHistory } from 'pages/TransactionHistory/TransactionHistory'
 
 import { Route as NestedRoute } from './helpers'
@@ -156,4 +158,10 @@ export const routes: Array<NestedRoute> = [
       window.location.hostname !== getConfig().REACT_APP_LOCAL_IP,
     main: Flags,
   },
-]
+  {
+    path: '/swap',
+    label: 'navBar.swap',
+    icon: <GrSync className='grSync' />,
+    main: SimpleSwap,
+  },
+]
\ No newline at end of file
diff --git a/src/assets/og-logo.png b/src/assets/og-logo.png
new file mode 100644
index 00000000000..3c19d8092e9
Binary files /dev/null and b/src/assets/og-logo.png differ
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 428d768cd9a..50ca7cdb3a3 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -332,7 +332,8 @@
     "foxToken": "FOX Opportunities",
     "featureFlags": "Feature Flags",
     "demoMode": "Demo Mode",
-    "clickToConnect": "Click to connect a wallet"
+    "clickToConnect": "Click to connect a wallet",
+    "swap": "Swap"
   },
   "transactionRow": {
     "send": "Sent %{symbol}",
@@ -1272,5 +1273,58 @@
         "neverSellData": "Never sell data for profit"
       }
     }
+  },
+  "simpleSwap": {
+    "links": {
+      "fullPlatform": "Full Platform",
+      "connectWallet": "Connect Wallet"
+    },
+    "classic": {
+      "buyInstantly": "Buy Coins Instantly",
+      "noAccountNeeded": "No Account Needed",
+      "testimonial": "\"I've been waiting for a service like this. Great job!\" - Charlie Lee, Creator of Litecoin",
+      "yourTradeIs": "Your Trade is ",
+      "processing": "processing...",
+      "complete": "COMPLETE!",
+      "pending": "pending...",
+      "transaction": "Transaction",
+      "quote": "When law and morality contradict each other, the citizen has the cruel alternative of either losing his moral sense or losing his respect for the law. -Bastiat",
+      "sell": {
+        "title": "Deposit",
+        "inputLabel": "Deposit amount:",
+        "inputPlaceholder": "Dep amount",
+        "footerLabel": "Exchange Rate"
+      },
+      "buy": {
+        "title": "Receive",
+        "inputLabel": "You will receive:",
+        "footerLabel": "Your Receive Address",
+        "cta": "Start"
+      }
+    },
+    "modern": {
+      "start": "Start",
+      "yourTradeIs": "Your Trade is ",
+      "processing": "Processing",
+      "complete": "Complete",
+      "pending": "pending...",
+      "sovereign": "Thank You for Being a Sovereign Individual.",
+      "executeTrade": "Execute Trade",
+      "sell": {
+        "title": "Sell",
+        "walletBalance": "Wallet Balance"
+      },
+      "buy": {
+        "title": "Buy",
+        "youGet": "You Get",
+        "exchangeRate": "Exchange Rate",
+        "deliveredTo": "Delivered to"
+      }
+    },
+    "currency": {
+      "litecoin": "Litecoin",
+      "bitcoin": "Bitcoin",
+      "ethereum": "Ethereum"
+    }
   }
 }
diff --git a/src/pages/Swap/SimpleSwap.css b/src/pages/Swap/SimpleSwap.css
new file mode 100644
index 00000000000..088074d6db2
--- /dev/null
+++ b/src/pages/Swap/SimpleSwap.css
@@ -0,0 +1,7 @@
+.grSync path {
+  stroke: var(--chakra-colors-gray-500)
+}
+
+.grSync-white path {
+  stroke: #fff;
+}
diff --git a/src/pages/Swap/SimpleSwap.tsx b/src/pages/Swap/SimpleSwap.tsx
new file mode 100644
index 00000000000..8f2962e0d67
--- /dev/null
+++ b/src/pages/Swap/SimpleSwap.tsx
@@ -0,0 +1,227 @@
+import './SimpleSwap.css'
+
+import { Box, Flex, Grid, GridItem } from '@chakra-ui/layout'
+import { Switch, useMediaQuery } from '@chakra-ui/react'
+import { useState } from 'react'
+import { Page } from 'components/Layout/Page'
+import { breakpoints } from 'theme/theme'
+
+import { CenterColumn } from './components/CenterColumn'
+import { CenterRow } from './components/CenterRow'
+import { ClassicVersionTradeSubmitted } from './components/ClassicVersionTradeSubmitted'
+import { MobileFooter } from './components/MobileFooter'
+import { OGHeader } from './components/OGHeader'
+import { SwapCardSwitch } from './components/SwapCardSwitch'
+import {
+  BODY_PADDING_TOP,
+  DEFAULT_BUY_ASSET,
+  DEFAULT_SELL_ASSET,
+  OG_COLORS,
+  PAGE_HEIGHT_OFFSET_CLASSIC,
+  PAGE_HEIGHT_OFFSET_MOBILE,
+  PAGE_HEIGHT_OFFSET_MODERN,
+  PAGE_MARGIN_TOP_MODERN,
+  TRADE_STEPS_CLASSIC,
+  TRADE_STEPS_MODERN,
+} from './constants'
+
+export const SimpleSwap = () => {
+  const [shouldShowClassicVersion, setShouldShowClassicVerion] = useState(false)
+  const [currentStepIndex, setCurrentStepIndex] = useState(0)
+  const [sellAsset, setSellAsset] = useState(DEFAULT_SELL_ASSET)
+  const [buyAsset, setBuyAsset] = useState(DEFAULT_BUY_ASSET)
+
+  const stepsList = shouldShowClassicVersion ? TRADE_STEPS_CLASSIC : TRADE_STEPS_MODERN
+  const currentStep = stepsList[currentStepIndex]
+  const bgColor = shouldShowClassicVersion ? OG_COLORS.lightBlue : OG_COLORS.darkBlue
+  const hasSubmittedTrade = currentStep === 'processing' || currentStep === 'complete'
+  const isInitialStep = currentStep === 'initial'
+  const isFinalStep = currentStep === 'complete'
+  const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`)
+
+  const handleClickNext = () => {
+    // TODO: This logic will be updated once we integrate with THORchain. For now it just uses
+    // timers to demo the progression through the flow
+    if (shouldShowClassicVersion) {
+      setCurrentStepIndex(1)
+
+      setTimeout(() => {
+        setCurrentStepIndex(2)
+      }, 3000)
+
+      return
+    }
+
+    if (isInitialStep) {
+      setCurrentStepIndex(currentStepIndex + 1)
+      return
+    }
+
+    setCurrentStepIndex(2)
+
+    setTimeout(() => {
+      setCurrentStepIndex(3)
+    }, 3000)
+  }
+
+  // const handleClickPrevious = () => {
+  //   setCurrentStepIndex(currentStepIndex - 1)
+  // }
+
+  const handleClickSwitchVersions = () => {
+    setShouldShowClassicVerion(!shouldShowClassicVersion)
+    setCurrentStepIndex(0)
+  }
+
+  const handleClickSwitchAssets = () => {
+    const originalBuyAsset = buyAsset
+    setBuyAsset(sellAsset)
+    setSellAsset(originalBuyAsset)
+  }
+
+  const handleSelectSellAsset = (asset: string) => {
+    if (!asset) {
+      setSellAsset(DEFAULT_SELL_ASSET)
+      return
+    }
+
+    if (asset === buyAsset) {
+      handleClickSwitchAssets()
+      return
+    }
+    setSellAsset(asset)
+  }
+
+  const handleSelectBuyAsset = (asset: string) => {
+    if (!asset) {
+      setSellAsset(DEFAULT_BUY_ASSET)
+      return
+    }
+
+    if (asset === sellAsset) {
+      handleClickSwitchAssets()
+      return
+    }
+    setBuyAsset(asset)
+  }
+
+  const renderClassicVersionNextSteps = () => {
+    return (
+      <>
+        <ClassicVersionTradeSubmitted
+          buyAsset={buyAsset}
+          sellAsset={sellAsset}
+          currentStep={currentStep}
+        />
+        <Flex>
+          <Switch
+            margin='0 auto'
+            size='sm'
+            colorScheme={OG_COLORS.lightBlue}
+            bottom={8}
+            isChecked={shouldShowClassicVersion}
+            onChange={handleClickSwitchVersions}
+          />
+        </Flex>
+      </>
+    )
+  }
+
+  const renderSteps = () => {
+    if (shouldShowClassicVersion && !isInitialStep) {
+      return renderClassicVersionNextSteps()
+    }
+
+    return (
+      <Grid
+        height={{
+          base: shouldShowClassicVersion ? '70vh' : `calc(100vh - ${PAGE_HEIGHT_OFFSET_MOBILE})`,
+          md: shouldShowClassicVersion
+            ? `calc(100vh - ${PAGE_HEIGHT_OFFSET_CLASSIC})`
+            : `calc(100vh - ${PAGE_HEIGHT_OFFSET_MODERN})`,
+        }}
+        templateColumns={{
+          base: '1fr',
+          md: 'repeat(11, 1fr)',
+        }}
+        mt={{
+          base: '0',
+          md: shouldShowClassicVersion ? '0' : PAGE_MARGIN_TOP_MODERN,
+        }}
+        gap={0}
+      >
+        <GridItem margin={{ base: '0 auto', md: '0' }} colSpan={{ base: 1, md: 5 }}>
+          <Flex justifyContent='flex-end'>
+            <SwapCardSwitch
+              role='sell'
+              selectedAsset={sellAsset}
+              setAsset={handleSelectSellAsset}
+              selectedOtherAsset={buyAsset}
+              shouldShowClassicVersion={shouldShowClassicVersion}
+              currentStep={stepsList[currentStepIndex]}
+              // receiveAmount={}
+              // exchangeRate={}
+            />
+          </Flex>
+        </GridItem>
+        <GridItem colSpan={1} margin={hasSubmittedTrade ? '0 30px' : '0 40px'} bg={bgColor}>
+          {isLargerThanMd ? (
+            <CenterColumn
+              currentStep={currentStep}
+              handleClickNext={handleClickNext}
+              isFinalStep={isFinalStep}
+              isInitialStep={isInitialStep}
+              shouldShowClassicVersion={shouldShowClassicVersion}
+              handleClickSwitchAssets={handleClickSwitchAssets}
+              handleClickSwitchVersions={handleClickSwitchVersions}
+              hasSubmittedTrade={hasSubmittedTrade}
+            />
+          ) : (
+            <CenterRow
+              currentStep={currentStep}
+              isFinalStep={isFinalStep}
+              shouldShowClassicVersion={shouldShowClassicVersion}
+              handleClickSwitchAssets={handleClickSwitchAssets}
+              hasSubmittedTrade={hasSubmittedTrade}
+            />
+          )}
+        </GridItem>
+        <GridItem margin={{ base: '0 auto', md: '0' }} colSpan={{ base: 1, md: 5 }}>
+          <Flex justifyContent='flex-start'>
+            <SwapCardSwitch
+              role='buy'
+              selectedAsset={buyAsset}
+              setAsset={handleSelectBuyAsset}
+              selectedOtherAsset={sellAsset}
+              shouldShowClassicVersion={shouldShowClassicVersion}
+              handleClickNext={handleClickNext}
+              currentStep={stepsList[currentStepIndex]}
+              // receiveAmount={}
+              // exchangeRate={}
+            />
+          </Flex>
+        </GridItem>
+        {!isLargerThanMd && (
+          <MobileFooter
+            handleClickNext={handleClickNext}
+            isInitialStep={isInitialStep}
+            shouldShowClassicVersion={shouldShowClassicVersion}
+            handleClickSwitchVersions={handleClickSwitchVersions}
+            hasSubmittedTrade={hasSubmittedTrade}
+          />
+        )}
+      </Grid>
+    )
+  }
+
+  return (
+    <Page>
+      <Flex direction='column'>
+        {shouldShowClassicVersion && <OGHeader />}
+        <Box bg={bgColor} paddingTop={shouldShowClassicVersion ? BODY_PADDING_TOP : '0'}>
+          {renderSteps()}
+        </Box>
+      </Flex>
+    </Page>
+  )
+}
diff --git a/src/pages/Swap/components/CenterColumn.tsx b/src/pages/Swap/components/CenterColumn.tsx
new file mode 100644
index 00000000000..e5743e49860
--- /dev/null
+++ b/src/pages/Swap/components/CenterColumn.tsx
@@ -0,0 +1,143 @@
+import '../SimpleSwap.css'
+
+import { Box, Button, Flex, Switch } from '@chakra-ui/react'
+import { GrSync } from 'react-icons/gr'
+import { ImArrowRight } from 'react-icons/im'
+import { FoxIcon } from 'components/Icons/FoxIcon'
+import { Text } from 'components/Text'
+
+import { OG_COLORS } from '../constants'
+
+type CenterColumnProps = {
+  currentStep: string
+  handleClickNext: () => void
+  isFinalStep: boolean
+  isInitialStep: boolean
+  shouldShowClassicVersion: boolean
+  handleClickSwitchAssets: () => void
+  handleClickSwitchVersions: () => void
+  hasSubmittedTrade: boolean
+}
+
+export const CenterColumn = ({
+  currentStep,
+  handleClickNext,
+  isFinalStep,
+  isInitialStep,
+  shouldShowClassicVersion,
+  handleClickSwitchAssets,
+  handleClickSwitchVersions,
+  hasSubmittedTrade,
+}: CenterColumnProps) => {
+  const renderModernSkinCta = () => {
+    if (hasSubmittedTrade) {
+      return false
+    }
+
+    return (
+      <Button
+        height='20px'
+        variant='outline'
+        border='.5px lightblue solid'
+        borderRadius='6px'
+        borderColor='lightblue'
+        fontSize='10px'
+        p={isInitialStep ? '12px 25px' : '8px'}
+        color='white'
+        onClick={handleClickNext}
+      >
+        <Text
+          translation={isInitialStep ? 'simpleSwap.modern.start' : 'simpleSwap.modern.executeTrade'}
+        />
+      </Button>
+    )
+  }
+
+  if (shouldShowClassicVersion) {
+    return (
+      <Flex
+        height='100%'
+        direction='column'
+        justifyContent='flex-start'
+        alignItems='center'
+        position='relative'
+      >
+        <Flex direction='column' height='200px' justifyContent='center' alignItems='center'>
+          <ImArrowRight
+            cursor='pointer'
+            onClick={handleClickSwitchAssets}
+            color={OG_COLORS.lighterBlue}
+            size={40}
+          />
+        </Flex>
+        <Switch
+          size='sm'
+          colorScheme={OG_COLORS.lightBlue}
+          position='absolute'
+          bottom={8}
+          isChecked={shouldShowClassicVersion}
+          onChange={handleClickSwitchVersions}
+        />
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex
+      height='100%'
+      direction='column'
+      justifyContent='flex-start'
+      alignItems='center'
+      position='relative'
+    >
+      <Flex
+        direction='column'
+        height={isInitialStep ? '186px' : '240px'}
+        justifyContent='space-between'
+        alignItems='center'
+      >
+        <Flex
+          position='relative'
+          direction='column'
+          justifyContent='flex-start'
+          alignItems='center'
+          marginBottom={isInitialStep ? '58px' : '125px'}
+        >
+          <FoxIcon boxSize='35px' marginBottom='55px' />
+          {hasSubmittedTrade ? (
+            <Box fontSize='xs' whiteSpace='nowrap' textAlign='center'>
+              <Text as='span' translation='simpleSwap.modern.yourTradeIs' />
+              <Text as='span' fontWeight='bold' translation={`simpleSwap.modern.${currentStep}`} />
+              {isFinalStep && (
+                <Text
+                  fontSize='xs'
+                  translation='simpleSwap.modern.sovereign'
+                  whiteSpace='normal'
+                  width='160px'
+                  textAlign='center'
+                  marginTop='57px'
+                />
+              )}
+            </Box>
+          ) : (
+            <GrSync
+              cursor='pointer'
+              onClick={handleClickSwitchAssets}
+              size={25}
+              className='grSync-white'
+            />
+          )}
+        </Flex>
+        {renderModernSkinCta()}
+      </Flex>
+      <Switch
+        size='sm'
+        position='absolute'
+        bottom={8}
+        isChecked={shouldShowClassicVersion}
+        colorScheme={OG_COLORS.darkBlue}
+        onChange={handleClickSwitchVersions}
+      />
+    </Flex>
+  )
+}
diff --git a/src/pages/Swap/components/CenterRow.tsx b/src/pages/Swap/components/CenterRow.tsx
new file mode 100644
index 00000000000..edaf5cd6c9a
--- /dev/null
+++ b/src/pages/Swap/components/CenterRow.tsx
@@ -0,0 +1,60 @@
+import '../SimpleSwap.css'
+
+import { Box, Flex } from '@chakra-ui/react'
+import { GrSync } from 'react-icons/gr'
+import { ImArrowRight } from 'react-icons/im'
+import { Text } from 'components/Text'
+
+import { OG_COLORS } from '../constants'
+
+type CenterRowProps = {
+  currentStep: string
+  isFinalStep: boolean
+  shouldShowClassicVersion: boolean
+  handleClickSwitchAssets: () => void
+  hasSubmittedTrade: boolean
+}
+
+export const CenterRow = ({
+  currentStep,
+  isFinalStep,
+  shouldShowClassicVersion,
+  handleClickSwitchAssets,
+  hasSubmittedTrade,
+}: CenterRowProps) => {
+  if (shouldShowClassicVersion) {
+    return (
+      <Flex direction='row' height='70px' justifyContent='center' alignItems='center'>
+        <ImArrowRight
+          style={{ cursor: 'pointer' }}
+          onClick={handleClickSwitchAssets}
+          color={OG_COLORS.lighterBlue}
+          size={50}
+        />
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex direction='row' justifyContent='center' alignItems='center'>
+      {hasSubmittedTrade ? (
+        <Box fontSize='xs'>
+          <Text as='span' translation='simpleSwap.modern.yourTradeIs' />
+          <Text as='span' fontWeight='bold' translation={`simpleSwap.modern.${currentStep}`} />
+          {isFinalStep && (
+            <Text
+              fontSize='xs'
+              translation='simpleSwap.modern.sovereign'
+              width='160px'
+              textAlign='center'
+              marginLeft='-10px'
+              marginTop={4}
+            />
+          )}
+        </Box>
+      ) : (
+        <GrSync className='grSync-white' onClick={handleClickSwitchAssets} size={25} />
+      )}
+    </Flex>
+  )
+}
diff --git a/src/pages/Swap/components/ClassicVersionTradeSubmitted.tsx b/src/pages/Swap/components/ClassicVersionTradeSubmitted.tsx
new file mode 100644
index 00000000000..cb26d0eae7b
--- /dev/null
+++ b/src/pages/Swap/components/ClassicVersionTradeSubmitted.tsx
@@ -0,0 +1,125 @@
+import '../SimpleSwap.css'
+
+import { Box, Flex, Text as CText } from '@chakra-ui/react'
+import { ImArrowRight } from 'react-icons/im'
+import { AssetIcon } from 'components/AssetIcon'
+import { Text } from 'components/Text'
+
+import { OG_COLORS } from '../constants'
+import {
+  DEFAULT_RECEIVE_AMOUNT,
+  DEFAULT_RECEIVE_TX_ID,
+  DEFAULT_SELL_AMOUNT,
+  DEFAULT_SELL_TX_ID,
+  PAGE_HEIGHT_OFFSET_CLASSIC,
+} from '../constants'
+
+type ClassicVersionTradeSubmittedProps = {
+  currentStep: string
+  buyAsset: string
+  sellAsset: string
+}
+
+export const ClassicVersionTradeSubmitted = ({
+  currentStep,
+  buyAsset,
+  sellAsset,
+}: ClassicVersionTradeSubmittedProps) => {
+  return (
+    <Flex height={`calc(100vh - ${PAGE_HEIGHT_OFFSET_CLASSIC})`} justifyContent='center'>
+      <Box
+        width='490px'
+        height='340px'
+        margin='0 1rem'
+        mt='25px'
+        border='4px solid'
+        borderColor={OG_COLORS.lighterBlue}
+      >
+        <Box height='30px' backgroundColor={OG_COLORS.darkBlue} />
+        <Flex height='272px' padding='15px' flexDirection='column' alignItems='center'>
+          <Flex mb='12px'>
+            <AssetIcon symbol={sellAsset} boxSize='45px' />
+            <Box mx='15px'>
+              <ImArrowRight color={OG_COLORS.lighterBlue} size={35} />
+            </Box>
+            <AssetIcon symbol={buyAsset} boxSize='45px' />
+          </Flex>
+          <Box fontSize='xs' mb={1}>
+            <Text as='span' fontWeight='bold' translation='simpleSwap.classic.yourTradeIs' />
+            <Text as='span' fontWeight='bold' translation={`simpleSwap.classic.${currentStep}`} />
+          </Box>
+
+          <Box ml='-10px'>
+            <Flex direction='column' mb='16px'>
+              <CText>
+                <CText lineHeight='1' as='span' fontSize='8px' fontWeight='bold'>
+                  {sellAsset.toUpperCase()}{' '}
+                </CText>
+                <Text
+                  as='span'
+                  fontSize='8px'
+                  fontWeight='bold'
+                  translation='simpleSwap.classic.transaction'
+                ></Text>
+              </CText>
+              <CText lineHeight='1.3' fontWeight='light' fontSize='xs'>
+                {DEFAULT_SELL_TX_ID}
+              </CText>
+              <CText lineHeight='.4'>
+                <CText as='span' fontSize='8px' fontWeight='bold'>
+                  {DEFAULT_SELL_AMOUNT}{' '}
+                </CText>
+                <CText as='span' fontSize='8px' fontWeight='bold'>
+                  {sellAsset.toUpperCase()}
+                </CText>
+              </CText>
+            </Flex>
+
+            <Flex direction='column' mb={8}>
+              <CText>
+                <CText lineHeight='1' as='span' fontSize='8px' fontWeight='bold'>
+                  {buyAsset.toUpperCase()}{' '}
+                </CText>
+                <Text
+                  as='span'
+                  fontSize='8px'
+                  fontWeight='bold'
+                  translation='simpleSwap.classic.transaction'
+                ></Text>
+              </CText>
+              {currentStep !== 'complete' ? (
+                <Text fontSize='xs' translation='simpleSwap.classic.pending' />
+              ) : (
+                <>
+                  <CText lineHeight='1.3' fontWeight='light' fontSize='xs'>
+                    {DEFAULT_RECEIVE_TX_ID}
+                  </CText>
+                  <CText lineHeight='.4'>
+                    <CText as='span' fontSize='8px' fontWeight='bold'>
+                      {DEFAULT_RECEIVE_AMOUNT}{' '}
+                    </CText>
+                    <CText as='span' fontSize='8px' fontWeight='bold'>
+                      {buyAsset.toUpperCase()}
+                    </CText>
+                  </CText>
+                </>
+              )}
+            </Flex>
+          </Box>
+
+          {currentStep === 'complete' && (
+            <Text
+              mb={1}
+              textAlign='center'
+              margin='0 auto'
+              width='290px'
+              fontSize='7px'
+              translation='simpleSwap.classic.quote'
+            />
+          )}
+        </Flex>
+        <Box height='30px' backgroundColor={OG_COLORS.darkBlue} />
+      </Box>
+    </Flex>
+  )
+}
diff --git a/src/pages/Swap/components/MobileFooter.tsx b/src/pages/Swap/components/MobileFooter.tsx
new file mode 100644
index 00000000000..8a4003a3b66
--- /dev/null
+++ b/src/pages/Swap/components/MobileFooter.tsx
@@ -0,0 +1,70 @@
+import '../SimpleSwap.css'
+
+import { Flex } from '@chakra-ui/layout'
+import { Button, Switch } from '@chakra-ui/react'
+import { Text } from 'components/Text'
+
+import { OG_COLORS } from '../constants'
+
+type MobileFooterProps = {
+  handleClickNext: () => void
+  isInitialStep: boolean
+  shouldShowClassicVersion: boolean
+  handleClickSwitchVersions: () => void
+  hasSubmittedTrade: boolean
+}
+
+export const MobileFooter = ({
+  handleClickNext,
+  isInitialStep,
+  shouldShowClassicVersion,
+  handleClickSwitchVersions,
+  hasSubmittedTrade,
+}: MobileFooterProps) => {
+  if (shouldShowClassicVersion) {
+    return (
+      <Flex h='100%' direction='row' justifyContent='center' alignItems='center'>
+        <Switch
+          size='sm'
+          colorScheme={OG_COLORS.lightBlue}
+          bottom={3}
+          mt={3}
+          isChecked={shouldShowClassicVersion}
+          onChange={handleClickSwitchVersions}
+        />
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex h='100%' direction='column' justifyContent='center' alignItems='center'>
+      {!hasSubmittedTrade && (
+        <Button
+          height='20px'
+          variant='outline'
+          border='.5px lightblue solid'
+          borderRadius='4px'
+          borderColor='lightblue'
+          fontSize='10px'
+          p={isInitialStep ? '8px 20px' : '8px'}
+          mb={8}
+          color='white'
+          onClick={handleClickNext}
+        >
+          <Text
+            translation={
+              isInitialStep ? 'simpleSwap.modern.start' : 'simpleSwap.modern.executeTrade'
+            }
+          />
+        </Button>
+      )}
+      <Switch
+        size='sm'
+        colorScheme={OG_COLORS.lightBlue}
+        bottom={3}
+        isChecked={shouldShowClassicVersion}
+        onChange={handleClickSwitchVersions}
+      />
+    </Flex>
+  )
+}
diff --git a/src/pages/Swap/components/OGHeader.tsx b/src/pages/Swap/components/OGHeader.tsx
new file mode 100644
index 00000000000..9a2911d08d8
--- /dev/null
+++ b/src/pages/Swap/components/OGHeader.tsx
@@ -0,0 +1,44 @@
+import { Box, Center, Stack } from '@chakra-ui/layout'
+import { Image, useMediaQuery } from '@chakra-ui/react'
+import ogLogo from 'assets/og-logo.png'
+import { Text } from 'components/Text'
+import { breakpoints } from 'theme/theme'
+
+import { OG_COLORS } from '../constants'
+
+export const OGHeader = () => {
+  const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`)
+  return (
+    <Center display='flex' height='300px' pt={9} bg={OG_COLORS.darkBlue}>
+      <Stack>
+        <Image
+          src={ogLogo}
+          alt=''
+          htmlWidth={isLargerThanMd ? '550px' : '340px'}
+          margin='0 auto'
+          mt={{ base: '-10px', md: '0' }}
+        />
+        <Box>
+          <Stack mt='0' textAlign='center' alignItems='center'>
+            <Box fontSize={{ base: 'sm', md: 'l' }}>
+              <Text as='i' translation='simpleSwap.classic.buyInstantly' />
+              &nbsp;
+              <Text
+                as='i'
+                color={OG_COLORS.orange}
+                translation='simpleSwap.classic.noAccountNeeded'
+              />
+            </Box>
+            <Text
+              as='i'
+              width={{ base: '300px', md: '100%' }}
+              margin='0 auto'
+              fontSize='xs'
+              translation='simpleSwap.classic.testimonial'
+            />
+          </Stack>
+        </Box>
+      </Stack>
+    </Center>
+  )
+}
diff --git a/src/pages/Swap/components/SwapCardClassic.tsx b/src/pages/Swap/components/SwapCardClassic.tsx
new file mode 100644
index 00000000000..1695b3d98d8
--- /dev/null
+++ b/src/pages/Swap/components/SwapCardClassic.tsx
@@ -0,0 +1,200 @@
+import { Box, Flex } from '@chakra-ui/layout'
+import { Button, Center, Input, Select, Stack, Text as CText } from '@chakra-ui/react'
+import { CSSProperties } from 'react'
+import { GrSync } from 'react-icons/gr'
+import { AssetIcon } from 'components/AssetIcon'
+import { Text } from 'components/Text'
+
+import { OG_COLORS, ROLES } from '../constants'
+
+const DEFAULT_EXC_RATE = 0.00342
+const DEFAULT_RECEIVING_ADDRESS = 'M8DNR...PGPA96'
+const DEFAULT_RECEIVE_AMOUNT = 53.51273
+
+type SwapCardClassicProps = {
+  exchangeRate: number
+  handleClickNext: () => void
+  receiveAmount: number
+  role: string
+  selectedAsset: string
+  selectedOtherAsset: string
+  setAsset: (asset: string) => void
+}
+
+const optionsWrapperStyles: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  pointerEvents: 'none',
+  padding: '8px',
+}
+const isVisible: CSSProperties = {
+  display: 'flex',
+}
+const optionHiddenStyle: CSSProperties = {
+  height: '100%',
+  border: `1px dotted ${OG_COLORS.darkGray}`,
+  boxSizing: 'border-box',
+  display: 'none',
+  padding: '8px',
+}
+
+export const SwapCardClassic = ({
+  role,
+  selectedAsset,
+  selectedOtherAsset,
+  handleClickNext,
+  setAsset,
+  exchangeRate = DEFAULT_EXC_RATE,
+  receiveAmount = DEFAULT_RECEIVE_AMOUNT,
+}: SwapCardClassicProps) => {
+  const isSellRole = role === ROLES.sell
+  const renderTopSectionContent = () => (
+    <Text fontSize='xs' fontWeight='bold' translation={`simpleSwap.classic.${role}.title`} />
+  )
+
+  const renderMiddleSectionContent = () => {
+    const renderAmount = () => {
+      if (isSellRole) {
+        return (
+          <Input
+            style={{
+              fontSize: '12px',
+              color: 'black',
+              marginTop: '0',
+              padding: '0',
+              height: 'auto',
+              borderRadius: '0',
+              backgroundColor: 'white',
+            }}
+          />
+        )
+      }
+      return (
+        <CText fontSize='xs' fontWeight='medium' style={{ marginTop: '0', textAlign: 'right' }}>
+          {receiveAmount}
+        </CText>
+      )
+    }
+
+    return (
+      <>
+        <Box width='183px'>
+          <Box style={{ width: '160px', position: 'relative', padding: '8px' }}>
+            <Select
+              onChange={e => setAsset(e.target.value)}
+              style={{ opacity: '0', width: '100%', padding: '8px' }}
+              rootProps={{
+                style: { padding: '8px' },
+              }}
+              placeholder='Select Token'
+            >
+              <option value='btc'>BTC</option>
+              <option value='eth'>ETH</option>
+              <option value='ltc'>LTC</option>
+            </Select>
+            <div style={optionsWrapperStyles}>
+              <Flex style={{ ...optionHiddenStyle, ...(selectedAsset === 'btc' && isVisible) }}>
+                <AssetIcon mt='2px' symbol='btc' boxSize='30px' />
+                <Flex mt='2px' ml='16px' direction='column'>
+                  <CText fontSize='2xl' fontWeight='bold' lineHeight='.9'>
+                    BTC
+                  </CText>
+                  <CText fontSize='10px'>Bitcoin</CText>
+                </Flex>
+              </Flex>
+              <Flex style={{ ...optionHiddenStyle, ...(selectedAsset === 'eth' && isVisible) }}>
+                <AssetIcon mt='2px' symbol='eth' boxSize='30px' />
+                <Flex ml='16px' mt='2px' direction='column'>
+                  <CText fontSize='2xl' fontWeight='bold' lineHeight='.9'>
+                    ETH
+                  </CText>
+                  <CText fontSize='10px'>Ethereum</CText>
+                </Flex>
+              </Flex>
+              <Flex style={{ ...optionHiddenStyle, ...(selectedAsset === 'ltc' && isVisible) }}>
+                <AssetIcon mt='2px' symbol='ltc' boxSize='30px' />
+                <Flex ml='16px' mt='2px' direction='column'>
+                  <CText fontSize='2xl' fontWeight='bold' lineHeight='.9'>
+                    LTC
+                  </CText>
+                  <CText fontSize='10px'>Litecoin</CText>
+                </Flex>
+              </Flex>
+            </div>
+          </Box>
+        </Box>
+        <Center width='115px'>
+          <Stack>
+            <Text
+              fontSize='xs'
+              mb={isSellRole ? '4px' : '0'}
+              translation={`simpleSwap.classic.${role}.inputLabel`}
+            />
+            {renderAmount()}
+          </Stack>
+        </Center>
+      </>
+    )
+  }
+
+  const renderBottomSectionContent = () => (
+    <>
+      <Flex justifyContent='space-between'>
+        <Flex direction='column' mt={1}>
+          <Text fontSize='10px' translation={`simpleSwap.classic.${role}.footerLabel`} />
+          {isSellRole ? (
+            <Flex>
+              <CText fontSize='xs'>{exchangeRate} </CText>
+              &nbsp;
+              <CText fontSize='xs'>
+                {selectedAsset.toUpperCase()}/{selectedOtherAsset.toUpperCase()}
+              </CText>
+            </Flex>
+          ) : (
+            <Flex>
+              <CText fontSize='xs'>{DEFAULT_RECEIVING_ADDRESS}</CText>
+              <GrSync
+                size={12}
+                style={{ marginTop: '3px', marginLeft: '10px' }}
+                className='grSync-white'
+              />
+            </Flex>
+          )}
+        </Flex>
+        {!isSellRole && (
+          <Button
+            onClick={handleClickNext}
+            fontSize='10px'
+            color='white'
+            backgroundColor={OG_COLORS.green}
+            height='20px'
+            borderRadius='0px'
+            mr='10px'
+            mt='12px'
+          >
+            Start
+          </Button>
+        )}
+      </Flex>
+    </>
+  )
+
+  return (
+    <Box w='300px' height='206px' border='4px solid' borderColor={OG_COLORS.lighterBlue}>
+      <Flex direction='column'>
+        <Flex alignItems='center' height='34px' bg='#021735' pl={3}>
+          <Flex alignItems='center'>{renderTopSectionContent()}</Flex>
+        </Flex>
+        <Flex alignItems='center' height='104px' bg='#27394C' p={3}>
+          {renderMiddleSectionContent()}
+        </Flex>
+        <Box height='60px' bg='#021735' pl={3} py={2}>
+          {renderBottomSectionContent()}
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
diff --git a/src/pages/Swap/components/SwapCardModern.tsx b/src/pages/Swap/components/SwapCardModern.tsx
new file mode 100644
index 00000000000..a84510dfc88
--- /dev/null
+++ b/src/pages/Swap/components/SwapCardModern.tsx
@@ -0,0 +1,237 @@
+import { Box, Flex } from '@chakra-ui/layout'
+import {
+  InputGroup,
+  InputRightElement,
+  NumberInput,
+  NumberInputField,
+  Select,
+  Text as CText,
+} from '@chakra-ui/react'
+import { CSSProperties } from 'react'
+import { AssetIcon } from 'components/AssetIcon'
+import { Text } from 'components/Text'
+import { GrSync } from 'react-icons/gr'
+
+import { ROLES } from '../constants'
+const DEFAULT_WALLET_BALANCE = 1.543265
+const DEFAULT_RECEIVE_AMOUNT = 34.48238
+const DEFAULT_SELL_AMOUNT = 0.2423
+const DEFAULT_EXC_RATE = 0.35823
+const DEFAULT_MODERN_RECEIVE_TX_ID = 'f3j35923...'
+const DEFAULT_MODERN_SELL_TX_ID = '9834hf34...'
+const DEFAULT_RECEIVE_ADDRESS = 'M8Dnk...gPA96';
+
+type SwapCardModernProps = {
+  currentStep: string
+  exchangeRate: number
+  receiveAmount: number
+  role: string
+  selectedAsset: string
+  selectedOtherAsset: string
+  setAsset: (asset: string) => void
+}
+
+export const SwapCardModern = ({
+  currentStep,
+  role,
+  selectedAsset,
+  // selectedOtherAsset,
+  setAsset,
+}: SwapCardModernProps) => {
+  const isSellRole = role === ROLES.sell
+  const hasSubmittedTrade = currentStep === 'processing' || currentStep === 'complete'
+  const isFinalStep = currentStep === 'complete'
+
+  const optionsWrapperStyles: CSSProperties = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    pointerEvents: 'none',
+    padding: '8px',
+  }
+  const isVisible: CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+  const optionStyleHidden: CSSProperties = {
+    height: '100%',
+    boxSizing: 'border-box',
+    display: 'none',
+  }
+
+  const renderPostConfirmationStep = () => {
+    if (!isSellRole) {
+      if (isFinalStep) {
+        return (
+          <Box whiteSpace='nowrap'>
+            <CText fontSize='xs'>{DEFAULT_MODERN_RECEIVE_TX_ID}</CText>
+            <CText width='89px' as='span' fontSize='xs' fontWeight='bold'>
+              {DEFAULT_RECEIVE_AMOUNT} {selectedAsset.toUpperCase()}
+            </CText>
+          </Box>
+        )
+      }
+
+      return (
+        <Box>
+          <Text fontSize='xs' translation='simpleSwap.modern.pending' />
+          <CText width='89px' visibility='hidden' fontSize='xs' fontWeight='bold'>
+            {DEFAULT_SELL_AMOUNT} {selectedAsset.toUpperCase()}
+          </CText>
+        </Box>
+      )
+    }
+
+    return (
+      <Box whiteSpace='nowrap'>
+        <CText fontSize='xs'>{DEFAULT_MODERN_SELL_TX_ID}</CText>
+        <CText width='89px' fontSize='xs' fontWeight='bold'>
+          {DEFAULT_SELL_AMOUNT} {selectedAsset.toUpperCase()}
+        </CText>
+      </Box>
+    )
+  }
+
+  const renderSellConfirmStep = () => (
+    <>
+      <InputGroup mb={1}>
+        <NumberInput
+          borderRadius='3px'
+          boxShadow='3px 2px 1px 1px rgba(0, 0, 0, 0.3)'
+          width='200px'
+          height='30px'
+        >
+          <NumberInputField bgColor='#132444' height='30px' />
+        </NumberInput>
+        <InputRightElement
+          height='30px'
+          pointerEvents='none'
+          children={
+            <CText color='gray.300' fontSize='xs' fontWeight='bold'>
+              {selectedAsset.toUpperCase()}
+            </CText>
+          }
+        />
+      </InputGroup>
+      <Flex justifyContent='space-between'>
+        <Text fontSize='8px' translation='simpleSwap.modern.sell.walletBalance' />
+        <CText fontSize='8px' fontWeight='bold'>
+          {DEFAULT_WALLET_BALANCE} {selectedAsset.toUpperCase()}
+        </CText>
+      </Flex>
+    </>
+  )
+
+  const renderBuyConfirmStep = () => (
+    <>
+      <Flex justifyContent='space-between'>
+        <Box>
+          <Text fontSize='8px' translation='simpleSwap.modern.buy.youGet' />
+          <Text fontSize='8px' translation='simpleSwap.modern.buy.exchangeRate' mb={2} />
+          <Text fontSize='8px' translation='simpleSwap.modern.buy.deliveredTo' />
+        </Box>
+        <Box>
+          <CText fontSize='8px' fontWeight='bold' textAlign='right'>
+            {DEFAULT_RECEIVE_AMOUNT} {selectedAsset.toUpperCase()}
+          </CText>
+          <CText fontSize='8px' fontWeight='bold' textAlign='right' mb={2}>
+            {DEFAULT_EXC_RATE} {selectedAsset.toUpperCase()}
+          </CText>
+          <Flex fontSize='8px' fontWeight='bold' textAlign='right'>
+            {DEFAULT_RECEIVE_ADDRESS}
+            <GrSync
+              size={10}
+              style={{ marginTop: '1px', marginLeft: '7px' }}
+              className='grSync-white'
+            />
+          </Flex>
+        </Box>
+      </Flex>
+    </>
+  )
+
+  const renderConfirmStep = () => {
+    if (isSellRole) {
+      return renderSellConfirmStep()
+    }
+
+    return renderBuyConfirmStep()
+  }
+
+  return (
+    <Flex
+      width='155px'
+      height='200px'
+      marginTop={5}
+      flexDirection='column'
+      alignItems={isSellRole ? 'flex-end' : 'flex-start'}
+      visibility={hasSubmittedTrade ? 'hidden' : 'visible'}
+      justifyContent='center'
+    >
+      <Flex width='100%' mb={4}>
+        <Box
+          width='100%'
+          position='relative'
+          padding={2}
+          marginBottom={currentStep === 'initial' ? '42px' : '0px'}
+        >
+          <Select
+            onChange={e => setAsset(e.target.value)}
+            className='hide'
+            iconSize={currentStep === 'initial' ? '22px' : '0'}
+            opacity='0'
+            width='100%'
+            padding={2}
+            bg='tomato'
+            borderColor='tomato'
+            color='white'
+            rootProps={{
+              style: { padding: '8px', marginLeft: '40px', marginTop: '3px' },
+            }}
+            placeholder='Select Token'
+          >
+            <option value='btc'>BTC</option>
+            <option value='eth'>ETH</option>
+            <option value='ltc'>LTC</option>
+          </Select>
+          <div style={optionsWrapperStyles}>
+            <Flex style={{ ...optionStyleHidden, ...(selectedAsset === 'btc' && isVisible) }}>
+              <Text mr='10px' fontSize='xl' translation={`simpleSwap.modern.${role}.title`} />
+              <AssetIcon visibility='visible' mt='2px' symbol='btc' boxSize='55px' />
+              <Flex ml={2} mt='2px' direction='column'>
+                <CText fontSize='2xl' fontWeight='bold' lineHeight='.9'>
+                  BTC
+                </CText>
+              </Flex>
+            </Flex>
+            <Flex style={{ ...optionStyleHidden, ...(selectedAsset === 'eth' && isVisible) }}>
+              <Text mr='10px' fontSize='xl' translation={`simpleSwap.modern.${role}.title`} />
+              <AssetIcon visibility='visible' mt='2px' symbol='eth' boxSize='55px' />
+              <Flex ml={2} mt='2px' direction='column'>
+                <CText fontSize='2xl' fontWeight='bold' lineHeight='.9'>
+                  ETH
+                </CText>
+              </Flex>
+            </Flex>
+            <Flex style={{ ...optionStyleHidden, ...(selectedAsset === 'ltc' && isVisible) }}>
+              <Text mr='10px' fontSize='xl' translation={`simpleSwap.modern.${role}.title`} />
+              <AssetIcon visibility='visible' mt='2px' symbol='ltc' boxSize='55px' />
+              <Flex ml={2} mt='2px' direction='column'>
+                <CText fontSize='2xl' fontWeight='bold' lineHeight='.9'>
+                  LTC
+                </CText>
+              </Flex>
+            </Flex>
+          </div>
+        </Box>
+      </Flex>
+      <Box width={hasSubmittedTrade ? '70px' : '100%'} margin='0 auto' visibility='visible'>
+        {currentStep === 'confirm' && renderConfirmStep()}
+        {hasSubmittedTrade && renderPostConfirmationStep()}
+      </Box>
+    </Flex>
+  )
+}
diff --git a/src/pages/Swap/components/SwapCardSwitch.tsx b/src/pages/Swap/components/SwapCardSwitch.tsx
new file mode 100644
index 00000000000..9ad8f10ad2f
--- /dev/null
+++ b/src/pages/Swap/components/SwapCardSwitch.tsx
@@ -0,0 +1,17 @@
+import { SwapCardClassic } from './SwapCardClassic'
+import { SwapCardModern } from './SwapCardModern'
+
+export type SwapCardProps = {
+  currentStep: string
+  exchangeRate: number
+  receiveAmount: number
+  handleClickNext: () => void
+  selectedAsset: string
+  setAsset: (asset: string) => void
+  selectedOtherAsset: string
+  shouldShowClassicVersion: boolean
+  role: string
+}
+
+export const SwapCardSwitch = ({ shouldShowClassicVersion, ...rest }: SwapCardProps) =>
+  shouldShowClassicVersion ? <SwapCardClassic {...rest} /> : <SwapCardModern {...rest} />
diff --git a/src/pages/Swap/constants.ts b/src/pages/Swap/constants.ts
new file mode 100644
index 00000000000..e17e2079b63
--- /dev/null
+++ b/src/pages/Swap/constants.ts
@@ -0,0 +1,34 @@
+export const ROLES = {
+  buy: 'buy',
+  sell: 'sell',
+}
+
+export const TRADE_STEPS_CLASSIC = ['initial', 'processing', 'complete']
+export const TRADE_STEPS_MODERN = ['initial', 'confirm', 'processing', 'complete']
+
+export const DEFAULT_BUY_ASSET = 'eth'
+export const DEFAULT_SELL_ASSET = 'btc'
+
+// Styles
+export const OG_COLORS = {
+  lightBlue: '#27394C',
+  lighterBlue: '#8792A5',
+  darkBlue: '#021735',
+  orange: '#fa9400',
+  green: '#63B866',
+  darkGray: '#141B23',
+}
+
+const APP_HEADER_HEIGHT = '4.5rem'
+const PAGE_HEADER_HEIGHT_CLASSIC = '300px'
+export const PAGE_MARGIN_TOP_MODERN = '280px'
+export const BODY_PADDING_TOP = '40px'
+export const PAGE_HEIGHT_OFFSET_CLASSIC = `(${APP_HEADER_HEIGHT} + ${PAGE_HEADER_HEIGHT_CLASSIC} + ${BODY_PADDING_TOP})`
+export const PAGE_HEIGHT_OFFSET_MODERN = `(${APP_HEADER_HEIGHT} + ${PAGE_MARGIN_TOP_MODERN})`
+export const PAGE_HEIGHT_OFFSET_MOBILE = APP_HEADER_HEIGHT
+
+// Defaults to be replaced once hooked up to actual data
+export const DEFAULT_RECEIVE_AMOUNT = 34.48238
+export const DEFAULT_SELL_AMOUNT = 0.2423
+export const DEFAULT_RECEIVE_TX_ID = 'f3j35923H20HFFJ29898C32498OIJ52'
+export const DEFAULT_SELL_TX_ID = '9834hf34H20HFFJ29898C32498OIJ355'