diff --git a/.env b/.env index 7d3c3907..17e75969 100644 --- a/.env +++ b/.env @@ -10,7 +10,6 @@ # Server Configs # ----------- # LOG_LEVEL='info' -# HODL_KEY='HODL_HODL_API_KEY' # BASE_PATH='/basePath' # ----------- @@ -24,7 +23,6 @@ # ----------- # FETCH_PRICES=false # FETCH_FEES=false -# HODL_HODL=false # DISABLE_LINKS=true # NO_CLIENT_ACCOUNTS=true # NO_VERSION_CHECK=true diff --git a/Dockerfile b/Dockerfile index 8fc1af4f..12824750 100644 --- a/Dockerfile +++ b/Dockerfile @@ -14,9 +14,6 @@ COPY package.json . COPY package-lock.json . RUN npm install --production --silent -# Install dependencies necessary for build and start -RUN npm install -D cross-env typescript @types/react @next/bundle-analyzer - # --------------- # Build App # --------------- diff --git a/README.md b/README.md index f08276e9..ed94f7b6 100644 --- a/README.md +++ b/README.md @@ -102,22 +102,7 @@ This repository consists of a **NextJS** server that handles both the backend ** ## **Requirements** - Yarn/npm installed -- Node installed (Version 12.16.0 or higher) - -**Older Versions of Node** -Earlier versions of Node can be used if you replace the following commands: - -```js -//Yarn -yarn start -> yarn start:compatible -yarn dev -> yarn dev:compatible - -//NPM -npm start -> npm start:compatible -npm run dev -> npm run dev:compatible -``` - -**HodlHodl integration will not work with older versions of Node!** +- Node installed (Version 10 or higher) --- @@ -132,7 +117,6 @@ You can define some environment variables that ThunderHub can start with. To do # Server Configs # ----------- LOG_LEVEL = 'error' | 'warn' | 'info' | 'http' | 'verbose' | 'debug' | 'silly' # Default: 'info' -HODL_KEY = '[Key provided by HodlHodl]' # Default: '' BASE_PATH = '[Base path where you want to have thunderhub running i.e. '/btcpay']' # Default: '' # ----------- @@ -146,7 +130,6 @@ CURRENCY = 'sat' | 'btc' | 'fiat' # Default: 'sat' # ----------- FETCH_PRICES = true | false # Default: true FETCH_FEES = true | false # Default: true -HODL_HODL = true | false # Default: true DISABLE_LINKS = true | false # Default: false NO_CLIENT_ACCOUNTS = true | false # Default: false NO_VERSION_CHECK = true | false # Default: false @@ -252,11 +235,6 @@ ThunderHub shows you links for quick viewing of nodes by public key on [1ml.com] If you don't want to show these links, you can set `DISABLE_LINKS=true` in your `.env` file. -**HodlHodl** -ThunderHub has a HodlHodl integration to view offers from this platform. - -If you want to disable this integration, you can set `HODL_HODL=false` in your `.env` file. - **Client Accounts** ThunderHub allows you to create accounts on the browser which are also encrypted and stored in the same browser. diff --git a/arm32v7.Dockerfile b/arm32v7.Dockerfile index 47fa8166..233997db 100644 --- a/arm32v7.Dockerfile +++ b/arm32v7.Dockerfile @@ -14,9 +14,6 @@ COPY package.json . COPY package-lock.json . RUN npm install --production --silent -# Install dependencies necessary for build and start -RUN npm install -D cross-env typescript @types/react @next/bundle-analyzer - # --------------- # Build App # --------------- diff --git a/arm64v8.Dockerfile b/arm64v8.Dockerfile index bacad423..f01fe096 100644 --- a/arm64v8.Dockerfile +++ b/arm64v8.Dockerfile @@ -14,9 +14,6 @@ COPY package.json . COPY package-lock.json . RUN npm install --production --silent -# Install dependencies necessary for build and start -RUN npm install -D cross-env typescript @types/react @next/bundle-analyzer - # --------------- # Build App # --------------- diff --git a/next.config.js b/next.config.js index d1261f76..6c99b88e 100644 --- a/next.config.js +++ b/next.config.js @@ -9,7 +9,6 @@ module.exports = withBundleAnalyzer({ serverRuntimeConfig: { nodeEnv: process.env.NODE_ENV || 'development', logLevel: process.env.LOG_LEVEL || 'info', - hodlKey: process.env.HODL_KEY || '', cookiePath: process.env.COOKIE_PATH || '', lnServerUrl: process.env.SSO_SERVER_URL || '', lnCertPath: process.env.SSO_CERT_PATH || '', @@ -26,7 +25,6 @@ module.exports = withBundleAnalyzer({ defaultCurrency: process.env.CURRENCY || 'sat', fetchPrices: process.env.FETCH_PRICES === 'false' ? false : true, fetchFees: process.env.FETCH_FEES === 'false' ? false : true, - hodlhodl: process.env.HODL_HODL === 'false' ? false : true, disableLinks: process.env.DISABLE_LINKS === 'true' ? true : false, noVersionCheck: process.env.NO_VERSION_CHECK === 'true' ? true : false, }, diff --git a/package-lock.json b/package-lock.json index 0e1b8f2e..e2ba698c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9919,58 +9919,6 @@ "sha.js": "^2.4.8" } }, - "cross-env": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz", - "integrity": "sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==", - "dev": true, - "requires": { - "cross-spawn": "^7.0.1" - }, - "dependencies": { - "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "requires": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - } - }, - "path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true - }, - "shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "requires": { - "shebang-regex": "^3.0.0" - } - }, - "shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true - }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - } - } - }, "cross-fetch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.4.tgz", diff --git a/package.json b/package.json index 2ec4a317..56470e19 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,9 @@ "scripts": { "bs": "yarn build && yarn start", "dev": "next", - "dev:compatible": "next", "build": "next build", "start": "next start", "start:two": "next start -p 3001", - "start:compatible": "next start", - "start:compatible:two": "next start -p 3001", "start:cookie": "sh ./scripts/initCookie.sh", "lint": "eslint . --ext ts --ext tsx --ext js", "format": "prettier --write \"**/*.{js,ts,tsx}\"", @@ -19,7 +16,7 @@ "release:push": "standard-version --sign && git push --follow-tags origin master", "release:test": "standard-version --sign --dry-run", "release:minor": "standard-version --sign --release-as minor && git push --follow-tags origin master", - "analyze": "cross-env ANALYZE=true next build", + "analyze": "npx cross-env ANALYZE=true next build", "generate": "graphql-codegen --config codegen.yml && yarn format", "test": "jest", "test:watch": "jest --watch", @@ -38,6 +35,8 @@ "license": "MIT", "dependencies": { "@apollo/client": "^3.1.1", + "@next/bundle-analyzer": "^9.4.4", + "@types/react": "^16.9.43", "apollo-server-micro": "^2.15.1", "balanceofsatoshis": "^5.40.2", "bcryptjs": "^2.4.3", @@ -71,6 +70,7 @@ "styled-components": "^5.1.1", "styled-react-modal": "^2.0.1", "styled-theming": "^2.2.0", + "typescript": "^3.9.6", "underscore": "^1.10.2", "uuid": "^8.2.0", "victory": "^35.0.3", @@ -88,7 +88,6 @@ "@graphql-codegen/typescript-operations": "^1.17.0", "@graphql-codegen/typescript-react-apollo": "^1.17.0", "@graphql-codegen/typescript-resolvers": "^1.17.0", - "@next/bundle-analyzer": "^9.4.4", "@testing-library/jest-dom": "^5.11.0", "@testing-library/react": "^10.4.5", "@types/bcryptjs": "^2.4.2", @@ -104,7 +103,6 @@ "@types/node": "^14.0.22", "@types/numeral": "0.0.28", "@types/qrcode.react": "^1.0.1", - "@types/react": "^16.9.43", "@types/react-copy-to-clipboard": "^4.3.0", "@types/styled-components": "^5.1.1", "@types/styled-react-modal": "^1.2.0", @@ -120,7 +118,6 @@ "babel-plugin-inline-react-svg": "^1.1.1", "babel-plugin-styled-components": "^1.10.7", "babel-preset-react-app": "^9.1.2", - "cross-env": "^7.0.2", "devmoji": "^2.1.9", "eslint": "^7.4.0", "eslint-config-prettier": "^6.11.0", @@ -135,8 +132,7 @@ "jest-fetch-mock": "^3.0.3", "lint-staged": "^10.2.11", "prettier": "^2.0.5", - "standard-version": "^8.0.2", - "typescript": "^3.9.6" + "standard-version": "^8.0.2" }, "husky": { "hooks": { diff --git a/pages/trading.tsx b/pages/trading.tsx deleted file mode 100644 index ce151f77..00000000 --- a/pages/trading.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import React, { useState } from 'react'; -import { toast } from 'react-toastify'; -import { useRouter } from 'next/router'; -import { useGetOffersQuery } from 'src/graphql/hodlhodl/__generated__/query.generated'; -import { GridWrapper } from 'src/components/gridWrapper/GridWrapper'; -import getConfig from 'next/config'; -import { HodlOfferType } from 'src/graphql/types'; -import { NextPageContext } from 'next'; -import { getProps } from 'src/utils/ssr'; -import { - CardWithTitle, - SubTitle, - Card, - DarkSubTitle, - ResponsiveLine, -} from '../src/components/generic/Styled'; -import { LoadingCard } from '../src/components/loading/LoadingCard'; -import { OfferCard } from '../src/views/trading/OfferCard'; -import { OfferFilters } from '../src/views/trading/OfferFilters'; -import { Link } from '../src/components/link/Link'; -import { ColorButton } from '../src/components/buttons/colorButton/ColorButton'; -import { decode } from '../src/utils/helpers'; - -const { publicRuntimeConfig } = getConfig(); -const { hodlhodl } = publicRuntimeConfig; - -export interface QueryProps { - pagination: { - limit: number; - offset: number; - }; - filters: { [key: string]: string }; - sort: { - by: string; - direction: string; - }; -} - -const defaultQuery: QueryProps = { - pagination: { - limit: 25, - offset: 0, - }, - filters: {}, - sort: { - by: '', - direction: '', - }, -}; - -const TradingView = () => { - const { query } = useRouter(); - - let decoded: QueryProps = defaultQuery; - if (query?.filter) { - const { filter } = query; - try { - if (typeof filter === 'string') { - decoded = JSON.parse(decode(filter)); - } else { - decoded = JSON.parse(decode(filter[0])); - } - } catch (error) { - toast.error('Incorrect url.'); - } - } - - const queryObject = { - ...defaultQuery, - ...decoded, - }; - - const [indexOpen, setIndexOpen] = useState(0); - const [page, setPage] = useState(1); - const [fetching, setFetching] = useState(false); - - const { data, loading, fetchMore, error } = useGetOffersQuery({ - skip: !hodlhodl, - variables: { filter: JSON.stringify(queryObject) }, - }); - - if (!hodlhodl) { - return ( - - P2P Trading - - HodlHodl integration is disabled from the server. - - - ); - } - - if (error) { - return ( - - P2P Trading - Failed to connect with HodlHodl. - - ); - } - - if (loading || !data || !data.getOffers) { - return ; - } - - const amountOfOffers = data.getOffers.length; - const { - pagination: { limit }, - } = queryObject; - - return ( - - - P2P Trading - - Powered by HodlHodl - - - - - - - {amountOfOffers <= 0 && No Offers Found} - {data.getOffers.map((offer, index) => ( - - ))} - - {amountOfOffers > 0 && amountOfOffers === limit * page && ( - { - setFetching(true); - - fetchMore({ - variables: { - filter: JSON.stringify({ - ...queryObject, - pagination: { limit, offset: limit * page }, - }), - }, - updateQuery: (prev, { fetchMoreResult: result }) => { - if (!result) return prev; - - setFetching(false); - setPage(prev => prev + 1); - return { - getOffers: [...prev.getOffers, ...result.getOffers], - }; - }, - }); - }} - > - Show More - - )} - - ); -}; - -const Wrapped = () => ( - - - -); - -export default Wrapped; - -export async function getServerSideProps(context: NextPageContext) { - return await getProps(context); -} diff --git a/server/helpers/hodlHelpers.ts b/server/helpers/hodlHelpers.ts deleted file mode 100644 index 5e448d60..00000000 --- a/server/helpers/hodlHelpers.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const getHodlParams = (params: any): string => { - let paramString = '?'; - - for (const key in params) { - if (Object.prototype.hasOwnProperty.call(params, key)) { - const element = params[key]; - - for (const subKey in element) { - if (Object.prototype.hasOwnProperty.call(element, subKey)) { - const subElement = element[subKey]; - paramString = `${paramString}&${key}[${subKey}]=${subElement}`; - } - } - } - } - - return paramString; -}; diff --git a/server/schema/hodlhodl/resolvers.ts b/server/schema/hodlhodl/resolvers.ts deleted file mode 100644 index a4b29ccb..00000000 --- a/server/schema/hodlhodl/resolvers.ts +++ /dev/null @@ -1,103 +0,0 @@ -import getConfig from 'next/config'; -import { ContextType } from 'server/types/apiTypes'; -import { requestLimiter } from 'server/helpers/rateLimiter'; -import { logger } from 'server/helpers/logger'; -import { appUrls } from 'server/utils/appUrls'; -import { getHodlParams } from 'server/helpers/hodlHelpers'; - -const { serverRuntimeConfig } = getConfig() || {}; -const { hodlKey } = serverRuntimeConfig || {}; - -const defaultQuery = { - filters: {}, - sort: { - by: '', - direction: '', - }, -}; - -export const hodlResolvers = { - Query: { - getCountries: async (_: undefined, params: any, context: ContextType) => { - await requestLimiter(context.ip, 'getCountries'); - - const headers = { - Authorization: `Bearer ${hodlKey}`, - }; - - try { - const response = await fetch(`${appUrls.hodlhodl}/v1/countries`, { - headers, - }); - const json = await response.json(); - - if (json) { - const { countries } = json; - return countries; - } - throw new Error('Problem getting HodlHodl countries.'); - } catch (error) { - logger.error('Error getting HodlHodl countries: %o', error); - throw new Error('Problem getting HodlHodl countries.'); - } - }, - getCurrencies: async (_: undefined, params: any, context: ContextType) => { - await requestLimiter(context.ip, 'getCurrencies'); - - const headers = { - Authorization: `Bearer ${hodlKey}`, - }; - - try { - const response = await fetch(`${appUrls.hodlhodl}/v1/currencies`, { - headers, - }); - const json = await response.json(); - - if (json) { - const { currencies } = json; - return currencies; - } - throw new Error('Problem getting HodlHodl currencies.'); - } catch (error) { - logger.error('Error getting HodlHodl currencies: %o', error); - throw new Error('Problem getting HodlHodl currencies.'); - } - }, - getOffers: async (_: undefined, params: any, context: ContextType) => { - await requestLimiter(context.ip, 'getOffers'); - - let queryParams = defaultQuery; - - if (params.filter) { - try { - queryParams = JSON.parse(params.filter); - } catch (error) { - queryParams = defaultQuery; - } - } - - try { - const fullParams = { - ...queryParams, - }; - - const paramString = getHodlParams(fullParams); - - const response = await fetch( - `${appUrls.hodlhodl}/v1/offers${paramString}` - ); - const json = await response.json(); - - if (json) { - const { offers } = json; - return offers; - } - throw new Error('Problem getting HodlHodl offers.'); - } catch (error) { - logger.error('Error getting HodlHodl offers: %o', error); - throw new Error('Problem getting HodlHodl offers.'); - } - }, - }, -}; diff --git a/server/schema/hodlhodl/types.ts b/server/schema/hodlhodl/types.ts deleted file mode 100644 index 998d69a7..00000000 --- a/server/schema/hodlhodl/types.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { gql } from 'apollo-server-micro'; - -export const hodlTypes = gql` - type hodlCountryType { - code: String - name: String - native_name: String - currency_code: String - currency_name: String - } - - type hodlCurrencyType { - code: String - name: String - type: String - } - - type hodlOfferFeeType { - author_fee_rate: String - } - - type hodlOfferPaymentType { - id: String - version: String - payment_method_id: String - payment_method_type: String - payment_method_name: String - } - - type hodlOfferTraderType { - login: String - online_status: String - rating: String - trades_count: Int - url: String - verified: Boolean - verified_by: String - strong_hodler: Boolean - country: String - country_code: String - average_payment_time_minutes: Int - average_release_time_minutes: Int - days_since_last_trade: Int - } - - type hodlOfferType { - id: String - version: String - asset_code: String - searchable: Boolean - country: String - country_code: String - working_now: Boolean - side: String - title: String - description: String - currency_code: String - price: String - min_amount: String - max_amount: String - first_trade_limit: String - fee: hodlOfferFeeType - balance: String - payment_window_minutes: Int - confirmations: Int - payment_method_instructions: [hodlOfferPaymentType] - trader: hodlOfferTraderType - } -`; diff --git a/server/schema/index.ts b/server/schema/index.ts index 8a63c831..fa572de7 100644 --- a/server/schema/index.ts +++ b/server/schema/index.ts @@ -6,8 +6,6 @@ import { authResolvers } from './auth/resolvers'; import { generalTypes, queryTypes, mutationTypes } from './types'; import { accountResolvers } from './account/resolvers'; import { accountTypes } from './account/types'; -import { hodlTypes } from './hodlhodl/types'; -import { hodlResolvers } from './hodlhodl/resolvers'; import { lnpayResolvers } from './lnpay/resolvers'; import { lnpayTypes } from './lnpay/types'; import { bitcoinResolvers } from './bitcoin/resolvers'; @@ -49,7 +47,6 @@ const typeDefs = [ mutationTypes, nodeTypes, accountTypes, - hodlTypes, lnpayTypes, bitcoinTypes, peerTypes, @@ -72,7 +69,6 @@ const resolvers = merge( nodeResolvers, authResolvers, accountResolvers, - hodlResolvers, lnpayResolvers, bitcoinResolvers, peerResolvers, diff --git a/server/schema/types.ts b/server/schema/types.ts index 09e5c33a..5546987d 100644 --- a/server/schema/types.ts +++ b/server/schema/types.ts @@ -74,9 +74,6 @@ export const queryTypes = gql` getPendingChainBalance: Int getChainTransactions: [getTransactionsType] getUtxos: [getUtxosType] - getOffers(filter: String): [hodlOfferType] - getCountries: [hodlCountryType] - getCurrencies: [hodlCurrencyType] getMessages( token: String initialize: Boolean diff --git a/server/utils/appUrls.ts b/server/utils/appUrls.ts index 6f195e26..111b8908 100644 --- a/server/utils/appUrls.ts +++ b/server/utils/appUrls.ts @@ -15,7 +15,6 @@ export const appUrls = { blockchain: 'https://www.blockchain.com/btc/tx/', fees: 'https://mempool.space/api/v1/fees/recommended', ticker: 'https://blockchain.info/ticker', - hodlhodl: 'https://hodlhodl.com/api', github: 'https://api.github.com/repos/apotdevin/thunderhub/releases/latest', update: 'https://github.com/apotdevin/thunderhub#updating', }; diff --git a/src/graphql/hodlhodl/__generated__/query.generated.tsx b/src/graphql/hodlhodl/__generated__/query.generated.tsx deleted file mode 100644 index f09244ba..00000000 --- a/src/graphql/hodlhodl/__generated__/query.generated.tsx +++ /dev/null @@ -1,312 +0,0 @@ -import { - gql, - QueryHookOptions, - useQuery, - useLazyQuery, - QueryResult, - LazyQueryHookOptions, -} from '@apollo/client'; -import * as Types from '../../types'; - -export type GetCountriesQueryVariables = Types.Exact<{ [key: string]: never }>; - -export type GetCountriesQuery = { __typename?: 'Query' } & { - getCountries?: Types.Maybe< - Array< - Types.Maybe< - { __typename?: 'hodlCountryType' } & Pick< - Types.HodlCountryType, - 'code' | 'name' | 'native_name' | 'currency_code' | 'currency_name' - > - > - > - >; -}; - -export type GetCurrenciesQueryVariables = Types.Exact<{ [key: string]: never }>; - -export type GetCurrenciesQuery = { __typename?: 'Query' } & { - getCurrencies?: Types.Maybe< - Array< - Types.Maybe< - { __typename?: 'hodlCurrencyType' } & Pick< - Types.HodlCurrencyType, - 'code' | 'name' | 'type' - > - > - > - >; -}; - -export type GetOffersQueryVariables = Types.Exact<{ - filter?: Types.Maybe; -}>; - -export type GetOffersQuery = { __typename?: 'Query' } & { - getOffers?: Types.Maybe< - Array< - Types.Maybe< - { __typename?: 'hodlOfferType' } & Pick< - Types.HodlOfferType, - | 'id' - | 'asset_code' - | 'country' - | 'country_code' - | 'working_now' - | 'side' - | 'title' - | 'description' - | 'currency_code' - | 'price' - | 'min_amount' - | 'max_amount' - | 'first_trade_limit' - | 'balance' - | 'payment_window_minutes' - | 'confirmations' - > & { - fee?: Types.Maybe< - { __typename?: 'hodlOfferFeeType' } & Pick< - Types.HodlOfferFeeType, - 'author_fee_rate' - > - >; - payment_method_instructions?: Types.Maybe< - Array< - Types.Maybe< - { __typename?: 'hodlOfferPaymentType' } & Pick< - Types.HodlOfferPaymentType, - | 'id' - | 'version' - | 'payment_method_id' - | 'payment_method_type' - | 'payment_method_name' - > - > - > - >; - trader?: Types.Maybe< - { __typename?: 'hodlOfferTraderType' } & Pick< - Types.HodlOfferTraderType, - | 'login' - | 'online_status' - | 'rating' - | 'trades_count' - | 'url' - | 'verified' - | 'verified_by' - | 'strong_hodler' - | 'country' - | 'country_code' - | 'average_payment_time_minutes' - | 'average_release_time_minutes' - | 'days_since_last_trade' - > - >; - } - > - > - >; -}; - -export const GetCountriesDocument = gql` - query GetCountries { - getCountries { - code - name - native_name - currency_code - currency_name - } - } -`; - -/** - * __useGetCountriesQuery__ - * - * To run a query within a React component, call `useGetCountriesQuery` and pass it any options that fit your needs. - * When your component renders, `useGetCountriesQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useGetCountriesQuery({ - * variables: { - * }, - * }); - */ -export function useGetCountriesQuery( - baseOptions?: QueryHookOptions -) { - return useQuery( - GetCountriesDocument, - baseOptions - ); -} -export function useGetCountriesLazyQuery( - baseOptions?: LazyQueryHookOptions< - GetCountriesQuery, - GetCountriesQueryVariables - > -) { - return useLazyQuery( - GetCountriesDocument, - baseOptions - ); -} -export type GetCountriesQueryHookResult = ReturnType< - typeof useGetCountriesQuery ->; -export type GetCountriesLazyQueryHookResult = ReturnType< - typeof useGetCountriesLazyQuery ->; -export type GetCountriesQueryResult = QueryResult< - GetCountriesQuery, - GetCountriesQueryVariables ->; -export const GetCurrenciesDocument = gql` - query GetCurrencies { - getCurrencies { - code - name - type - } - } -`; - -/** - * __useGetCurrenciesQuery__ - * - * To run a query within a React component, call `useGetCurrenciesQuery` and pass it any options that fit your needs. - * When your component renders, `useGetCurrenciesQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useGetCurrenciesQuery({ - * variables: { - * }, - * }); - */ -export function useGetCurrenciesQuery( - baseOptions?: QueryHookOptions< - GetCurrenciesQuery, - GetCurrenciesQueryVariables - > -) { - return useQuery( - GetCurrenciesDocument, - baseOptions - ); -} -export function useGetCurrenciesLazyQuery( - baseOptions?: LazyQueryHookOptions< - GetCurrenciesQuery, - GetCurrenciesQueryVariables - > -) { - return useLazyQuery( - GetCurrenciesDocument, - baseOptions - ); -} -export type GetCurrenciesQueryHookResult = ReturnType< - typeof useGetCurrenciesQuery ->; -export type GetCurrenciesLazyQueryHookResult = ReturnType< - typeof useGetCurrenciesLazyQuery ->; -export type GetCurrenciesQueryResult = QueryResult< - GetCurrenciesQuery, - GetCurrenciesQueryVariables ->; -export const GetOffersDocument = gql` - query GetOffers($filter: String) { - getOffers(filter: $filter) { - id - asset_code - country - country_code - working_now - side - title - description - currency_code - price - min_amount - max_amount - first_trade_limit - fee { - author_fee_rate - } - balance - payment_window_minutes - confirmations - payment_method_instructions { - id - version - payment_method_id - payment_method_type - payment_method_name - } - trader { - login - online_status - rating - trades_count - url - verified - verified_by - strong_hodler - country - country_code - average_payment_time_minutes - average_release_time_minutes - days_since_last_trade - } - } - } -`; - -/** - * __useGetOffersQuery__ - * - * To run a query within a React component, call `useGetOffersQuery` and pass it any options that fit your needs. - * When your component renders, `useGetOffersQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useGetOffersQuery({ - * variables: { - * filter: // value for 'filter' - * }, - * }); - */ -export function useGetOffersQuery( - baseOptions?: QueryHookOptions -) { - return useQuery( - GetOffersDocument, - baseOptions - ); -} -export function useGetOffersLazyQuery( - baseOptions?: LazyQueryHookOptions -) { - return useLazyQuery( - GetOffersDocument, - baseOptions - ); -} -export type GetOffersQueryHookResult = ReturnType; -export type GetOffersLazyQueryHookResult = ReturnType< - typeof useGetOffersLazyQuery ->; -export type GetOffersQueryResult = QueryResult< - GetOffersQuery, - GetOffersQueryVariables ->; diff --git a/src/graphql/hodlhodl/query.ts b/src/graphql/hodlhodl/query.ts deleted file mode 100644 index 68a6ca52..00000000 --- a/src/graphql/hodlhodl/query.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { gql } from '@apollo/client'; - -export const GET_HODL_COUNTRIES = gql` - query GetCountries { - getCountries { - code - name - native_name - currency_code - currency_name - } - } -`; - -export const GET_HODL_CURRENCIES = gql` - query GetCurrencies { - getCurrencies { - code - name - type - } - } -`; - -export const GET_HODL_OFFERS = gql` - query GetOffers($filter: String) { - getOffers(filter: $filter) { - id - asset_code - country - country_code - working_now - side - title - description - currency_code - price - min_amount - max_amount - first_trade_limit - fee { - author_fee_rate - } - balance - payment_window_minutes - confirmations - payment_method_instructions { - id - version - payment_method_id - payment_method_type - payment_method_name - } - trader { - login - online_status - rating - trades_count - url - verified - verified_by - strong_hodler - country - country_code - average_payment_time_minutes - average_release_time_minutes - days_since_last_trade - } - } - } -`; diff --git a/src/graphql/types.ts b/src/graphql/types.ts index 3166b926..dd343615 100644 --- a/src/graphql/types.ts +++ b/src/graphql/types.ts @@ -72,9 +72,6 @@ export type Query = { getPendingChainBalance?: Maybe; getChainTransactions?: Maybe>>; getUtxos?: Maybe>>; - getOffers?: Maybe>>; - getCountries?: Maybe>>; - getCurrencies?: Maybe>>; getMessages?: Maybe; getAuthToken?: Maybe; getSessionToken?: Maybe; @@ -343,78 +340,6 @@ export type ServerAccountType = { loggedIn: Scalars['Boolean']; }; -export type HodlCountryType = { - __typename?: 'hodlCountryType'; - code?: Maybe; - name?: Maybe; - native_name?: Maybe; - currency_code?: Maybe; - currency_name?: Maybe; -}; - -export type HodlCurrencyType = { - __typename?: 'hodlCurrencyType'; - code?: Maybe; - name?: Maybe; - type?: Maybe; -}; - -export type HodlOfferFeeType = { - __typename?: 'hodlOfferFeeType'; - author_fee_rate?: Maybe; -}; - -export type HodlOfferPaymentType = { - __typename?: 'hodlOfferPaymentType'; - id?: Maybe; - version?: Maybe; - payment_method_id?: Maybe; - payment_method_type?: Maybe; - payment_method_name?: Maybe; -}; - -export type HodlOfferTraderType = { - __typename?: 'hodlOfferTraderType'; - login?: Maybe; - online_status?: Maybe; - rating?: Maybe; - trades_count?: Maybe; - url?: Maybe; - verified?: Maybe; - verified_by?: Maybe; - strong_hodler?: Maybe; - country?: Maybe; - country_code?: Maybe; - average_payment_time_minutes?: Maybe; - average_release_time_minutes?: Maybe; - days_since_last_trade?: Maybe; -}; - -export type HodlOfferType = { - __typename?: 'hodlOfferType'; - id?: Maybe; - version?: Maybe; - asset_code?: Maybe; - searchable?: Maybe; - country?: Maybe; - country_code?: Maybe; - working_now?: Maybe; - side?: Maybe; - title?: Maybe; - description?: Maybe; - currency_code?: Maybe; - price?: Maybe; - min_amount?: Maybe; - max_amount?: Maybe; - first_trade_limit?: Maybe; - fee?: Maybe; - balance?: Maybe; - payment_window_minutes?: Maybe; - confirmations?: Maybe; - payment_method_instructions?: Maybe>>; - trader?: Maybe; -}; - export type LnPayInfoType = { __typename?: 'lnPayInfoType'; max?: Maybe; diff --git a/src/layouts/header/Header.tsx b/src/layouts/header/Header.tsx index e03ec029..5cab6016 100644 --- a/src/layouts/header/Header.tsx +++ b/src/layouts/header/Header.tsx @@ -3,7 +3,6 @@ import { Cpu, Menu, X, - CreditCard, MessageCircle, Settings, Home, @@ -11,7 +10,6 @@ import { } from 'react-feather'; import { useTransition, animated } from 'react-spring'; import { useRouter } from 'next/router'; -import getConfig from 'next/config'; import { headerColor, headerTextColor } from '../../styles/Themes'; import { SingleLine } from '../../components/generic/Styled'; import { BurgerMenu } from '../../components/burgerMenu/BurgerMenu'; @@ -30,13 +28,9 @@ import { const MAIN = '/'; const HOME = '/home'; -const TRADER = '/trading'; const CHAT = '/chat'; const SETTINGS = '/settings'; -const { publicRuntimeConfig } = getConfig(); -const { hodlhodl } = publicRuntimeConfig; - export const Header = () => { const { pathname } = useRouter(); const [open, setOpen] = useState(false); @@ -44,7 +38,7 @@ export const Header = () => { const isRoot = pathname === '/'; const showHomeButton = (): boolean => - pathname === TRADER || pathname === CHAT || pathname === SETTINGS; + pathname === CHAT || pathname === SETTINGS; const transitions = useTransition(open, null, { from: { position: 'absolute', opacity: 0 }, @@ -80,7 +74,6 @@ export const Header = () => { {showHomeButton() && renderNavButton(HOME, Home)} - {hodlhodl && renderNavButton(TRADER, CreditCard)} {renderNavButton(CHAT, MessageCircle)} {renderNavButton(SETTINGS, Settings)} diff --git a/src/layouts/navigation/Navigation.tsx b/src/layouts/navigation/Navigation.tsx index 2f71b4ac..cf48ef42 100644 --- a/src/layouts/navigation/Navigation.tsx +++ b/src/layouts/navigation/Navigation.tsx @@ -11,7 +11,6 @@ import { Link as LinkIcon, Repeat, Users, - CreditCard, MessageCircle, BarChart2, Icon, @@ -122,7 +121,6 @@ const CHAIN_TRANS = '/chain'; const TOOLS = '/tools'; const DETAILS = '/details'; const STATS = '/stats'; -const TRADER = '/trading'; const CHAT = '/chat'; const SETTINGS = '/settings'; @@ -190,7 +188,6 @@ export const Navigation = ({ isBurger, setOpen }: NavigationProps) => { {renderBurgerNav('Chain', CHAIN_TRANS, LinkIcon)} {renderBurgerNav('Tools', TOOLS, Shield)} {renderBurgerNav('Stats', STATS, BarChart2)} - {renderBurgerNav('Trading', TRADER, CreditCard)} {renderBurgerNav('Chat', CHAT, MessageCircle)} {renderBurgerNav('Settings', SETTINGS, Settings)} diff --git a/src/views/home/account/pay/Payment.tsx b/src/views/home/account/pay/Payment.tsx index 6f89be12..a3019f0f 100644 --- a/src/views/home/account/pay/Payment.tsx +++ b/src/views/home/account/pay/Payment.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { toast } from 'react-toastify'; -import { ModalType } from 'src/views/trading/Modal/FilterModal'; import { Sub4Title, ResponsiveLine, @@ -14,6 +13,8 @@ import { isLightningInvoice } from '../../../../utils/helpers'; import { RequestModal } from './RequestModal'; import { KeysendModal } from './KeysendModal'; +type ModalType = 'keysend' | 'request' | 'none'; + export const PayCard = ({ setOpen }: { setOpen: () => void }) => { const [request, setRequest] = useState(''); const [modalType, setModalType] = useState('none'); diff --git a/src/views/trading/MethodBoxes.tsx b/src/views/trading/MethodBoxes.tsx deleted file mode 100644 index bc5581c3..00000000 --- a/src/views/trading/MethodBoxes.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { HodlOfferPaymentType } from 'src/graphql/types'; -import { themeColors, subCardColor } from '../../styles/Themes'; - -interface MethodProps { - id: string; - payment_method_type: string; - payment_method_name: string; -} - -interface MethodBoxesProps { - methods?: HodlOfferPaymentType[] | null; -} - -const StyledMethodBoxes = styled.div` - width: 100%; - position: relative; - right: -16px; - top: -26px; - display: flex; - justify-content: flex-end; - margin: 0 0 -24px 0; - flex-wrap: wrap; - overflow: hidden; - height: 23px; -`; - -const StyledMethod = styled.div` - font-size: 12px; - margin: 0 0 0 8px; - border: 1px solid ${themeColors.blue2}; - border-radius: 4px; - padding: 2px 4px; - background: ${subCardColor}; - white-space: nowrap; -`; - -export const MethodBoxes = ({ methods }: MethodBoxesProps) => { - if (!methods?.length) return null; - - return ( - - {methods.map((method, index) => ( - - {method.payment_method_name} - - ))} - - ); -}; diff --git a/src/views/trading/Modal/FilterModal.tsx b/src/views/trading/Modal/FilterModal.tsx deleted file mode 100644 index 0b2f20e2..00000000 --- a/src/views/trading/Modal/FilterModal.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import React, { useState, useEffect, Dispatch } from 'react'; -import ScaleLoader from 'react-spinners/ScaleLoader'; -import { toast } from 'react-toastify'; -import { - useGetCountriesQuery, - useGetCurrenciesQuery, - GetCountriesQuery, - GetCurrenciesQuery, -} from 'src/graphql/hodlhodl/__generated__/query.generated'; -import { HodlCountryType, HodlCurrencyType } from 'src/graphql/types'; -import { SubTitle } from '../../../components/generic/Styled'; -import { SortOptions, NewOptions } from '../OfferConfigs'; -import { FilterType, FilterActionType } from '../OfferFilters'; -import { themeColors } from '../../../styles/Themes'; -import { OptionsLoading } from '../OfferCard.styled'; -import { FilteredList, FilteredOptionsProps } from './FilteredList'; - -export type ModalType = 'keysend' | 'request' | 'none' | 'new' | 'sort'; -interface FilterProps { - type: string; - dispatch: Dispatch; - final?: { title: string; name: string; searchable?: boolean }; - newOptions?: FilterType[]; - setModalType: (type: ModalType) => void; -} - -interface CountryType { - code: string; - name: string; - native_name: string; - currency_code: string; - currency_name: string; -} - -interface CurrencyType { - code: string; - name: string; - type: string; -} - -export const FilterModal = ({ - type, - dispatch, - final, - newOptions, - setModalType, -}: FilterProps) => { - const searchable: boolean = final?.searchable ?? false; - const skipable: boolean = type !== 'Country' && type !== 'Currency'; - - const [selected, setSelected] = useState(); - - const [options, setOptions] = useState(newOptions ?? []); - const [title, setTitle] = useState(final?.title ?? ''); - - const useQuery = - type === 'Country' ? useGetCountriesQuery : useGetCurrenciesQuery; - - const { loading, data, error } = useQuery({ - skip: skipable, - onError: () => toast.error('Error Loading Options. Please try again.'), - }); - - useEffect(() => { - switch (type) { - case 'sort': - setTitle('Sort Offers by:'); - setOptions(SortOptions); - break; - case 'new': - setTitle('Add New Filter:'); - setOptions(NewOptions); - break; - default: - break; - } - }, [type]); - - useEffect(() => { - if (!loading && data && (data as GetCountriesQuery).getCountries) { - const countryOptions = - (data as GetCountriesQuery).getCountries?.map(country => { - const { code, name, native_name } = country as HodlCountryType; - return { name: code || '', title: `${name} (${native_name})` }; - }) || []; - - setOptions(countryOptions); - } - if (!loading && data && (data as GetCurrenciesQuery).getCurrencies) { - const filtered = - (data as GetCurrenciesQuery).getCurrencies?.filter( - currency => currency?.type === 'fiat' - ) || []; - - const currencyOptions = filtered.map(currency => { - const { code, name } = currency as HodlCurrencyType; - return { name: code || '', title: name || '' }; - }); - - setOptions(currencyOptions); - } - }, [data, loading]); - - const handleClick = (name: string, option: FilteredOptionsProps) => () => { - if (final) { - dispatch({ - type: 'addFilter', - newItem: { [final.name]: name }, - }); - setModalType('none'); - } - switch (type) { - case 'sort': - if (name === 'none') { - dispatch({ - type: 'removeSort', - }); - } else { - dispatch({ - type: 'addSort', - newItem: { by: name }, - }); - } - setModalType('none'); - break; - case 'new': - setSelected(option); - break; - default: - break; - } - }; - - if (error) { - return null; - } - - if (selected) { - return ( - - ); - } - - return ( - <> - {title} - - - {loading && } - - - ); -}; diff --git a/src/views/trading/Modal/FilteredList.tsx b/src/views/trading/Modal/FilteredList.tsx deleted file mode 100644 index bf543b9c..00000000 --- a/src/views/trading/Modal/FilteredList.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { ColorButton } from '../../../components/buttons/colorButton/ColorButton'; -import { OfferModalBox } from '../OfferCard.styled'; -import { Input } from '../../../components/input/Input'; -import { Sub4Title } from '../../../components/generic/Styled'; -import { FilterType } from '../OfferFilters'; - -interface FilteredProps { - searchable: boolean; - options: FilterType[]; - handleClick: (name: string, option: FilteredOptionsProps) => () => void; -} - -export interface FilteredOptionsProps { - name: string; - title: string; - options?: FilterType[]; -} - -export const FilteredList = ({ - searchable, - options, - handleClick, -}: FilteredProps) => { - const [searchTerm, setSearchTerm] = useState(''); - const [filteredOptions, setOptions] = useState( - options - ); - - useEffect(() => { - const filtered = options.filter( - (option: { name: string; title: string }) => { - const inName = option.name - .toLowerCase() - .includes(searchTerm.toLowerCase()); - const inTitle = option.title - .toLowerCase() - .includes(searchTerm.toLowerCase()); - - return inName || inTitle; - } - ); - setOptions(filtered); - }, [searchTerm, options]); - - const handleChange = (event: React.ChangeEvent) => { - setSearchTerm(event.target.value); - }; - - return ( - <> - {searchable && ( - - )} - - {filteredOptions.length > 0 ? ( - filteredOptions.map((option, index) => ( - - {option.title} - - )) - ) : ( - No results - )} - - - ); -}; diff --git a/src/views/trading/OfferCard.styled.tsx b/src/views/trading/OfferCard.styled.tsx deleted file mode 100644 index a67d2c18..00000000 --- a/src/views/trading/OfferCard.styled.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import styled from 'styled-components'; -import { ChevronRight } from 'react-feather'; -import { unSelectedNavButton, mediaWidths } from '../../styles/Themes'; - -export const TradesAmount = styled.div` - font-size: 14px; - color: ${unSelectedNavButton}; - margin: 0 4px; -`; - -export const StyleArrow = styled(ChevronRight)` - margin-bottom: -3px; -`; - -export const OfferModalBox = styled.div` - overflow-y: auto; - max-height: 640px; - min-height: 240px; - @media (${mediaWidths.mobile}) { - max-height: 240px; - min-height: 120px; - } -`; - -export const StyledTitle = styled.div` - font-size: 14px; - margin: 16px 0; - - @media (${mediaWidths.mobile}) { - text-align: center; - margin-top: 8px; - } -`; - -export const StyledLogin = styled.div` - max-width: 160px; - overflow: hidden; - text-overflow: ellipsis; -`; - -export const StyledDescription = styled(StyledLogin)` - max-width: unset; - overflow-y: auto; - font-size: 14px; - max-height: 160px; -`; - -export const OptionsLoading = styled.div` - display: flex; - height: 100%; - width: 100%; - justify-content: center; - align-items: center; -`; diff --git a/src/views/trading/OfferCard.tsx b/src/views/trading/OfferCard.tsx deleted file mode 100644 index bbf2c6d0..00000000 --- a/src/views/trading/OfferCard.tsx +++ /dev/null @@ -1,192 +0,0 @@ -import React from 'react'; -import numeral from 'numeral'; -import { HodlOfferType, HodlOfferPaymentType } from 'src/graphql/types'; -import { - SubCard, - Sub4Title, - SubTitle, - SingleLine, - ResponsiveLine, - Separation, -} from '../../components/generic/Styled'; -import { Rating } from '../../components/rating/Rating'; -import { MainInfo } from '../../components/generic/CardGeneric'; -import { themeColors } from '../../styles/Themes'; -import { renderLine } from '../../components/generic/helpers'; -import { Link } from '../../components/link/Link'; -import { ColorButton } from '../../components/buttons/colorButton/ColorButton'; -import { MethodBoxes } from './MethodBoxes'; -import { - TradesAmount, - StyleArrow, - StyledTitle, - StyledLogin, - StyledDescription, -} from './OfferCard.styled'; - -const format = (value: number | string | null | undefined, format = '0,0.00') => - value ? numeral(value).format(format) : null; - -interface OfferCardProps { - offer: HodlOfferType; - index: number; - setIndexOpen: (index: number) => void; - indexOpen: number; -} - -export const OfferCard = ({ - offer, - index, - setIndexOpen, - indexOpen, -}: OfferCardProps) => { - const { - id, - asset_code, - country, - country_code, - working_now, - side, - title, - description, - currency_code, - price, - min_amount, - max_amount, - first_trade_limit, - fee, - balance, - payment_window_minutes, - confirmations, - payment_method_instructions, - trader, - } = offer; - - const { author_fee_rate } = fee || {}; - - const { - login, - online_status, - rating, - trades_count = 0, - url, - verified, - verified_by, - strong_hodler, - country: traderCountry, - country_code: traderCode, - average_payment_time_minutes, - average_release_time_minutes, - days_since_last_trade, - } = trader || {}; - - const handleClick = () => { - if (indexOpen === index) { - setIndexOpen(0); - } else { - setIndexOpen(index); - } - }; - - const renderPayments = (): string => { - if (payment_method_instructions) { - const methods = payment_method_instructions.map(method => - method - ? `${method.payment_method_name} (${method.payment_method_type})` - : '' - ); - - return methods.join(', '); - } - return ''; - }; - - const renderDetails = () => ( - <> - - {description} - - {renderLine('Price', format(price))} - {renderLine('Min Amount:', format(min_amount))} - {renderLine('Max Amount:', format(max_amount))} - {renderLine('First Trade Limit:', format(first_trade_limit))} - {renderLine('Payment Options:', renderPayments())} - {renderLine('Country:', `${country} (${country_code})`)} - {renderLine('Available Now:', working_now ? 'Yes' : 'No')} - {renderLine('Balance:', format(balance))} - {renderLine('Payment Window (min):', payment_window_minutes)} - {renderLine('Confirmations:', confirmations)} - {renderLine('Fee Rate:', `${format(Number(author_fee_rate) * 100)}%`)} - - Trader - {renderLine('User:', login)} - {renderLine('Online:', online_status)} - {renderLine('Rating:', rating)} - {renderLine('Amount of Trades:', trades_count)} - {renderLine('Verified:', verified ? 'True' : 'False')} - {renderLine('Verified By:', verified_by)} - {renderLine('Strong Hodler:', strong_hodler ? 'True' : 'False')} - {renderLine('Country:', `${traderCountry} (${traderCode})`)} - {renderLine('Average Payment Time (min):', average_payment_time_minutes)} - {renderLine('Average Release Time (min):', average_release_time_minutes)} - {renderLine('Days since last trade:', days_since_last_trade)} - - - - View Offer - - - {url && ( - - - View trader - - - )} - - - ); - - return ( - - handleClick()}> - - - - {side !== 'buy' ? asset_code : currency_code} - - {side !== 'buy' ? currency_code : asset_code} - - - {login} - {(trades_count || 0) > 0 && ( - {`(${trades_count}) `} - )} - - - - {title} - {renderLine('Price:', format(price))} - {renderLine( - 'Min/Max amount:', - `${format(min_amount, '0a')}/${format(max_amount, '0a')}` - )} - - {index === indexOpen && renderDetails()} - - ); -}; diff --git a/src/views/trading/OfferConfigs.tsx b/src/views/trading/OfferConfigs.tsx deleted file mode 100644 index d1084e9f..00000000 --- a/src/views/trading/OfferConfigs.tsx +++ /dev/null @@ -1,141 +0,0 @@ -export const SortOptions = [ - { - name: 'none', - title: 'None', - }, - { - name: 'price', - title: 'Price', - }, - { - name: 'payment_window_minutes', - title: 'Payment Window', - }, - { - name: 'user_average_payment_time_minutes', - title: 'Average Payment Time', - }, - { - name: 'user_average_release_time_minutes', - title: 'Average Release Time', - }, - { - name: 'rating', - title: 'Rating', - }, -]; - -export const NewOptions = [ - { - name: 'asset_code', - title: 'Asset Code', - options: [ - { - name: 'BTC', - title: 'Bitcoin', - }, - { - name: 'BTCLN', - title: 'Lightning Bitcoin', - }, - ], - }, - { - name: 'side', - title: 'Side', - options: [ - { - name: 'buy', - title: 'I want to sell Bitcoin', - }, - { - name: 'sell', - title: 'I want to buy Bitcoin', - }, - ], - }, - { - name: 'include_global', - title: 'Include Global Offers', - options: [ - { - name: 'true', - title: 'Yes', - }, - { - name: 'false', - title: 'No', - }, - ], - }, - { - name: 'only_working_now', - title: 'Only Working Now Offers', - options: [ - { - name: 'true', - title: 'Yes', - }, - { - name: 'false', - title: 'No', - }, - ], - }, - { - name: 'country', - title: 'Country', - searchable: true, - }, - { - name: 'currency_code', - title: 'Currency', - searchable: true, - }, - { - name: 'payment_method_type', - title: 'Payment Type', - options: [ - { - name: 'Bank wire', - title: 'Bank wire', - }, - { - name: 'Cash', - title: 'Cash', - }, - { - name: 'Cryptocurrency', - title: 'Cryptocurrency', - }, - { - name: 'Online payment system', - title: 'Online payment system', - }, - ], - }, - // { - // name: 'payment_method_id', - // title: 'Payment Id', - // }, - // { - // name: 'payment_method_name', - // title: 'Payment Name', - // }, - // { - // name: 'volume', - // title: 'Volume', - // }, - // { - // name: 'payment_window_minutes_max', - // title: 'Max Payment Window', - // }, - // { - // name: 'user_average_payment_time_minutes_max', - // title: 'Max User Payment Time', - // }, - // { - // name: 'user_average_release_time_minutes_max', - // title: 'Max User Release Time', - // }, -]; diff --git a/src/views/trading/OfferFilters.tsx b/src/views/trading/OfferFilters.tsx deleted file mode 100644 index d8ea4a29..00000000 --- a/src/views/trading/OfferFilters.tsx +++ /dev/null @@ -1,237 +0,0 @@ -import React, { useState, useReducer } from 'react'; -import { X } from 'react-feather'; -import { useRouter } from 'next/router'; -import { - SingleLine, - Separation, - ResponsiveLine, - NoWrapTitle, -} from '../../components/generic/Styled'; -import { ColorButton } from '../../components/buttons/colorButton/ColorButton'; -import { - MultiButton, - SingleButton, -} from '../../components/buttons/multiButton/MultiButton'; -import Modal from '../../components/modal/ReactModal'; -import { QueryProps } from '../../../pages/trading'; -import { renderLine } from '../../components/generic/helpers'; -import { chartColors } from '../../styles/Themes'; -import { encode } from '../../utils/helpers'; -import { appendBasePath } from '../../utils/basePath'; -import { SortOptions } from './OfferConfigs'; -import { FilterModal, ModalType } from './Modal/FilterModal'; - -export type FilterActionType = { - type: 'addFilter' | 'addSort' | 'removeSort' | 'removeFilter' | 'changeLimit'; - state?: QueryProps; - newItem?: {}; - removeKey?: string; - changeLimit?: number; -}; - -const reducer = (state: QueryProps, action: FilterActionType): QueryProps => { - const { sort, filters } = state; - switch (action.type) { - case 'addSort': { - let direction = {}; - if (sort && !sort.direction) { - direction = { direction: 'desc' }; - } - const newSort = { ...sort, ...direction, ...action.newItem }; - return { ...state, sort: newSort }; - } - case 'removeSort': - return { ...state, sort: { by: '', direction: '' } }; - case 'addFilter': { - const newFilters = { ...filters, ...action.newItem }; - return { ...state, filters: newFilters }; - } - case 'removeFilter': - if (action.removeKey) { - const remaining = { ...filters }; - delete remaining[action.removeKey]; - return { ...state, filters: remaining }; - } - return state; - case 'changeLimit': - if (action.changeLimit) { - return { - ...state, - pagination: { limit: action.changeLimit, offset: 0 }, - }; - } - return state; - default: - throw new Error(); - } -}; - -interface FilterProps { - offerFilters: QueryProps; -} - -export interface FilterType { - name: string; - title: string; - optionOne?: string; - optionTwo?: string; -} - -export const OfferFilters = ({ offerFilters }: FilterProps) => { - const { push } = useRouter(); - - const [filterState, dispatch] = useReducer(reducer, offerFilters); - - const [modalType, setModalType] = useState('none'); - const [willApply, setWillApply] = useState(false); - - const renderButton = ( - onClick: () => void, - text: string, - selected: boolean - ) => ( - - {text} - - ); - - const handleSave = () => { - const stringFormat = JSON.stringify(filterState); - const encoded = encode(stringFormat); - push(appendBasePath(`/trading?filter=${encoded}`)); - }; - - const handleRemoveAll = () => push(appendBasePath('/trading')); - - const handleRemove = (removeKey: string) => { - dispatch({ type: 'removeFilter', removeKey }); - }; - - const renderAppliedFilters = () => { - const currentFilters = filterState.filters; - const activeFilters = Object.entries(currentFilters).map(([key, element]) => - renderLine(key, element, `${key}-${element}`, () => handleRemove(key)) - ); - return <>{activeFilters}; - }; - - const renderLimitOptions = () => { - const currentLimit = filterState.pagination.limit; - - const renderButton = (value: number, margin?: string) => ( - dispatch({ type: 'changeLimit', changeLimit: value })} - selected={currentLimit === value} - withMargin={margin} - > - {value} - - ); - - return ( - - {renderButton(25)} - {renderButton(50, '0 4px 0')} - {renderButton(100)} - - ); - }; - - const renderFilters = () => { - return ( - <> - - - Results: - {renderLimitOptions()} - - - - Filters - setModalType('new')}> - New Filter - - - {Object.keys(filterState.filters).length > 0 && renderAppliedFilters()} - - - Sort By: - setModalType('sort')}> - {SortOptions.find(option => option.name === filterState.sort.by) - ?.title ?? 'None'} - - - {!!filterState.sort.by && ( - - Sort Direction: - - {renderButton( - () => { - dispatch({ - type: 'addSort', - newItem: { direction: 'asc' }, - }); - }, - 'Asc', - filterState.sort.direction === 'asc' - )} - {renderButton( - () => { - dispatch({ - type: 'addSort', - newItem: { direction: 'desc' }, - }); - }, - 'Desc', - filterState.sort.direction !== 'asc' - )} - - - )} - - - - Filter - - - Remove All - - - - ); - }; - - return ( - <> - - Filters - setWillApply(prev => !prev)} - > - {willApply ? : 'Apply'} - - - {willApply && renderFilters()} - setModalType('none')} - > - - - - ); -};