fix: removed .env

DLC-link · Nov 24, 2023 · 88ffe7e · 88ffe7e
1 parent 5e414bf
commit 88ffe7e
Show file tree

Hide file tree

Showing 26 changed files with 429 additions and 271 deletions.
diff --git a/.env.development b/.env.development
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,7 @@ dist-ssr
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Environment variables
+.env
+.env.development
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -1,14 +1,12 @@
-import { Route } from 'react-router-dom';
+import { Route } from "react-router-dom";
 
-import { AppLayout } from '@components/app.layout';
-import { ModalContainer } from '@components/modals/components/modal-container';
-import { MyVaults } from '@pages/my-vaults/my-vaults';
+import { AppLayout } from "@components/app.layout";
+import { ModalContainer } from "@components/modals/components/modal-container";
+import { MyVaults } from "@pages/my-vaults/my-vaults";
 
-import { About } from './pages/about/about';
-import { Dashboard } from './pages/dashboard/dashboard';
-import {
-  BlockchainContextProvider
-} from './providers/blockchain-context-provider';
+import { About } from "./pages/about/about";
+import { Dashboard } from "./pages/dashboard/dashboard";
+import { BlockchainContextProvider } from "./providers/blockchain-context-provider";
 
 export function App(): React.JSX.Element {
   return (

diff --git a/src/app/common/utilities.tsx b/src/app/common/utilities.tsx
@@ -1,4 +1,4 @@
-import Decimal from 'decimal.js';
+import Decimal from "decimal.js";
 
 export function easyTruncateAddress(address: string): string {
   const truncationLength = 4;
@@ -7,7 +7,11 @@ export function easyTruncateAddress(address: string): string {
   return `${prefix}...${suffix}`;
 }
 
-export function customShiftValue(value: number, shift: number, unshift: boolean): number {
+export function customShiftValue(
+  value: number,
+  shift: number,
+  unshift: boolean,
+): number {
   const decimalPoweredShift = new Decimal(10 ** shift);
   const decimalValue = new Decimal(Number(value));
   const decimalShiftedValue = unshift

diff --git a/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx b/src/app/components/mint-unmint/components/lock-screen/lock-screen.tsx
@@ -1,22 +1,22 @@
-import { Button, VStack } from '@chakra-ui/react';
-import { VaultCard } from '@components/vault/vault-card';
-import { useVaults } from '@hooks/use-vaults';
+import { Button, VStack } from "@chakra-ui/react";
+import { VaultCard } from "@components/vault/vault-card";
+import { useVaults } from "@hooks/use-vaults";
 
-import { LockScreenProtocolFee } from './components/protocol-fee';
-import { useContext } from 'react';
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
+import { LockScreenProtocolFee } from "./components/protocol-fee";
+import { useContext } from "react";
+import { BlockchainContext } from "../../../../providers/blockchain-context-provider";
 
 export function LockScreen(): React.JSX.Element {
   const { readyVaults } = useVaults();
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
 
   return (
-    <VStack w={'300px'} spacing={'15px'}>
+    <VStack w={"300px"} spacing={"15px"}>
       <VaultCard vault={readyVaults[0]} isSelected />
       <LockScreenProtocolFee assetAmount={readyVaults[0].collateral} />
       <Button
-        variant={'account'}
+        variant={"account"}
         onClick={() =>
           bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(readyVaults[0])
         }

diff --git a/src/app/components/mint-unmint/components/mint/mint.tsx b/src/app/components/mint-unmint/components/mint/mint.tsx
@@ -1,33 +1,26 @@
-import { useState } from 'react';
+import { HStack } from "@chakra-ui/react";
 
-import { HStack } from '@chakra-ui/react';
-import { StepButton } from '@components/step-button/step-button';
-import { VaultState } from '@models/vault';
-
-import { exampleVaults } from '@shared/examples/example-vaults';
-
-import { LockScreen } from '../lock-screen/lock-screen';
-import { ProgressTimeline } from '../progress-timeline/progress-timeline';
-import { TransactionForm } from '../transaction-form/transaction-form';
-import { TransactionSummary } from '../transaction-summary/transaction-summary';
-import { Walkthrough } from '../walkthrough/walkthrough';
-import { MintLayout } from './components/mint.layout';
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from '@store/index';
+import { RootState } from "@store/index";
+import { useSelector } from "react-redux";
+import { LockScreen } from "../lock-screen/lock-screen";
+import { ProgressTimeline } from "../progress-timeline/progress-timeline";
+import { TransactionForm } from "../transaction-form/transaction-form";
+import { TransactionSummary } from "../transaction-summary/transaction-summary";
+import { Walkthrough } from "../walkthrough/walkthrough";
+import { MintLayout } from "./components/mint.layout";
 
 export function Mint(): React.JSX.Element {
   const { mintStep } = useSelector((state: RootState) => state.mintunmint);
-  const exampleVault = exampleVaults.find(vault => vault.state === VaultState.FUNDING);
 
   return (
     <MintLayout>
-      <ProgressTimeline variant={'mint'} currentStep={mintStep} />
-      <HStack w={'100%'} alignItems={'start'} justifyContent={'space-between'}>
-        <Walkthrough flow={'mint'} currentStep={mintStep} />
+      <ProgressTimeline variant={"mint"} currentStep={mintStep} />
+      <HStack w={"100%"} alignItems={"start"} justifyContent={"space-between"}>
+        <Walkthrough flow={"mint"} currentStep={mintStep} />
         {[0].includes(mintStep) && <TransactionForm />}
         {[1].includes(mintStep) && <LockScreen />}
         {[2].includes(mintStep) && (
-          <TransactionSummary flow={'mint'} blockchain={'ethereum'} vault={exampleVault} />
+          <TransactionSummary flow={"mint"} blockchain={"ethereum"} />
         )}
       </HStack>
     </MintLayout>

diff --git a/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx b/src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx
@@ -1,12 +1,18 @@
-import { useContext, useState } from 'react';
+import { useContext, useState } from "react";
 
-import { Button, FormControl, FormErrorMessage, Text, VStack } from '@chakra-ui/react';
-import { customShiftValue } from '@common/utilities';
-import { Form, Formik } from 'formik';
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { customShiftValue } from "@common/utilities";
+import { Form, Formik } from "formik";
 
-import { BlockchainContext } from '../../../../providers/blockchain-context-provider';
-import { TransactionFormInput } from './components/transaction-form-input';
-import { TransactionFormWarning } from './components/transaction-form-warning';
+import { BlockchainContext } from "../../../../providers/blockchain-context-provider";
+import { TransactionFormInput } from "./components/transaction-form-input";
+import { TransactionFormWarning } from "./components/transaction-form-warning";
 
 export interface TransactionFormValues {
   amount: number;
@@ -22,36 +28,42 @@ export function TransactionForm(): React.JSX.Element {
   async function handleSetup(btcDepositAmount: number) {
     try {
       setIsSubmitting(true);
-      const shiftedBTCDepositAmount = customShiftValue(btcDepositAmount, 8, false);
+      const shiftedBTCDepositAmount = customShiftValue(
+        btcDepositAmount,
+        8,
+        false,
+      );
       await ethereum?.setupVault(shiftedBTCDepositAmount);
     } catch (error) {
       setIsSubmitting(false);
-      throw new Error('Error setting up vault');
+      throw new Error("Error setting up vault");
     }
   }
 
   return (
-    <VStack w={'300px'}>
+    <VStack w={"300px"}>
       <Formik
         initialValues={initialValues}
-        onSubmit={async values => {
+        onSubmit={async (values) => {
           await handleSetup(values.amount);
         }}
       >
         {({ handleSubmit, errors, touched, values }) => (
           <Form onSubmit={handleSubmit}>
             <FormControl isInvalid={!!errors.amount && touched.amount}>
-              <VStack spacing={'15px'} w={'300px'}>
-                <Text w={'100%'} color={'accent.cyan.01'}>
+              <VStack spacing={"15px"} w={"300px"}>
+                <Text w={"100%"} color={"accent.cyan.01"}>
                   Amount of dlcBTC you want to mint:
                 </Text>
                 <TransactionFormInput values={values} />
-                <FormErrorMessage fontSize={'xs'}>{errors.amount}</FormErrorMessage>
+                <FormErrorMessage fontSize={"xs"}>
+                  {errors.amount}
+                </FormErrorMessage>
                 <TransactionFormWarning assetAmount={values.amount} />
                 <Button
                   isLoading={isSubmitting}
-                  variant={'account'}
-                  type={'submit'}
+                  variant={"account"}
+                  type={"submit"}
                   isDisabled={Boolean(errors.amount)}
                 >
                   Create Vault

diff --git a/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx b/src/app/components/mint-unmint/components/transaction-summary/transaction-summary.tsx
@@ -2,8 +2,8 @@ import { useNavigate } from "react-router-dom";
 
 import { HStack, Link, Spinner, Stack, Text, VStack } from "@chakra-ui/react";
 import { VaultCard } from "@components/vault/vault-card";
-import { Vault } from "@models/vault";
 
+import { useVaults } from "@hooks/use-vaults";
 import { TransactionSummaryPreviewCard } from "./components/transaction-summary-preview-card";
 
 const flowPropertyMap = {
@@ -20,27 +20,26 @@ const flowPropertyMap = {
 interface TransactionSummaryProps {
   flow: "mint" | "unmint";
   blockchain: "ethereum" | "bitcoin";
-  vault?: Vault;
 }
 
 export function TransactionSummary({
   flow,
   blockchain,
-  vault,
 }: TransactionSummaryProps): React.JSX.Element {
   const navigate = useNavigate();
+  const { fundingVaults } = useVaults();
 
   return (
     <VStack alignItems={"start"} w={"300px"} spacing={"15px"}>
       <HStack w={"100%"}>
         <Spinner color={"accent.cyan.01"} size={"md"} />
         <Text color={"accent.cyan.01"}>a) {flowPropertyMap[flow].title}:</Text>
       </HStack>
-      <VaultCard vault={vault} />
+      <VaultCard vault={fundingVaults[0]} />
       <Text color={"white.01"}>b) {flowPropertyMap[flow].subtitle}:</Text>
       <TransactionSummaryPreviewCard
         blockchain={blockchain}
-        assetAmount={vault?.collateral}
+        assetAmount={fundingVaults[0]?.collateral}
       />
       <Stack
         p={"15px"}

diff --git a/src/app/components/mint-unmint/components/unmint/unmint.tsx b/src/app/components/mint-unmint/components/unmint/unmint.tsx
@@ -32,7 +32,6 @@ export function Unmint(): React.JSX.Element {
           <TransactionSummary
             flow={"unmint"}
             blockchain={"bitcoin"}
-            vault={exampleVault}
           />
         )}
       </HStack>

diff --git a/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx b/src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx
@@ -1,24 +1,29 @@
-import { useContext, useState } from 'react';
+import { useContext, useState } from "react";
 
-import { CheckIcon } from '@chakra-ui/icons';
-import { HStack, ScaleFade, Text, VStack } from '@chakra-ui/react';
-import { ModalComponentProps } from '@components/modals/components/modal-container';
-import { ModalLayout } from '@components/modals/components/modal.layout';
-import { SelectWalletMenu } from '@components/modals/select-wallet-modal/components/select-wallet-menu';
-import { SelectNetworkButton } from '@components/select-network-button/select-network-button';
-import { Network } from '@models/network';
-import { ethereumWallets } from '@models/wallet';
+import { CheckIcon } from "@chakra-ui/icons";
+import { HStack, ScaleFade, Text, VStack } from "@chakra-ui/react";
+import { ModalComponentProps } from "@components/modals/components/modal-container";
+import { ModalLayout } from "@components/modals/components/modal.layout";
+import { SelectWalletMenu } from "@components/modals/select-wallet-modal/components/select-wallet-menu";
+import { SelectNetworkButton } from "@components/select-network-button/select-network-button";
+import { Network } from "@models/network";
+import { ethereumWallets } from "@models/wallet";
 
-import { BlockchainContext } from '../../../providers/blockchain-context-provider';
+import { BlockchainContext } from "../../../providers/blockchain-context-provider";
 
-export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps): React.JSX.Element {
+export function SelectWalletModal({
+  isOpen,
+  handleClose,
+}: ModalComponentProps): React.JSX.Element {
   const blockchainContext = useContext(BlockchainContext);
   const ethereum = blockchainContext?.ethereum;
 
-  const [currentNetwork, setCurrentNetwork] = useState<Network | undefined>(undefined);
+  const [currentNetwork, setCurrentNetwork] = useState<Network | undefined>(
+    undefined,
+  );
 
   async function handleLogin() {
-    if (!currentNetwork) throw new Error('No network selected');
+    if (!currentNetwork) throw new Error("No network selected");
     await ethereum?.requestEthereumAccount(currentNetwork);
     setCurrentNetwork(undefined);
     handleClose();
@@ -29,22 +34,37 @@ export function SelectWalletModal({ isOpen, handleClose }: ModalComponentProps):
   };
 
   return (
-    <ModalLayout title="Connect Wallet" isOpen={isOpen} onClose={() => handleClose()}>
-      <VStack alignItems={'start'} spacing={'25px'}>
+    <ModalLayout
+      title="Connect Wallet"
+      isOpen={isOpen}
+      onClose={() => handleClose()}
+    >
+      <VStack alignItems={"start"} spacing={"25px"}>
         {!currentNetwork ? (
-          <Text variant={'header'}>Select Network</Text>
+          <Text variant={"header"}>Select Network</Text>
         ) : (
           <HStack>
-            <Text variant={'header'}>Network Selected</Text>
-            <CheckIcon color={'accent.cyan.01'} />
+            <Text variant={"header"}>Network Selected</Text>
+            <CheckIcon color={"accent.cyan.01"} />
           </HStack>
         )}
-        <SelectNetworkButton handleClick={handleNetworkChange} currentNetwork={currentNetwork} />
-        <ScaleFade in={!!currentNetwork} transition={{ enter: { delay: 0.15 } }} unmountOnExit>
-          <VStack alignItems={'start'} spacing={'25px'}>
-            <Text variant={'header'}>Select Wallet</Text>
-            {ethereumWallets.map(wallet => (
-              <SelectWalletMenu key={wallet.name} wallet={wallet} handleClick={handleLogin} />
+        <SelectNetworkButton
+          handleClick={handleNetworkChange}
+          currentNetwork={currentNetwork}
+        />
+        <ScaleFade
+          in={!!currentNetwork}
+          transition={{ enter: { delay: 0.15 } }}
+          unmountOnExit
+        >
+          <VStack alignItems={"start"} spacing={"25px"}>
+            <Text variant={"header"}>Select Wallet</Text>
+            {ethereumWallets.map((wallet) => (
+              <SelectWalletMenu
+                key={wallet.name}
+                wallet={wallet}
+                handleClick={handleLogin}
+              />
             ))}
           </VStack>
         </ScaleFade>