fix: made requested css and const changes

src/app/common/hooks/use-bitcoin-contracts.ts

@@ -52,6 +52,7 @@ export function useBitcoinContracts() {
   const currentIndex = useCurrentAccountIndex();
   const nativeSegwitPrivateKeychain =
     useNativeSegwitActiveNetworkAccountPrivateKeychain()?.(currentIndex);
+  const oracleAPI = 'https://testnet.dlc.link/oracle';
 
   async function getBitcoinContractInterface(): Promise<JsDLCInterface | undefined> {
     const bitcoinAccountDetails = getNativeSegwitSigner?.(0);
@@ -75,8 +76,6 @@ export function useBitcoinContracts() {
       signet: BITCOIN_API_BASE_URL_TESTNET,
     });
 
-    const oracleAPI = 'https://testnet.dlc.link/oracle';
-
     const bitcoinContractInterface = JsDLCInterface.new(
       bytesToHex(currentAddressPrivateKey),
       currentAddress,
@@ -127,7 +126,19 @@ export function useBitcoinContracts() {
     bitcoinContractJSON: string,
     counterpartyWalletDetails: CounterpartyWalletDetails
   ) {
-    const bitcoinContractInterface = await getBitcoinContractInterface();
+    let bitcoinContractInterface: JsDLCInterface | undefined;
+    try {
+      bitcoinContractInterface = await getBitcoinContractInterface();
+    } catch (error) {
+      navigate(RouteUrls.BitcoinContractLockError, {
+        state: {
+          error,
+          title: 'There was an error with getting the bitcoin contract interface',
+          body: 'Unable to setup interface',
+        },
+      });
+      sendRpcResponse('none', '', 'failed');
+    }
 
     if (!bitcoinContractInterface) return;
 

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-expiration-date.tsx

@@ -10,8 +10,8 @@ export function BitcoinContractExpirationDate({
   expirationDate,
 }: BitcoinContractExpirationDateProps) {
   return (
-    <Flex flex={1} width={'284.16px'} paddingLeft={'24px'} paddingRight={'24px'}>
-      <SpaceBetween width={'100%'}>
+    <Flex>
+      <SpaceBetween spacing='base'>
         <Text fontSize={2} fontWeight="500">
           Expiration Date
         </Text>

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx

@@ -28,7 +28,7 @@ export function BitcoinContractLockAmount({
   const { onCopy, hasCopied } = useClipboard(hoverLabel ?? '');
 
   return (
-    <Flag align="middle" img={image ? image : <BtcIcon />} my="loose" spacing="base">
+    <Flag align="middle" img={image || <BtcIcon />} my="loose" spacing="base">
       <SpaceBetween>
         <Text fontSize={2} fontWeight="500">
           {title ? title : 'BTC'}

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-offer-details.tsx

@@ -19,7 +19,7 @@ export function BitcoinContractOfferDetailsSimple({
       />
       <BitcoinContractExpirationDate
         expirationDate={bitcoinContractOffer.bitcoinContractExpirationDate}
-      ></BitcoinContractExpirationDate>
+      />
     </>
   );
 }