diff --git a/.env.development b/.env.development deleted file mode 100644 index fd1e54cf..00000000 --- a/.env.development +++ /dev/null @@ -1,3 +0,0 @@ -VITE_ETHEREUM_DEPLOYMENT_BRANCH=dev -VITE_ETHEREUM_DEPLOYMENT_VERSION=1 -VITE_TEST=testtter diff --git a/.gitignore b/.gitignore index b88c8135..bd5b3d29 100644 --- 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 index d85b15e1..22e83064 100644 --- 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 index 41209106..741d844d 100644 --- 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 index f58f3d07..f6e57b5b 100644 --- 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,10 +1,10 @@ -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(); @@ -12,11 +12,11 @@ export function LockScreen(): React.JSX.Element { const bitcoin = blockchainContext?.bitcoin; return ( - + diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx index ab5b0d8f..2adc2846 100644 --- a/src/app/components/my-vaults/my-vaults-large.tsx +++ b/src/app/components/my-vaults/my-vaults-large.tsx @@ -1,21 +1,27 @@ -import { useContext } from 'react'; -import { useSelector } from 'react-redux'; +import { useContext } from "react"; +import { useSelector } from "react-redux"; -import { HStack } from '@chakra-ui/react'; -import { VaultsListGroupBlankContainer } from '@components/vaults-list/components/vaults-list-group-blank-container'; -import { VaultsListGroupContainer } from '@components/vaults-list/components/vaults-list-group-container'; -import { VaultsList } from '@components/vaults-list/vaults-list'; -import { useVaults } from '@hooks/use-vaults'; -import { RootState } from '@store/index'; +import { HStack } from "@chakra-ui/react"; +import { VaultsListGroupBlankContainer } from "@components/vaults-list/components/vaults-list-group-blank-container"; +import { VaultsListGroupContainer } from "@components/vaults-list/components/vaults-list-group-container"; +import { VaultsList } from "@components/vaults-list/vaults-list"; +import { useVaults } from "@hooks/use-vaults"; +import { RootState } from "@store/index"; -import { BlockchainContext } from '../../providers/blockchain-context-provider'; -import { MyVaultsLargeHeader } from './components/my-vaults-header/my-vaults-header'; -import { MyVaultsLargeLayout } from './components/my-vaults-large.layout'; -import { MyVaultsSetupInformationStack } from './components/my-vaults-setup-information-stack'; +import { BlockchainContext } from "../../providers/blockchain-context-provider"; +import { MyVaultsLargeHeader } from "./components/my-vaults-header/my-vaults-header"; +import { MyVaultsLargeLayout } from "./components/my-vaults-large.layout"; +import { MyVaultsSetupInformationStack } from "./components/my-vaults-setup-information-stack"; export function MyVaultsLarge(): React.JSX.Element { const { address } = useSelector((state: RootState) => state.account); - const { readyVaults, fundingVaults, fundedVaults, closingVaults, closedVaults } = useVaults(); + const { + readyVaults, + fundingVaults, + fundedVaults, + closingVaults, + closedVaults, + } = useVaults(); const blockchainContext = useContext(BlockchainContext); const ethereum = blockchainContext?.ethereum; @@ -27,24 +33,42 @@ export function MyVaultsLarge(): React.JSX.Element { dlcBTCBalance={ethereum?.dlcBTCBalance} lockedBTCBalance={ethereum?.lockedBTCBalance} /> - + {address ? ( - + - - + + ) : ( )} - + {address ? ( ) : ( )} - + {address ? ( ) : ( diff --git a/src/app/components/vault/components/vault-information.tsx b/src/app/components/vault/components/vault-information.tsx index 4277d866..79d78ed0 100644 --- a/src/app/components/vault/components/vault-information.tsx +++ b/src/app/components/vault/components/vault-information.tsx @@ -1,13 +1,15 @@ -import { CheckIcon } from '@chakra-ui/icons'; -import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react'; -import { VaultState } from '@models/vault'; +import { CheckIcon } from "@chakra-ui/icons"; +import { Button, HStack, Image, Text, VStack } from "@chakra-ui/react"; +import { VaultState } from "@models/vault"; -import { VaultExpandButton } from './vault-expand-button'; +import { VaultExpandButton } from "./vault-expand-button"; const getAssetLogo = (state: VaultState) => { - return [VaultState.FUNDED, VaultState.CLOSING, VaultState.CLOSED].includes(state) - ? '/images/logos/dlc-btc-logo.svg' - : '/images/logos/bitcoin-logo.svg'; + return [VaultState.FUNDED, VaultState.CLOSING, VaultState.CLOSED].includes( + state, + ) + ? "/images/logos/dlc-btc-logo.svg" + : "/images/logos/bitcoin-logo.svg"; }; interface VaultInformationProps { @@ -29,38 +31,43 @@ export function VaultInformation({ isSelected, handleClick, }: VaultInformationProps): React.JSX.Element { - const date = new Date(timestamp * 1000).toLocaleDateString('en-US'); + const date = new Date(timestamp * 1000).toLocaleDateString("en-US"); return ( - - - - {'Icon'} - + + + + {"Icon"} + {collateral} - + {date} {isSelectable ? ( - {isSelected && } + {isSelected && ( + + )} ) : state === VaultState.READY ? ( - ) : ( - handleClick()} /> + handleClick()} + /> )} ); diff --git a/src/app/hooks/use-bitcoin.ts b/src/app/hooks/use-bitcoin.ts index febc1963..53c444cc 100644 --- a/src/app/hooks/use-bitcoin.ts +++ b/src/app/hooks/use-bitcoin.ts @@ -1,9 +1,9 @@ -import { Dispatch } from 'react'; +// import { Dispatch } from 'react'; -import { Vault } from '@models/vault'; -import { AnyAction } from 'redux'; +import { Vault } from "@models/vault"; +// import { AnyAction } from 'redux'; -import { UseEthereumReturn } from './use-ethereum'; +import { UseEthereumReturn } from "./use-ethereum"; export interface UseBitcoinReturn { fetchBitcoinContractOfferAndSendToUserWallet: (vault: Vault) => Promise; @@ -11,23 +11,23 @@ export interface UseBitcoinReturn { export function useBitcoin( ethereum: UseEthereumReturn, - dispatch: Dispatch + // dispatch: Dispatch ): UseBitcoinReturn { - const { getVault } = ethereum; - const routerWalletURL = 'https://devnet.dlc.link/okx-wallet'; + // const { getVault } = ethereum; + const routerWalletURL = "https://devnet.dlc.link/okx-wallet"; function createURLParams(bitcoinContractOffer: any) { const routerWalletURL = ethereum.getEthereumNetworkConfig().walletURL; if (!routerWalletURL) { - console.error('Wallet type or blockchain not supported'); + console.error("Wallet type or blockchain not supported"); } const counterPartyWalletDetails = { counterpartyWalletURL: routerWalletURL, - counterpartyWalletName: 'DLC.Link', + counterpartyWalletName: "DLC.Link", counterpartyWalletIcon: - 'https://dlc-public-assets.s3.amazonaws.com/DLC.Link_logo_icon_color.svg', + "https://dlc-public-assets.s3.amazonaws.com/DLC.Link_logo_icon_color.svg", }; const urlParams = { bitcoinContractOffer: JSON.stringify(bitcoinContractOffer), @@ -37,9 +37,12 @@ export function useBitcoin( return urlParams; } - async function sendOfferForSigning(urlParams, vaultUUID: string) { + async function sendOfferForSigning(urlParams: any) { try { - const response = await window.btc.request('acceptBitcoinContractOffer', urlParams); + const response = await window.btc.request( + "acceptBitcoinContractOffer", + urlParams, + ); console.log(response); } catch (error) { console.error(`Could not send contract offer for signing: ${error}`); @@ -49,8 +52,8 @@ export function useBitcoin( async function fetchBitcoinContractOfferFromCounterpartyWallet(vault: Vault) { try { const response = await fetch(`${routerWalletURL}/offer`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, + method: "POST", + headers: { "Content-Type": "application/json" }, body: JSON.stringify({ uuid: vault.uuid, }), @@ -61,16 +64,19 @@ export function useBitcoin( } return responseStream; } catch (error) { - throw new Error(`Could not fetch contract offer from counterparty wallet: ${error}`); + throw new Error( + `Could not fetch contract offer from counterparty wallet: ${error}`, + ); } } async function fetchBitcoinContractOfferAndSendToUserWallet(vault: Vault) { - const bitcoinContractOffer = await fetchBitcoinContractOfferFromCounterpartyWallet(vault); + const bitcoinContractOffer = + await fetchBitcoinContractOfferFromCounterpartyWallet(vault); if (!bitcoinContractOffer) return; const urlParams = createURLParams(bitcoinContractOffer); console.log(urlParams); - await sendOfferForSigning(urlParams, vault.uuid); + await sendOfferForSigning(urlParams); } return { diff --git a/src/app/hooks/use-ethereum.ts b/src/app/hooks/use-ethereum.ts index b4756392..479f46fc 100644 --- a/src/app/hooks/use-ethereum.ts +++ b/src/app/hooks/use-ethereum.ts @@ -1,15 +1,15 @@ -import { useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; +import { useEffect, useState } from "react"; +import { useSelector } from "react-redux"; -import { customShiftValue } from '@common/utilities'; -import { EthereumNetwork, Network, ethereumNetworks } from '@models/network'; -import { RawVault, Vault } from '@models/vault'; -import { RootState, store } from '@store/index'; -import { accountActions } from '@store/slices/account/account.actions'; -import { vaultActions } from '@store/slices/vault/vault.actions'; -import { Contract, Signer, ethers } from 'ethers'; +import { customShiftValue } from "@common/utilities"; +import { EthereumNetwork, Network, ethereumNetworks } from "@models/network"; +import { RawVault, Vault } from "@models/vault"; +import { RootState, store } from "@store/index"; +import { accountActions } from "@store/slices/account/account.actions"; +import { vaultActions } from "@store/slices/vault/vault.actions"; +import { Contract, Signer, ethers } from "ethers"; -import { useVaults } from './use-vaults'; +import { useVaults } from "./use-vaults"; export interface UseEthereumReturn { protocolContract: Contract | undefined; @@ -32,12 +32,22 @@ export function useEthereum(): UseEthereumReturn { const { fundedVaults } = useVaults(); const { address, network } = useSelector((state: RootState) => state.account); - const [protocolContract, setProtocolContract] = useState(undefined); - const [dlcManagerContract, setDlcManagerContract] = useState(undefined); - const [dlcBTCContract, setDlcBTCContract] = useState(undefined); - - const [dlcBTCBalance, setDLCBTCBalance] = useState(undefined); - const [lockedBTCBalance, setLockedBTCBalance] = useState(undefined); + const [protocolContract, setProtocolContract] = useState< + Contract | undefined + >(undefined); + const [dlcManagerContract, setDlcManagerContract] = useState< + Contract | undefined + >(undefined); + const [dlcBTCContract, setDlcBTCContract] = useState( + undefined, + ); + + const [dlcBTCBalance, setDLCBTCBalance] = useState( + undefined, + ); + const [lockedBTCBalance, setLockedBTCBalance] = useState( + undefined, + ); useEffect(() => { if (!address) return; @@ -88,33 +98,45 @@ export function useEthereum(): UseEthereumReturn { } } - async function getEthereumContracts(chainName: string, ethereumSigner: Signer): Promise { + async function getEthereumContracts( + chainName: string, + ethereumSigner: Signer, + ): Promise { if (!protocolContract) { - const protocolContractData = await fetchEthereumDeploymentPlan('TokenManager', chainName); + const protocolContractData = await fetchEthereumDeploymentPlan( + "TokenManager", + chainName, + ); const protocolContract = new ethers.Contract( protocolContractData.contract.address, protocolContractData.contract.abi, - ethereumSigner + ethereumSigner, ); setProtocolContract(protocolContract); } if (!dlcManagerContract) { - const dlcManagerContractData = await fetchEthereumDeploymentPlan('DLCManager', chainName); + const dlcManagerContractData = await fetchEthereumDeploymentPlan( + "DLCManager", + chainName, + ); const dlcManagerContract = new ethers.Contract( dlcManagerContractData.contract.address, dlcManagerContractData.contract.abi, - ethereumSigner + ethereumSigner, ); setDlcManagerContract(dlcManagerContract); } if (!dlcBTCContract) { - const dlcBTCContractData = await fetchEthereumDeploymentPlan('DLCBTC', chainName); + const dlcBTCContractData = await fetchEthereumDeploymentPlan( + "DLCBTC", + chainName, + ); const dlcBTCContract = new ethers.Contract( dlcBTCContractData.contract.address, dlcBTCContractData.contract.abi, - ethereumSigner + ethereumSigner, ); setDlcBTCContract(dlcBTCContract); } @@ -125,16 +147,16 @@ export function useEthereum(): UseEthereumReturn { const { ethereum } = window; if (!ethereum) { - alert('Install MetaMask!'); + alert("Install MetaMask!"); return; } const ethereumAccounts = await ethereum.request({ - method: 'eth_requestAccounts', + method: "eth_requestAccounts", }); const accountInformation = { - walletType: 'metamask', + walletType: "metamask", address: ethereumAccounts[0], network, }; @@ -147,15 +169,18 @@ export function useEthereum(): UseEthereumReturn { } } - async function fetchEthereumDeploymentPlan(contractName: string, chainID: string) { - const network = ethereumNetworks.find(network => network.id === chainID); + async function fetchEthereumDeploymentPlan( + contractName: string, + chainID: string, + ) { + const network = ethereumNetworks.find((network) => network.id === chainID); const branchName = import.meta.env.VITE_ETHEREUM_DEPLOYMENT_BRANCH; const contractVersion = import.meta.env.VITE_ETHEREUM_DEPLOYMENT_VERSION; const deploymentPlanURL = `https://raw.githubusercontent.com/DLC-link/dlc-solidity/${branchName}/deploymentFiles/${network?.name}/v${contractVersion}/${contractName}.json`; console.log( - `Fetching deployment info for ${contractName} on ${network?.name} from dlc-solidity/${branchName}` + `Fetching deployment info for ${contractName} on ${network?.name} from dlc-solidity/${branchName}`, ); try { @@ -163,21 +188,26 @@ export function useEthereum(): UseEthereumReturn { const contractData = await response.json(); return contractData; } catch (error) { - throw new Error(`Could not fetch deployment info for ${contractName} on ${network?.name}`); + throw new Error( + `Could not fetch deployment info for ${contractName} on ${network?.name}`, + ); } } - function getEthereumNetworkConfig(): { walletURL: string; explorerAPIURL: string } { + function getEthereumNetworkConfig(): { + walletURL: string; + explorerAPIURL: string; + } { switch (network?.id) { case EthereumNetwork.Sepolia: return { - walletURL: 'https://devnet.dlc.link/eth-wallet', - explorerAPIURL: 'https://sepolia.etherscan.io/tx/', + walletURL: "https://devnet.dlc.link/eth-wallet", + explorerAPIURL: "https://sepolia.etherscan.io/tx/", }; case EthereumNetwork.Goerli: return { - walletURL: 'https://testnet.dlc.link/eth-wallet', - explorerAPIURL: 'https://goerli.etherscan.io/tx/', + walletURL: "https://testnet.dlc.link/eth-wallet", + explorerAPIURL: "https://goerli.etherscan.io/tx/", }; default: throw new Error(`Unsupported network: ${network?.name}`); @@ -188,7 +218,7 @@ export function useEthereum(): UseEthereumReturn { try { const totalCollateral = fundedVaults.reduce( (sum: number, vault: Vault) => sum + vault.collateral, - 0 + 0, ); setLockedBTCBalance(totalCollateral); } catch (error) { @@ -198,7 +228,7 @@ export function useEthereum(): UseEthereumReturn { async function getDLCBTCBalance(): Promise { try { - if (!dlcBTCContract) throw new Error('Protocol contract not initialized'); + if (!dlcBTCContract) throw new Error("Protocol contract not initialized"); setDLCBTCBalance(parseInt(await dlcBTCContract.balanceOf(address))); } catch (error) { throw new Error(`Could not fetch BTC balance: ${error}`); @@ -207,8 +237,10 @@ export function useEthereum(): UseEthereumReturn { async function getAllVaults(): Promise { try { - if (!protocolContract) throw new Error('Protocol contract not initialized'); - const vaults: RawVault[] = await protocolContract.getAllVaultsForAddress(address); + if (!protocolContract) + throw new Error("Protocol contract not initialized"); + const vaults: RawVault[] = + await protocolContract.getAllVaultsForAddress(address); const formattedVaults: Vault[] = vaults.map(formatVault); store.dispatch(vaultActions.setVaults(formattedVaults)); } catch (error) { @@ -218,10 +250,13 @@ export function useEthereum(): UseEthereumReturn { async function getVault(vaultUUID: string): Promise { try { - if (!protocolContract) throw new Error('Protocol contract not initialized'); + if (!protocolContract) + throw new Error("Protocol contract not initialized"); const vault: RawVault = await protocolContract.getVault(vaultUUID); const formattedVault: Vault = formatVault(vault); - store.dispatch(vaultActions.swapVault({ vaultUUID, updatedVault: formattedVault })); + store.dispatch( + vaultActions.swapVault({ vaultUUID, updatedVault: formattedVault }), + ); } catch (error) { throw new Error(`Could not fetch vault: ${error}`); } @@ -229,7 +264,8 @@ export function useEthereum(): UseEthereumReturn { async function setupVault(btcDepositAmount: number): Promise { try { - if (!protocolContract) throw new Error('Protocol contract not initialized'); + if (!protocolContract) + throw new Error("Protocol contract not initialized"); const response = await protocolContract.setupVault(btcDepositAmount); console.log(response); } catch (error) { @@ -239,7 +275,8 @@ export function useEthereum(): UseEthereumReturn { async function closeVault(vaultUUID: string) { try { - if (!protocolContract) throw new Error('Protocol contract not initialized'); + if (!protocolContract) + throw new Error("Protocol contract not initialized"); const response = await protocolContract.closeVault(vaultUUID); console.log(response); } catch (error) { diff --git a/src/app/hooks/use-observer.ts b/src/app/hooks/use-observer.ts index 49216c26..00b0cba7 100644 --- a/src/app/hooks/use-observer.ts +++ b/src/app/hooks/use-observer.ts @@ -1,23 +1,26 @@ -import { useSelector } from 'react-redux'; +import { useSelector } from "react-redux"; -import { RootState } from '@store/index'; -import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions'; +import { RootState } from "@store/index"; +import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions"; -import { Dispatch } from 'react'; -import { AnyAction } from 'redux'; -import { UseEthereumReturn } from './use-ethereum'; +import { Dispatch } from "react"; +import { AnyAction } from "redux"; +import { UseEthereumReturn } from "./use-ethereum"; -export function useObserver(ethereum: UseEthereumReturn, dispatch: Dispatch) { +export function useObserver( + ethereum: UseEthereumReturn, + dispatch: Dispatch, +) { const { network } = useSelector((state: RootState) => state.account); const { protocolContract, dlcBTCContract, getVault } = ethereum; - + if (!protocolContract || !dlcBTCContract) return; console.log(`Listening to [${network?.name}]`); console.log(`Listening to [${protocolContract.address}]`); console.log(`Listening to [${dlcBTCContract.address}]`); - protocolContract.on('SetupVault', async (...args) => { + protocolContract.on("SetupVault", async (...args) => { const vaultUUID = args[0]; const vaultTXHash = args[args.length - 1].transactionHash; console.log(`Vault ${vaultUUID} is ready with TX ${vaultTXHash}`); diff --git a/src/app/hooks/use-vaults.ts b/src/app/hooks/use-vaults.ts index 7cda9b17..75035fec 100644 --- a/src/app/hooks/use-vaults.ts +++ b/src/app/hooks/use-vaults.ts @@ -1,8 +1,8 @@ -import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; +import { useMemo } from "react"; +import { useSelector } from "react-redux"; -import { Vault, VaultState } from '@models/vault'; -import { RootState } from '@store/index'; +import { Vault, VaultState } from "@models/vault"; +import { RootState } from "@store/index"; export function useVaults(): { readyVaults: Vault[]; @@ -16,37 +16,37 @@ export function useVaults(): { const readyVaults = useMemo( () => vaults - .filter(vault => vault.state === VaultState.READY) + .filter((vault) => vault.state === VaultState.READY) .sort((a, b) => b.timestamp - a.timestamp), - [vaults] + [vaults], ); const fundedVaults = useMemo( () => vaults - .filter(vault => vault.state === VaultState.FUNDED) + .filter((vault) => vault.state === VaultState.FUNDED) .sort((a, b) => a.timestamp - b.timestamp), - [vaults] + [vaults], ); const fundingVaults = useMemo( () => vaults - .filter(vault => vault.state === VaultState.FUNDING) + .filter((vault) => vault.state === VaultState.FUNDING) .sort((a, b) => a.timestamp - b.timestamp), - [vaults] + [vaults], ); const closingVaults = useMemo( () => vaults - .filter(vault => vault.state === VaultState.CLOSING) + .filter((vault) => vault.state === VaultState.CLOSING) .sort((a, b) => a.timestamp - b.timestamp), - [vaults] + [vaults], ); const closedVaults = useMemo( () => vaults - .filter(vault => vault.state === VaultState.CLOSED) + .filter((vault) => vault.state === VaultState.CLOSED) .sort((a, b) => a.timestamp - b.timestamp), - [vaults] + [vaults], ); return { diff --git a/src/app/providers/blockchain-context-provider.tsx b/src/app/providers/blockchain-context-provider.tsx index d8b53304..3899d488 100644 --- a/src/app/providers/blockchain-context-provider.tsx +++ b/src/app/providers/blockchain-context-provider.tsx @@ -1,24 +1,28 @@ -import React, { createContext } from 'react'; -import { useDispatch } from 'react-redux'; +import React, { createContext } from "react"; +import { useDispatch } from "react-redux"; -import { UseBitcoinReturn } from '@hooks/use-bitcoin'; -import { useBitcoin } from '@hooks/use-bitcoin'; -import { UseEthereumReturn, useEthereum } from '@hooks/use-ethereum'; -import { useObserver } from '@hooks/use-observer'; -import { HasChildren } from '@models/has-children'; +import { UseBitcoinReturn } from "@hooks/use-bitcoin"; +import { useBitcoin } from "@hooks/use-bitcoin"; +import { UseEthereumReturn, useEthereum } from "@hooks/use-ethereum"; +import { useObserver } from "@hooks/use-observer"; +import { HasChildren } from "@models/has-children"; interface BlockchainContextType { ethereum: UseEthereumReturn; bitcoin: UseBitcoinReturn; } -export const BlockchainContext = createContext(null); +export const BlockchainContext = createContext( + null, +); -export function BlockchainContextProvider({ children }: HasChildren): React.JSX.Element { +export function BlockchainContextProvider({ + children, +}: HasChildren): React.JSX.Element { const dispatch = useDispatch(); const ethereum = useEthereum(); const bitcoin = useBitcoin(ethereum, dispatch); - + useObserver(ethereum, dispatch); return ( diff --git a/src/app/store/index.ts b/src/app/store/index.ts index 458dfe5b..2f842422 100644 --- a/src/app/store/index.ts +++ b/src/app/store/index.ts @@ -1,7 +1,7 @@ -import { combineReducers, configureStore } from '@reduxjs/toolkit'; -import { accountSlice, initialAccountState } from '@store/slices/account/account.slice'; -import { modalSlice } from '@store/slices/modal/modal.slice'; -import { vaultSlice } from '@store/slices/vault/vault.slice'; +import { combineReducers, configureStore } from "@reduxjs/toolkit"; +import { accountSlice } from "@store/slices/account/account.slice"; +import { modalSlice } from "@store/slices/modal/modal.slice"; +import { vaultSlice } from "@store/slices/vault/vault.slice"; import { FLUSH, PAUSE, @@ -12,11 +12,11 @@ import { REHYDRATE, persistReducer, persistStore, -} from 'redux-persist'; -import expireReducer from 'redux-persist-expire'; -import storage from 'redux-persist/lib/storage'; +} from "redux-persist"; +// import expireReducer from 'redux-persist-expire'; +import storage from "redux-persist/lib/storage"; -import { mintUnmintSlice } from './slices/mintunmint/mintunmint.slice'; +import { mintUnmintSlice } from "./slices/mintunmint/mintunmint.slice"; export interface RootState { account: ReturnType; @@ -33,9 +33,9 @@ const rootReducer = combineReducers({ }); const persistConfig: PersistConfig = { - key: 'root', + key: "root", storage: storage, - whitelist: ['vault', 'mintunmint'], + whitelist: ["vault", "mintunmint"], // transforms: [ // expireReducer('account', { // persistedAtKey: 'loadedAt', @@ -49,7 +49,7 @@ const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, - middleware: getDefaultMiddleware => + middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], diff --git a/src/app/store/slices/account/account.slice.ts b/src/app/store/slices/account/account.slice.ts index bf4957af..94bb7a23 100644 --- a/src/app/store/slices/account/account.slice.ts +++ b/src/app/store/slices/account/account.slice.ts @@ -2,7 +2,7 @@ import { Network } from "@models/network"; import { WalletType } from "@models/wallet"; import { createSlice } from "@reduxjs/toolkit"; -export interface AccountState { +interface AccountState { address: string | undefined; walletType: WalletType | undefined; network: Network | undefined; @@ -11,7 +11,7 @@ export interface AccountState { loadedAt: string | undefined; } -export const initialAccountState: AccountState = { +const initialAccountState: AccountState = { address: undefined, walletType: undefined, network: undefined, diff --git a/src/app/store/slices/mintunmint/mintunmint.slice.ts b/src/app/store/slices/mintunmint/mintunmint.slice.ts index af076722..2f273d6a 100644 --- a/src/app/store/slices/mintunmint/mintunmint.slice.ts +++ b/src/app/store/slices/mintunmint/mintunmint.slice.ts @@ -1,17 +1,17 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice } from "@reduxjs/toolkit"; -export interface MintUnmintState { +interface MintUnmintState { mintStep: number; unmintStep: number; } -export const initialMintUnmintState: MintUnmintState = { +const initialMintUnmintState: MintUnmintState = { mintStep: 0, unmintStep: 0, }; export const mintUnmintSlice = createSlice({ - name: 'mintunmint', + name: "mintunmint", initialState: initialMintUnmintState, reducers: { setMintStep: (state, action) => { diff --git a/src/app/store/slices/vault/vault.slice.ts b/src/app/store/slices/vault/vault.slice.ts index e4631fe7..84a1fdf3 100644 --- a/src/app/store/slices/vault/vault.slice.ts +++ b/src/app/store/slices/vault/vault.slice.ts @@ -1,6 +1,6 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice } from "@reduxjs/toolkit"; -import { exampleVaults } from '@shared/examples/example-vaults'; +import { exampleVaults } from "@shared/examples/example-vaults"; interface VaultState { vaults: any[]; @@ -10,12 +10,12 @@ interface VaultState { const initialVaultState: VaultState = { vaults: exampleVaults, - status: 'idle', + status: "idle", error: null, }; export const vaultSlice = createSlice({ - name: 'vault', + name: "vault", initialState: initialVaultState, reducers: { setVaults: (state, action) => { @@ -24,7 +24,9 @@ export const vaultSlice = createSlice({ swapVault: (state, action) => { const { vaultUUID, updatedVault } = action.payload; - const vaultIndex = state.vaults.findIndex(vault => vault.uuid === vaultUUID); + const vaultIndex = state.vaults.findIndex( + (vault) => vault.uuid === vaultUUID, + ); if (vaultIndex === -1) { state.vaults.push(updatedVault); diff --git a/src/shared/examples/example-vaults.ts b/src/shared/examples/example-vaults.ts index 842340a1..92bcee87 100644 --- a/src/shared/examples/example-vaults.ts +++ b/src/shared/examples/example-vaults.ts @@ -7,6 +7,7 @@ export const exampleVaults: Vault[] = [ state: VaultState.READY, fundingTX: "", closingTX: "", + timestamp: 1620000000, }, { uuid: "0x123456rty", @@ -14,6 +15,8 @@ export const exampleVaults: Vault[] = [ state: VaultState.READY, fundingTX: "", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456uio", @@ -22,6 +25,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456pas", @@ -30,6 +35,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456dfg", @@ -38,6 +45,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456hjk", @@ -46,6 +55,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456dfe", @@ -54,6 +65,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456hjq", @@ -62,6 +75,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456dfh", @@ -70,6 +85,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456hjl", @@ -78,6 +95,8 @@ export const exampleVaults: Vault[] = [ fundingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "", + timestamp: 1620000000, + }, { uuid: "0x123456lzc", @@ -87,6 +106,8 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + timestamp: 1620000000, + }, { uuid: "0x123456cvb", @@ -96,6 +117,8 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + timestamp: 1620000000, + }, { uuid: "0x123456nmq", @@ -105,6 +128,8 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + timestamp: 1620000000, + }, { uuid: "0x123456pgh", @@ -114,6 +139,8 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + timestamp: 1620000000, + }, { uuid: "0x123456skf", @@ -123,6 +150,8 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + timestamp: 1620000000, + }, { uuid: "0x123456lkh", @@ -132,5 +161,7 @@ export const exampleVaults: Vault[] = [ "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", closingTX: "https://etherscan.io/tx/0xbaf374be66066812e30e428ac5a3bc8d76f8cbc9ed66e3afce68905c183d22b6", + timestamp: 1620000000, + }, ]; diff --git a/src/shared/models/network.ts b/src/shared/models/network.ts index 9f4b4ff7..ef81a13c 100644 --- a/src/shared/models/network.ts +++ b/src/shared/models/network.ts @@ -4,14 +4,14 @@ export interface Network { } export enum EthereumNetwork { - Mainnet = '1', - Goerli = '5', - Sepolia = '6', - X1Testnet = '195', + Mainnet = "1", + Goerli = "5", + Sepolia = "6", + X1Testnet = "195", } const EthreumOKXTestnet: Network = { - name: 'X1test', + name: "X1test", id: EthereumNetwork.X1Testnet, }; diff --git a/src/shared/models/vault.tsx b/src/shared/models/vault.tsx index 198659d8..2c245682 100644 --- a/src/shared/models/vault.tsx +++ b/src/shared/models/vault.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from 'ethers'; +import { BigNumber } from "ethers"; export enum VaultState { READY = 0, diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index c1bb4653..ad2d6b62 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,6 +1,6 @@ /// interface Window { - ethereum: any - btc: any + ethereum: any; + btc: any; }