Moar fixes

ultrasound/ui/components/BurnSNX.tsx

@@ -1,8 +1,9 @@
 import { Button, Flex, Image, Link, Text, Tooltip, useDisclosure } from '@chakra-ui/react';
-import { BurnSNXModal } from './BurnSNXModal';
 import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { useNetwork } from '@snx-v3/useBlockchain';
 import { useSNXPrice } from '../hooks/useSNXPrice';
+import burnSnxSvg from './burn-snx.svg';
+import { BurnSNXModal } from './BurnSNXModal';
 
 export function BurnSNX() {
   const { network } = useNetwork();
@@ -18,7 +19,7 @@ export function BurnSNX() {
       bg="navy.700"
       w="415px"
     >
-      <Image src="/burn-snx.svg" h="284px" />
+      <Image src={burnSnxSvg} h="284px" />
       <Flex flexDir="column" gap="6" p="4">
         <Text fontWeight={700} fontSize="18px" color="white">
           Sell SNX at premium and watch it burn

ultrasound/ui/components/BurnSNXModal.tsx

@@ -13,15 +13,17 @@ import {
   Spinner,
   Text,
 } from '@chakra-ui/react';
+import { useApprove } from '@snx-v3/useApprove';
 import { useWallet } from '@snx-v3/useBlockchain';
 import { useTokenBalance } from '@snx-v3/useTokenBalance';
-import { SNXUSDBalanceOfBuyBackContract } from '../hooks/SNXUSDBalanceOfBuyBackContract';
-import { useApprove } from '@snx-v3/useApprove';
 import Wei from '@synthetixio/wei';
 import { useState } from 'react';
-import { useSellSNX } from '../mutations/useSellSNX';
+import { SNXUSDBalanceOfBuyBackContract } from '../hooks/SNXUSDBalanceOfBuyBackContract';
 import { useBurnEvents } from '../hooks/useBurnEvents';
 import { useSNXPrice } from '../hooks/useSNXPrice';
+import { useSellSNX } from '../mutations/useSellSNX';
+import snxInputSvg from './snx-input.svg';
+import usdcSvg from './usdc.svg';
 
 export function BurnSNXModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
   const [amount, setAmount] = useState<Wei | undefined>(new Wei(0));
@@ -69,7 +71,7 @@ export function BurnSNXModal({ isOpen, onClose }: { isOpen: boolean; onClose: ()
                   w="90px"
                   gap="2"
                 >
-                  <Image src="/snx-input.svg" />
+                  <Image src={snxInputSvg} />
                   <Text fontWeight={700} fontSize="16px">
                     SNX
                   </Text>
@@ -144,7 +146,7 @@ export function BurnSNXModal({ isOpen, onClose }: { isOpen: boolean; onClose: ()
                   w="120px"
                   gap="2"
                 >
-                  <Image src="/usdc.svg" />
+                  <Image src={usdcSvg} />
                   <Text fontWeight={700} fontSize="16px">
                     USDC
                   </Text>

ultrasound/ui/components/Header.tsx

@@ -1,9 +1,11 @@
 import { Box, Button, Divider, Flex, Image, Text, useColorMode } from '@chakra-ui/react';
 import { useIsConnected, useNetwork, useWallet } from '@snx-v3/useBlockchain';
-import { shortAddress } from '../utils/addresses';
-import { NetworkSelect } from './NetworkSelect';
 import { useTokenBalance } from '@snx-v3/useTokenBalance';
 import { useEffect } from 'react';
+import { shortAddress } from '../utils/addresses';
+import { NetworkSelect } from './NetworkSelect';
+import snxSmallSvg from './snx-small.svg';
+import snxSvg from './snx.svg';
 
 export function Header() {
   const { colorMode, toggleColorMode } = useColorMode();
@@ -21,7 +23,7 @@ export function Header() {
   return (
     <Flex as="header" p="2" flexDir="column" w="100%" gap="2">
       <Flex w="100%" justifyContent="space-between" alignItems="center" px="5">
-        <Image src="/snx.svg" />
+        <Image src={snxSvg} />
         <Flex alignItems="center" gap="2">
           <Box
             border="1px solid"
@@ -33,7 +35,7 @@ export function Header() {
             gap="2"
             alignItems="center"
           >
-            <Image src="/snx-small.svg" />
+            <Image src={snxSmallSvg} />
             <Text fontSize="14px" fontWeight={600}>
               {snxBalance ? snxBalance?.toNumber().toFixed(2) : '-'}
             </Text>

ultrasound/ui/components/Main.tsx

@@ -1,9 +1,10 @@
 import { Flex, Heading, Image, Link, Spinner, Text } from '@chakra-ui/react';
+import { useBurnEvents } from '../hooks/useBurnEvents';
+import { BurnSNX } from './BurnSNX';
 import { Chart } from './Chart';
-import { SupplyChangeStats } from './SupplyChangeStats';
 import { CurrentSupplyStats } from './CurrentSupplyStats';
-import { BurnSNX } from './BurnSNX';
-import { useBurnEvents } from '../hooks/useBurnEvents';
+import kainSvg from './kain.svg';
+import { SupplyChangeStats } from './SupplyChangeStats';
 
 export function Main() {
   const { data: events, isLoading } = useBurnEvents();
@@ -20,7 +21,7 @@ export function Main() {
           </Heading>
         </Flex>
         <Flex alignItems="center">
-          <Image src="/kain.svg" />
+          <Image src={kainSvg} />
           <Flex flexDir="column">
             <Text fontSize="16px" fontWeight={700} color="white">
               Mansion counter

ultrasound/ui/components/SupplyChangeStats.tsx

@@ -1,6 +1,8 @@
+import { InfoIcon } from '@chakra-ui/icons';
 import { Flex, Image, Link, Spinner, Text, Tooltip } from '@chakra-ui/react';
 import { useBurnEvents } from '../hooks/useBurnEvents';
-import { InfoIcon } from '@chakra-ui/icons';
+import burnSvg from './burn.svg';
+import mintedSvg from './minted.svg';
 
 export function SupplyChangeStats() {
   const { data: events, isLoading } = useBurnEvents();
@@ -41,7 +43,7 @@ export function SupplyChangeStats() {
             -{events?.supplyChange7Days.toString()} SNX
           </Text>
           <Flex gap="2" alignItems="center">
-            <Image src="/burn.svg" />
+            <Image src={burnSvg} />
             <Text fontSize="16px" color="gray.500" fontWeight={400}>
               Burnt
             </Text>
@@ -50,7 +52,7 @@ export function SupplyChangeStats() {
             </Text>
           </Flex>
           <Flex gap="2" alignItems="center">
-            <Image src="/minted.svg" />
+            <Image src={mintedSvg} />
             <Text fontSize="16px" color="gray.500" fontWeight={400}>
               Minted
             </Text>

ultrasound/ui/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

ultrasound/ui/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

ultrasound/ui/webpack.config.js

@@ -16,6 +16,7 @@ const isTest = process.env.NODE_ENV === 'test';
 const htmlPlugin = new HtmlWebpackPlugin({
   template: './index.html',
   scriptLoading: 'defer',
+  favicon: './favicon.ico',
   minify: false,
   hash: false,
   xhtml: true,