diff --git a/package-lock.json b/package-lock.json index da1b709d4..63c03745e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.22.0-alpha.12", + "@bosonprotocol/react-kit": "^0.22.0-alpha.16", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.6.1", @@ -2303,9 +2303,9 @@ } }, "node_modules/@bosonprotocol/common": { - "version": "1.24.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.24.0-alpha.9.tgz", - "integrity": "sha512-hwbPMVp/6LpPqa20xBaZzO/jKiVxOWYuZaweSHrwWfaHEtNcXCGOydx0EsFjNRwBY16EwlLJJhl++RnXQ44/vw==", + "version": "1.24.0-alpha.13", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.24.0-alpha.13.tgz", + "integrity": "sha512-mpzpAr+7Kr9MSaQIObcaeQPECHfWFC3DJUQtG2+rMrwH49hdsiK6Oessdj2nRQcYTNaAlCYotsoAGQzsnnSQGA==", "dependencies": { "@bosonprotocol/metadata": "^1.13.0", "@ethersproject/abi": "^5.5.0", @@ -2317,11 +2317,11 @@ } }, "node_modules/@bosonprotocol/core-sdk": { - "version": "1.33.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.33.0-alpha.9.tgz", - "integrity": "sha512-j+bsLYtAA78HU/Wl7zHmW4XhY220FUdgBQIW5BgNyXr7KcEa8eBnBDcbCHEFLsGIPiPwkx4g5pjDUK57tSFoEg==", + "version": "1.33.0-alpha.13", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.33.0-alpha.13.tgz", + "integrity": "sha512-UsYMjgSETKvo8Pam5v4x9xQn4DGmqaqcSJblucbpXijQWKZ+mTQfply86/sFQDF8gXutEoE1eQlPVjSGRimebQ==", "dependencies": { - "@bosonprotocol/common": "^1.24.0-alpha.9", + "@bosonprotocol/common": "^1.24.0-alpha.13", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -2337,11 +2337,11 @@ } }, "node_modules/@bosonprotocol/ethers-sdk": { - "version": "1.12.10-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.10-alpha.9.tgz", - "integrity": "sha512-fXio8iqTOIRaOGRkc1vs7/HATfFnw03qYet9zil5nuzRf9ATRMzaZAriWWRSFDsr//NNvNHHuWqebs6TjlncWQ==", + "version": "1.12.10-alpha.13", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.10-alpha.13.tgz", + "integrity": "sha512-MI9c7BUwdKQ2ypRV7JJoXbF5fkGJbNUOxW0cm2f7OCn/h07gWWBc/wjsEMqlfxz5onmMxC6SVYARN0gTLr/S7A==", "dependencies": { - "@bosonprotocol/common": "^1.24.0-alpha.9" + "@bosonprotocol/common": "^1.24.0-alpha.13" }, "peerDependencies": { "ethers": "^5.5.0" @@ -2367,13 +2367,13 @@ } }, "node_modules/@bosonprotocol/react-kit": { - "version": "0.22.0-alpha.12", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.22.0-alpha.12.tgz", - "integrity": "sha512-iXyq6nK5z4V1eAuKo4U47ZOsx/xJQHWETnjYEldD6+qu9rZo9aLMJIE2CZui80cvk72nm6o36HWBIXa8ks6/yA==", + "version": "0.22.0-alpha.16", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.22.0-alpha.16.tgz", + "integrity": "sha512-pRpFe9E/B7Wsb3NQsVLAVErXxToIhseuirAAAL+BJH0pc7X7FAAzjtIPzp4msR8Q4qCTGZ4oUwGLgedvKIELfA==", "dependencies": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/core-sdk": "^1.33.0-alpha.9", - "@bosonprotocol/ethers-sdk": "^1.12.10-alpha.9", + "@bosonprotocol/core-sdk": "^1.33.0-alpha.13", + "@bosonprotocol/ethers-sdk": "^1.12.10-alpha.13", "@bosonprotocol/ipfs-storage": "^1.10.10", "@davatar/react": "1.11.1", "@ethersproject/units": "5.6.0", @@ -47191,9 +47191,9 @@ } }, "@bosonprotocol/common": { - "version": "1.24.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.24.0-alpha.9.tgz", - "integrity": "sha512-hwbPMVp/6LpPqa20xBaZzO/jKiVxOWYuZaweSHrwWfaHEtNcXCGOydx0EsFjNRwBY16EwlLJJhl++RnXQ44/vw==", + "version": "1.24.0-alpha.13", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.24.0-alpha.13.tgz", + "integrity": "sha512-mpzpAr+7Kr9MSaQIObcaeQPECHfWFC3DJUQtG2+rMrwH49hdsiK6Oessdj2nRQcYTNaAlCYotsoAGQzsnnSQGA==", "requires": { "@bosonprotocol/metadata": "^1.13.0", "@ethersproject/abi": "^5.5.0", @@ -47205,11 +47205,11 @@ } }, "@bosonprotocol/core-sdk": { - "version": "1.33.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.33.0-alpha.9.tgz", - "integrity": "sha512-j+bsLYtAA78HU/Wl7zHmW4XhY220FUdgBQIW5BgNyXr7KcEa8eBnBDcbCHEFLsGIPiPwkx4g5pjDUK57tSFoEg==", + "version": "1.33.0-alpha.13", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.33.0-alpha.13.tgz", + "integrity": "sha512-UsYMjgSETKvo8Pam5v4x9xQn4DGmqaqcSJblucbpXijQWKZ+mTQfply86/sFQDF8gXutEoE1eQlPVjSGRimebQ==", "requires": { - "@bosonprotocol/common": "^1.24.0-alpha.9", + "@bosonprotocol/common": "^1.24.0-alpha.13", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -47225,11 +47225,11 @@ } }, "@bosonprotocol/ethers-sdk": { - "version": "1.12.10-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.10-alpha.9.tgz", - "integrity": "sha512-fXio8iqTOIRaOGRkc1vs7/HATfFnw03qYet9zil5nuzRf9ATRMzaZAriWWRSFDsr//NNvNHHuWqebs6TjlncWQ==", + "version": "1.12.10-alpha.13", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.12.10-alpha.13.tgz", + "integrity": "sha512-MI9c7BUwdKQ2ypRV7JJoXbF5fkGJbNUOxW0cm2f7OCn/h07gWWBc/wjsEMqlfxz5onmMxC6SVYARN0gTLr/S7A==", "requires": { - "@bosonprotocol/common": "^1.24.0-alpha.9" + "@bosonprotocol/common": "^1.24.0-alpha.13" } }, "@bosonprotocol/ipfs-storage": { @@ -47252,13 +47252,13 @@ } }, "@bosonprotocol/react-kit": { - "version": "0.22.0-alpha.12", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.22.0-alpha.12.tgz", - "integrity": "sha512-iXyq6nK5z4V1eAuKo4U47ZOsx/xJQHWETnjYEldD6+qu9rZo9aLMJIE2CZui80cvk72nm6o36HWBIXa8ks6/yA==", + "version": "0.22.0-alpha.16", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.22.0-alpha.16.tgz", + "integrity": "sha512-pRpFe9E/B7Wsb3NQsVLAVErXxToIhseuirAAAL+BJH0pc7X7FAAzjtIPzp4msR8Q4qCTGZ4oUwGLgedvKIELfA==", "requires": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/core-sdk": "^1.33.0-alpha.9", - "@bosonprotocol/ethers-sdk": "^1.12.10-alpha.9", + "@bosonprotocol/core-sdk": "^1.33.0-alpha.13", + "@bosonprotocol/ethers-sdk": "^1.12.10-alpha.13", "@bosonprotocol/ipfs-storage": "^1.10.10", "@davatar/react": "1.11.1", "@ethersproject/units": "5.6.0", diff --git a/package.json b/package.json index e9d59f83f..7b3102a72 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.22.0-alpha.12", + "@bosonprotocol/react-kit": "^0.22.0-alpha.16", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.6.1", diff --git a/src/components/seller/SellerWrapper.tsx b/src/components/seller/SellerWrapper.tsx index a6352e257..a3fc4c708 100644 --- a/src/components/seller/SellerWrapper.tsx +++ b/src/components/seller/SellerWrapper.tsx @@ -2,11 +2,11 @@ import styled from "styled-components"; import { colors } from "../../lib/styles/colors"; import Typography from "../ui/Typography"; - +const margin = "5.5rem"; const SellerMain = styled.main` padding: 1.375rem 2.5rem 2.75rem 2.5rem; background: ${colors.lightGrey}; - min-height: calc(100vh - 5.5rem); + min-height: calc(100vh - ${margin}); overflow: hidden; `; const SellerTitle = styled(Typography)` @@ -18,6 +18,9 @@ const SellerInner = styled.div` box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 2%), 0px 0px 10px 0px rgb(0 0 0 / 2%), 0px 0px 15px 0px rgb(0 0 0 / 5%); overflow: auto; + height: calc(100% - ${margin}); + margin-bottom: ${margin}; + overflow-y: hidden; `; interface Props { diff --git a/src/components/seller/finances/SellerFinances.tsx b/src/components/seller/finances/SellerFinances.tsx index 839035d29..b26fc909f 100644 --- a/src/components/seller/finances/SellerFinances.tsx +++ b/src/components/seller/finances/SellerFinances.tsx @@ -1,522 +1,50 @@ -import dayjs from "dayjs"; -import isBetween from "dayjs/plugin/isBetween"; -import { BigNumber, utils } from "ethers"; -import { - CaretDown, - CaretLeft, - CaretRight, - CaretUp, - WarningCircle -} from "phosphor-react"; -import { useCallback, useEffect, useMemo, useState } from "react"; -import { usePagination, useRowSelect, useSortBy, useTable } from "react-table"; -import styled from "styled-components"; -dayjs.extend(isBetween); +import { useCallSignerFromIframe } from "@bosonprotocol/react-kit"; +import { useConfigContext } from "components/config/ConfigContext"; +import { CONFIG } from "lib/config"; +import { useAccount, useSigner } from "lib/utils/hooks/connection/connection"; +import { useRef, useState } from "react"; -import { Currencies, CurrencyDisplay } from "@bosonprotocol/react-kit"; -import { defaultFontFamily } from "lib/styles/fonts"; - -import { colors } from "../../../lib/styles/colors"; -import { ProgressStatus } from "../../../lib/types/progressStatus"; -import { calcPrice } from "../../../lib/utils/calcPrice"; -import { useModal } from "../../modal/useModal"; -import Tooltip from "../../tooltip/Tooltip"; -import BosonButton from "../../ui/BosonButton"; -import Button from "../../ui/Button"; -import Grid from "../../ui/Grid"; -import Loading from "../../ui/Loading"; -import Typography from "../../ui/Typography"; -import PaginationPages from "../common/PaginationPages"; import { WithSellerDataProps } from "../common/WithSellerData"; import { SellerInsideProps } from "../SellerInside"; - -const Table = styled.table` - width: 100%; - border-collapse: collapse; - th { - font-weight: 600; - color: ${colors.darkGrey}; - :not([data-sortable]) { - cursor: default !important; - } - [data-sortable] { - cursor: pointer !important; - } - } - td { - font-weight: 400; - color: ${colors.black}; - } - th, - td { - font-family: ${defaultFontFamily}; - font-style: normal; - font-size: 0.75rem; - line-height: 1.5; - } - thead { - tr { - th { - border-bottom: 2px solid ${colors.border}; - text-align: left; - padding: 0.5rem; - &:first-child { - padding-left: 0.5rem; - } - &:last-child { - text-align: right; - } - } - } - } - tbody { - tr { - :hover { - td { - background-color: ${colors.darkGrey}08; - cursor: pointer; - } - } - &:not(:last-child) { - td { - border-bottom: 1px solid ${colors.border}; - } - } - td { - text-align: left; - padding: 0.5rem; - &:first-child { - } - &:last-child { - text-align: right; - > button { - display: inline-block; - } - } - } - } - } - [data-testid="price"] { - transform: scale(0.75); - } -`; -const CurrencyName = styled(Typography)` - > div > *:not(svg) { - display: none; - } -`; -const HeaderSorter = styled.span` - margin-left: 0.5rem; -`; -const Pagination = styled.div` - width: 100%; - padding-top: 1rem; - border-top: 2px solid ${colors.border}; - - select { - padding: 0.5rem; - border: 1px solid ${colors.border}; - background: ${colors.white}; - margin: 0 1rem; - } -`; -const Span = styled.span` - font-size: 0.75rem; - color: ${colors.darkGrey}; - &:not(:last-of-type) { - margin-right: 1rem; - } -`; - -const WithdrawButton = styled(Button)` - color: ${colors.secondary}; - border-color: transparent; -`; -const WarningWrapper = styled(Grid)` - svg { - color: ${colors.orange}; - } -`; - +declare const constants: { + // comes from boson-widgets.js + financeUrl: (widgetsHost: string, params: Record) => string; +}; export default function SellerFinances({ - sellerId, - funds: fundsData, - exchangesTokens: exchangesTokensData, - sellerDeposit: sellerDepositData, - offersBacked, - sellerRoles + sellerId }: SellerInsideProps & WithSellerDataProps) { - const { showModal } = useModal(); - const { funds, reload, fundStatus } = fundsData; - const { - isLoading: isLoadingExchangesTokens, - isError: isErrorExchangesTokens, - refetch: exchangesTokensRefetch - } = exchangesTokensData; - const [isFundsInitialized, setIsFundsInitialized] = useState(false); - - const { - refetch: sellerRefetch, - isLoading: isLoadingSellerData, - isError: sellerDataIsError - } = sellerDepositData; - - useEffect(() => { - if (fundStatus === ProgressStatus.SUCCESS && !isFundsInitialized) { - setIsFundsInitialized(true); - } - }, [fundStatus, isFundsInitialized]); - - const columns = useMemo( - () => [ - { - Header: "Token", - accessor: "token", - disableSortBy: false - } as const, - { - Header: "All funds", - accessor: "allFund", - disableSortBy: false - } as const, - { - Header: "Locked funds", - accessor: "lockedFunds", - disableSortBy: false - } as const, - { - Header: "Withdrawable", - accessor: "withdrawable", - disableSortBy: false - } as const, - { - Header: "Offers backed", - accessor: "offersBacked", - disableSortBy: false - } as const, - { - Header: "Action", - accessor: "action", - disableSortBy: true - } as const - ], - [] - ); - - const { offersBackedFn, sellerLockedFunds, threshold } = offersBacked; - - const reloadData = useCallback(() => { - reload(); - sellerRefetch(); - exchangesTokensRefetch(); - }, [reload, sellerRefetch, exchangesTokensRefetch]); - - const offersBackedCell = useCallback( - (value: number | null) => { - if (value === null) { - return null; - } - if (Number(value) < threshold) { - return ( - <> - {value} % - - ); - } - return `${value} %`; - }, - [threshold] - ); - - const data = useMemo( - () => - funds?.map((fund) => { - const decimals = Number(fund?.token?.decimals || 18); - const lockedFunds = sellerLockedFunds?.[fund.token.symbol] ?? "0"; - const lockedFundsFormatted = utils.formatUnits(lockedFunds, decimals); - const withdrawable = calcPrice( - fund.availableAmount, - decimals.toString() - ); - const allFunds = calcPrice( - BigNumber.from(lockedFunds) - .add(BigNumber.from(fund.availableAmount)) - .toString(), - decimals.toString() - ); - return { - token: ( - - {fund.token.symbol} - - - - - ), - allFund: {allFunds}, - lockedFunds: {lockedFundsFormatted}, - withdrawable: {withdrawable}, - offersBacked: ( - - - {offersBackedCell(offersBackedFn(fund))} - - - ), - action: ( - - { - showModal( - "FINANCE_WITHDRAW_MODAL", - { - title: `Withdraw ${fund.token.symbol}`, - protocolBalance: withdrawable, - symbol: fund.token.symbol, - accountId: sellerId, - tokenDecimals: fund.token.decimals, - exchangeToken: fund.token.address, - availableAmount: fund.availableAmount, - reload: reloadData - }, - "auto", - "dark" - ); - }} - > - Withdraw - - { - showModal( - "FINANCE_DEPOSIT_MODAL", - { - title: `Deposit ${fund.token.symbol}`, - protocolBalance: withdrawable, - symbol: fund.token.symbol, - accountId: sellerId, - tokenDecimals: fund.token.decimals, - exchangeToken: fund.token.address, - reload: reloadData - }, - "auto", - "dark" - ); - }} - > - Deposit - - - ) - }; - }), - [ - offersBackedCell, - reloadData, - sellerId, - sellerLockedFunds, - showModal, - funds, - sellerRoles, - offersBackedFn - ] - ); - - const tableProps = useTable( - { - columns, - data, - initialState: { pageIndex: 0 } - }, - useSortBy, - usePagination, - useRowSelect - ); - const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, - page, - prepareRow, - canPreviousPage, - canNextPage, - gotoPage, - nextPage, - previousPage, - setPageSize, - pageCount, - state: { pageIndex, pageSize } - } = tableProps; - - const paginate = useMemo(() => { - return Array.from(Array(pageCount).keys()).slice( - pageIndex < 1 ? 0 : pageIndex - 1, - pageIndex < 1 ? 3 : pageIndex + 2 - ); - }, [pageCount, pageIndex]); - - if (!isFundsInitialized || isLoadingSellerData || isLoadingExchangesTokens) { - return ; - } - - if ( - sellerDataIsError || - fundStatus === ProgressStatus.ERROR || - isErrorExchangesTokens - ) { - // TODO: NO FIGMA REPRESENTATIONS + const { config } = useConfigContext(); + const signer = useSigner(); + const { account = "" } = useAccount(); + const [isIframeLoaded, setIsIframeLoaded] = useState(false); + const iframeRef = useRef(null); + useCallSignerFromIframe({ + iframeRef, + isIframeLoaded, + signer, + childIframeOrigin: CONFIG.widgetsUrl as `http${string}` + }); + if (!constants) { + return

There has been an error

; } return ( - <> - - - {headerGroups.map((headerGroup, key) => ( - - {headerGroup.headers.map((column, i) => { - return ( - - ); - })} - - ))} - - - {(page.length > 0 && - page.map((row, id) => { - prepareRow(row); - return ( - - {row.cells.map((cell, key) => { - return ( - - ); - })} - - ); - })) || ( - - - - )} - -
- {column.render("Header")} - {i >= 0 && !column.disableSortBy && ( - - {column?.isSorted ? ( - column?.isSortedDesc ? ( - - ) : ( - - ) - ) : ( - "" - )} - - )} -
- {cell.render("Cell")} -
- - No data to display - -
- - - - - Show - - per page - - - - {pageCount > 1 && ( - - - {paginate.map((pageNumber: number) => ( - - ))} - - - )} - - - + ); }