shapeshift · gomesalexandre · Feb 10, 2025 · Feb 4, 2025 · Feb 4, 2025 · Feb 4, 2025
diff --git a/.env b/.env
@@ -12,3 +12,6 @@ VITE_CHATWOOT_URL=https://app.chatwoot.com
 
 VITE_CHAINFLIP_API_KEY=09bc0796ff40435482c0a54fa6ae2784
 VITE_CHAINFLIP_API_URL=https://chainflip-broker.io
+VITE_CHAINFLIP_EXPLORER_BASE_URL=https://scan.chainflip.io
+
+VITE_CHAINFLIP_COMMISSION_BPS=49
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,7 +13,7 @@ on:
 jobs:
   install-and-cache:
     name: Install Lint Type-check
-    container: node:18-bullseye
+    container: node:20-bullseye
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -22,7 +22,6 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: '18.20.4'
           node-version-file: '.nvmrc'
           cache: 'yarn'
 

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>ShapeShift Classic</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -19,22 +19,34 @@
     "@lukemorales/query-key-factory": "^1.3.4",
     "@shapeshiftoss/caip": "^8.15.0",
     "@shapeshiftoss/types": "^8.6.0",
+    "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.65.1",
+    "@types/qrcode": "^1.5.5",
     "axios": "^1.6.5",
-    "framer-motion": "^10.17.9",
+    "bech32": "^2.0.0",
+    "bignumber.js": "^9.1.2",
+    "dayjs": "^1.11.13",
+    "framer-motion": "^12.3.0",
+    "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "mixpanel-browser": "^2.48.1",
+    "multicoin-address-validator": "^0.5.24",
+    "qrcode": "^1.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
     "react-icons": "^4.12.0",
-    "react-router-dom": "^6.21.1",
+    "react-number-format": "^5.4.3",
+    "react-router": "^7.1.5",
     "react-virtuoso": "^4.6.2",
     "viem": "^2.0.3",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.7",
+    "@types/lodash": "^4",
     "@types/mixpanel-browser": "^2.48.1",
+    "@types/multicoin-address-validator": "^0",
     "@types/node": "^20.10.7",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,39 +1,17 @@
 import './App.css'
 
-import { Center } from '@chakra-ui/react'
 import { QueryClientProvider } from '@tanstack/react-query'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { ChatwootButton } from 'components/Chatwoot'
-import { SelectPair } from 'components/SelectPair'
-import { Status } from 'components/Status/Status'
-import { TradeInput } from 'components/TradeInput'
+import { AppRouter } from 'AppRouter'
+import { BrowserRouter } from 'react-router'
 
 import { queryClient } from './config/react-query'
 
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <SelectPair />,
-  },
-  {
-    path: '/input',
-    element: <TradeInput />,
-  },
-  {
-    path: '/status',
-    element: <Status />,
-  },
-])
-
-function App() {
-  console.log(import.meta.env.VITE_FOO)
-
+const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <Center width='full' height='100vh' flexDir='column'>
-        <RouterProvider router={router} />
-        <ChatwootButton />
-      </Center>
+      <BrowserRouter>
+        <AppRouter />
+      </BrowserRouter>
     </QueryClientProvider>
   )
 }

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
@@ -0,0 +1,126 @@
+import { Center } from '@chakra-ui/react'
+import { btcAssetId, ethAssetId } from 'constants/caip'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useEffect, useMemo } from 'react'
+import { FormProvider, useForm, useWatch } from 'react-hook-form'
+import { Route, Routes, useLocation, useSearchParams } from 'react-router'
+import { ChatwootButton } from 'components/Chatwoot'
+import { SelectPair } from 'components/SelectPair'
+import { Status } from 'components/Status/Status'
+import { TradeInput } from 'components/TradeInput'
+import type { SwapFormData } from 'types/form'
+
+const selectPair = <SelectPair />
+const tradeInput = <TradeInput />
+const status = <Status />
+
+const slideVariants = {
+  initial: { opacity: 0, x: 20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -20 },
+}
+
+const fadeUpVariants = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -20 },
+}
+
+const motionWrapperSx = {
+  width: '100%',
+  maxWidth: '450px',
+  display: 'flex',
+  justifyContent: 'center',
+}
+
+const transition = {
+  type: 'tween',
+  ease: [0.25, 0.1, 0.25, 1],
+  duration: 0.3,
+}
+
+const getVariants = (pathname: string) => {
+  // Not sure what this does but this looks good on status screen so
+  if (pathname === '/status') return fadeUpVariants
+  return slideVariants
+}
+
+export const AppRouter = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const location = useLocation()
+
+  const defaultValues = useMemo(
+    () => ({
+      sellAssetId: searchParams.get('sellAssetId') || ethAssetId,
+      buyAssetId: searchParams.get('buyAssetId') || btcAssetId,
+      sellAmountCryptoBaseUnit: searchParams.get('sellAmountCryptoBaseUnit') || undefined,
+      destinationAddress: searchParams.get('destinationAddress') || undefined,
+      refundAddress: searchParams.get('refundAddress') || undefined,
+    }),
+    [searchParams],
+  )
+
+  const methods = useForm<SwapFormData>({
+    mode: 'all',
+    reValidateMode: 'onChange',
+    defaultValues,
+  })
+
+  const formValues = useWatch({ control: methods.control })
+
+  // Synchronize queryparams with form
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams)
+
+    Object.entries(formValues || {}).forEach(([key, value]) => {
+      if (value) {
+        params.set(key, String(value))
+      } else {
+        params.delete(key)
+      }
+    })
+
+    setSearchParams(params, { replace: true })
+  }, [formValues, setSearchParams, searchParams])
+
+  // Synchronize form with queryparams too
+  useEffect(() => {
+    const currentParams = Object.fromEntries(searchParams.entries())
+    const hasParams = Object.keys(currentParams).length > 0
+
+    if (hasParams) {
+      const formData: Partial<SwapFormData> = {}
+      searchParams.forEach((value, key) => {
+        if (key in defaultValues) {
+          formData[key as keyof SwapFormData] = value
+        }
+      })
+      methods.reset(formData)
+    }
+  }, [searchParams, methods, defaultValues])
+
+  return (
+    <FormProvider {...methods}>
+      <Center width='full' height='100vh' flexDir='column'>
+        <AnimatePresence mode='wait' initial={false}>
+          <motion.div
+            key={location.pathname}
+            initial='initial'
+            animate='animate'
+            exit='exit'
+            variants={getVariants(location.pathname)}
+            transition={transition}
+            style={motionWrapperSx}
+          >
+            <Routes location={location}>
+              <Route path='/' element={selectPair} />
+              <Route path='/input' element={tradeInput} />
+              <Route path='/status' element={status} />
+            </Routes>
+          </motion.div>
+        </AnimatePresence>
+        <ChatwootButton />
+      </Center>
+    </FormProvider>
+  )
+}
diff --git a/src/components/AssetSelectModal/AssetSelectModal.tsx b/src/components/AssetSelectModal/AssetSelectModal.tsx
@@ -13,8 +13,7 @@ import {
 import type { ChainId } from '@shapeshiftoss/caip'
 import type { ChangeEvent } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import AssetData from 'lib/generatedAssetData.json'
-import { isNft } from 'lib/utils'
+import { useAllAssets } from 'store/assets'
 import type { Asset } from 'types/Asset'
 
 import { AssetList } from './AssetList'
@@ -35,16 +34,13 @@ type NetworkItem = {
 
 export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onClose, onClick }) => {
   const [searchQuery, setSearchQuery] = useState('')
-  const assets = useMemo(() => Object.values(AssetData) as Asset[], [])
+  const assets = useAllAssets()
   const [activeChain, setActiveChain] = useState<ChainId | 'All'>('All')
   const [searchTermAssets, setSearchTermAssets] = useState<Asset[]>([])
   const iniitalRef = useRef(null)
 
   const filteredAssets = useMemo(
-    () =>
-      activeChain === 'All'
-        ? assets.filter(a => !isNft(a.assetId))
-        : assets.filter(a => a.chainId === activeChain && !isNft(a.assetId)),
+    () => (activeChain === 'All' ? assets : assets.filter(a => a.chainId === activeChain)),
     [activeChain, assets],
   )
 
@@ -136,7 +132,7 @@ export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onCl
             <Text fontWeight='bold' fontSize='md'>
               Select asset
             </Text>
-            <CloseButton position='relative' />
+            <CloseButton position='relative' onClick={handleClose} />
           </Flex>
           <Input
             size='lg'

diff --git a/src/components/AssetSelectModal/helpers/filterAssetsBySearchTerm.ts b/src/components/AssetSelectModal/helpers/filterAssetsBySearchTerm.ts
@@ -1,19 +1,9 @@
-import { fromAssetId } from '@shapeshiftoss/caip'
 import { matchSorter } from 'match-sorter'
-import { isEthAddress } from 'lib/utils'
 import type { Asset } from 'types/Asset'
 
 export const filterAssetsBySearchTerm = (search: string, assets: Asset[]) => {
   if (!assets) return []
 
-  const searchLower = search.toLowerCase()
-
-  if (isEthAddress(search)) {
-    return assets.filter(
-      asset => fromAssetId(asset?.assetId).assetReference.toLowerCase() === searchLower,
-    )
-  }
-
   return matchSorter(assets, search, {
     keys: ['name', 'symbol'],
     threshold: matchSorter.rankings.CONTAINS,

diff --git a/src/components/AssetSelection.tsx b/src/components/AssetSelection.tsx
@@ -1,20 +1,24 @@
 import { Avatar, Button, Text } from '@chakra-ui/react'
-import type { Asset } from 'types/Asset'
+import type { AssetId } from '@shapeshiftoss/caip'
+import { memo } from 'react'
+import { useAssetById } from 'store/assets'
 
 type AssetSelectionProps = {
   onClick: () => void
   label: string
-  asset?: Asset
+  assetId?: AssetId
 }
 
-export const AssetSelection: React.FC<AssetSelectionProps> = ({ label, onClick, asset }) => {
+export const AssetSelection = memo(({ label, onClick, assetId }: AssetSelectionProps) => {
+  const asset = useAssetById(assetId)
+
   return (
     <Button flexDir='column' height='auto' py={4} gap={4} flex={1} onClick={onClick}>
       <Text color='text.subtle'>{label}</Text>
-      <Avatar src={asset ? asset.icon : ''} />
+      <Avatar src={asset?.icon || ''} />
       <Text textOverflow='ellipsis' overflow='hidden' width='full'>
-        {asset ? asset.name : 'Select Asset'}
+        {asset?.name || 'Select Asset'}
       </Text>
     </Button>
   )
-}
+})
diff --git a/src/components/QRCode/QRCode.tsx b/src/components/QRCode/QRCode.tsx
@@ -0,0 +1,44 @@
+import { Box, Center } from '@chakra-ui/react'
+import qrcode from 'qrcode'
+import { useEffect, useRef } from 'react'
+
+type QRCodeProps = {
+  content: string
+  width: number
+  icon?: React.ReactNode
+  standardColors?: boolean
+}
+
+export const QRCode: React.FC<QRCodeProps> = ({ content, width, icon, standardColors = false }) => {
+  const ref = useRef<HTMLCanvasElement | null>(null)
+
+  useEffect(() => {
+    if (ref.current && width) {
+      qrcode.toCanvas(ref.current, content, {
+        margin: 1,
+        width,
+        color: standardColors ? undefined : { light: '#ffffff00', dark: '#161616ff' },
+      })
+    }
+  }, [content, width, standardColors])
+
+  return (
+    <Box position='relative'>
+      {icon && (
+        <Center
+          position='absolute'
+          top='50%'
+          left='50%'
+          transform='translate(-50%, -50%)'
+          boxSize='34px'
+          borderRadius='md'
+          bg='background.surface.raised.base'
+          zIndex={1}
+        >
+          {icon}
+        </Center>
+      )}
+      <canvas ref={ref} style={{ width: '100%' }} />
+    </Box>
+  )
+}