Release 0.13.1 (#467)

* refactor(cancel-bid): reduce complexity

* test(cancel-bid): improve testing coverage

* feat(nft-view): add cancel bid button to NFT view

* fix(bid-table): better spacing of bid table button

* fix: handle 'wilder.' domain names properly

* fix(zAuction): remove caching so user bids can update

* Update Transfer Flow - add step wizard and modify logic/styles

* feat(useZnsDomain): switch to SDK for domain data retrieval

* complete tooltip step and styling touches

* Switch StakingRequestProvider to Redux

* fix(nft-view): change logic for hiding Your Bid

* feat(accept-bid): use zauction sdk method to accept bid

* review changes

* update constants on NFTDetails

* final fixes

* resolve memory leak console error - prevent state update on unmounted component

* feat(accept-bid): handle pending and completed tx
When pending, show pending message in View Bids
When completed, hide View Bids and add notification

* Fix PR feedback

* add background-primary class to resolve firefox blur issue

* add type policies object to inMemoryCache - set merge to domains query to resolve warning

* remove blur class to prevent !important override

* add HoverDropDown common component and adjust styling - update BuyTokenRedirect and InfoPanel

* implement HoverDropDown to status buttons

* resolve build fail

* Fix compile error

* Fix eslint warnnings

* hover state of zero number button and position of dropdown content element

* minor tweaks to style

* rename and resolve merge conflict

* remove commented code

* attempt to resolve build fail

* switch order of dropdown components in index dropdowns file in attempt to resolve failing tests on circle ci build

* update index.js components - remove * export

* revert file changes

* correct import

* name change hack to push file name changes

* hacky name change to resolve build error step 1

* hacky name change to resolve build error step 2

* update zns-sdk

* update rinkeby zauction address

* push package-lock.json changes

* wip/feat(owned-domains-table): switch to GenericTable component

* ensure content dropdown remains open when over gap between elements

* Refactor Page Container component

* update packages

* Fix to show bid button by setting isBiddable as true as default

* Fix zna in MintNewNFT modal

* feat(nft-view): move transfer button to dropdown

* refactor(nft-view): purge some unused css

* Fix znas string value and link in Mint and Transfer modals

* refactor(metadata): migrate code to use sdk method to fetch metadata in useDomainMetadata

* add useAcceptBit and constants

* WIP implementing zauction approval and approve bid using SDK for accept bid

* refactor(make-a-bid): use SDK for getting bid
Also added some simplifications

* feat: add refetch method to useOwnedDomains

* refactor(owned-domains-table): simplify code

* Merge branch 'develop' into feat/dom/accept-bid-sdk

* refactor(owned-domains-table): remove unimportant comment and import

* feat(owned-domains-table): handle action dropdown and modals

* chore: delete legacy DomainTable component
Good riddance

* remove DomainTable from components index

* refactor: remove unused variables and imports

* buid: upgrade zns-sdk to v0.1.12

* feat(domain-data): add contract to queries and types

* feat(sdk-migration): use sdk method for transfer ownership functionality

* feat(sdk-integration): fix minor issue with zns metadata

* feat(sdk-integration): add provider for zauction sdk

* feat(sdk-integration): add missing field lockedby

* feat(Sdk-integration): use library signer instead of registrar provider signer

* accept bid flow & styling

* resolve failing build - update tests

* feat(sdk-integration): update bid provider to use zAuction SDK

* refactor: remove unused imports

* feat(sdk-integration): add error handling for subdomain table row

* refactor: use zAuction SDK directly instead of through zNS SDK

* minor typo fix and remove comment

* build: upgrade zns sdk to v0.1.13

* refactor: remove unused imports, variables and files related to zAuction

* feat(sdk-integration): reload zns data on network change

* build: upgrade zns sdk to v0.1.14

* build: upgrade zauction sdk to v0.0.40

* refactor: remove zns domain data provider & obsolete queries

* refactor: minor optimizations to use bid provider hook

* refactor: remove obsolete queries, imports and variables

* refactor(subdomain-table): better encapsulation

* feat(sdk-integration): update domain search to use sdk methods

* remove unused BidProvider file

* simplify constants - replace one item objects

* improve text style and tidy code

* tidy up handling of step titles on accept bid flow

* tidy up title handling on transfer ownership flow

* remove duplicate code - generic details component

* extract sort by date functionality

* extract utils to global util directory

* break sentence string on notification drawer due to long domains

* requested changes - update order of flow and minor design tweaks

* resolve failing test

* build: upgrade zfi sdk to v0.1.16

* feat: Allow retrieval of buy now price when no wallet connected (#428)

* chore: upgrade zNS-SDK and zAuction-SDK versions

* feat(zns-sdk-provider): add handling for default provider
Some minor refactoring to make the hook more readable, namely by replacing chain ID numbers with NETWORK_TYPES
Removed unused functions to make file thinner

* fix: allow fetch buy now price without wallet connected

* feat(sdk-integration): refactor the zAuction instance creation

* refactor: delete the queries and obsolete files

* Add StepBar to Accept Bid Flow Wizard

* add missing set step

* minor copy change to price format

* minor naming changes to utils and remove console.log

* remove unused var

* custom max character length for truncateDomain util

* rename truncateAddress to truncateWalletAddress

* allow for truncated domain in Wizard NFTDetails with max length set

* edit accept bid wizard nft details to use truncated domain

* truncate make a bid domain name and update domain color

* Make a bid step 3 truncate domain

* refactor: simplify NFTView container (#424)

* refactor NFTView component

* Update by PR feedback

Co-authored-by: Brett <12437916+colbr@users.noreply.github.com>

* fix: missed change in develop merge

* refactor: remove unneeded dependency

* bump sdk and resolve errors

* Make dApp read ‘stakingrequests’ and ‘stakingRequests’

* error messages to prevent owner transferring to their own account

* rename instances of auctionId to bidNonce

* feat(sdk-integration): update change in properties of bid object

* truncate header if 90 characters

* build: fix failing test cases due to change in data type

* tidy up responsiveness for header/nav bar

* chore: fix lint issues

* build: upgrade zns, zauction and zsale sdk to latest version

* refactor: remove log statment

* replace auctionId with bidNonce

* add version property and disable cancel for version 1 bids

* use version property to disable accept bid for v1 zAuction bids

* revert previous changes

* update cancel bid for version 1 bids

* update tests for v1 and v2 bids

* remove console.log

* bump sdk packages

* chore: npm i

* feedback changes - copy and domain

* resolve conflicts

* remove request table from components index file

* filter own bids out of bid list

* revert deletion of RequestTable

* add missing wilder jpeg

* new lines at end of file - lint

* refactor: rename mint wheels to more generic mint drop nft

* refactor: enable mint drop nft banner

* refactor: add zsale sdk provider

* feat(zsale-integration): update existing helpers to use sdk methods

* feat(zsale-integration): update useMint hook to use sdk methods for nft purchase

* refactor(zsale-integration): remove hard coded values and update to use helpers

* refactor: update sdk providers to hooks

* refactor: fix warnings due to missing keys

* feat(zsale-sdk): update banner sale times for testing

* feat(zsale-sdk): update contract address and merkleTreeFileUri

* fix: add missing NFT name to NFTView

* bug: add missing toast notification drawer

* refactor: remove logs

* remove console log

* add toast notifications to buy now and set buy now flows

* build: upgrade zauction sdk to 0.0.48

* feat(zauction-v2): include bid in zauction methods for backwards compatibility

* remove duplicate error line

* remove duplicate line for failed zAuction

* build: update zauction sdk to v0.0.51

* build: upgrade zauction and zns sdk to latest version

* refactor: add any as type for catch error param

* refactor: update dapp to use zauction through zns sdk

* refactor: remove unused hook useZAuctionSDK

* build: upgrade zNS SDK to v0.1.23

* update zAuction sdk

* Fix biddable feature from domain metadata

* feat(sdk-integration): remove registrar and use sdk method to get lock status

* feat(sdk-integration): update etherscan url

* Remove console log and update the sentence to disabled domain make a bid modal

* Use domain metadata parsing at one place

* fix(subdomain-table): show bid button by default (#448)

* Remove console log on bid steps

* fix(nft-view): use proper metadata title (#451)

* feat(domain-search): fix issue with domain search

* build: fix issue with hot reloading - facebook/create-react-app#11773

* Fix header searching sticky issue

* develop <- master (#457)

* fix: remove 3 from NFTView

* build: increment version number

* fix(history-item): remove cursed 3

* chore: npm i

* chore: bump version number

* build: upgrade zNS SDK to v0.1.27 and zAuction SDK to v0.0.58

* feat: hide banner for now

* chore: SDK version bump, zAuction V2 mainnet address

* refactor: use context API for SDK use (#454)

* Fix to parse domain metadata from current domain instead of parent domain

* fix: Stake Pool table improvements (#413)

* chore: upgrade zFI-SDK to 0.1.16
This upgrade brings faster pool data loading

* fix(stake-pool): fix infinitely loading user balances

* refactor(stake-pool-table): made code slightly more readable

* chore: remove linter warnings

* feat(stake-pool-table): handle failed load
Also some slight refactoring

* test(stake-pool-table): add tests for table row

* fix(stake-pools): fix bug where stake pools wouldn't load

* fix(deposits): fix total stake not loading if 0

* fix(deposits): consistent stat widget height

* chore: bump version number

Co-authored-by: ericlowturing <91501349+ericlowturing@users.noreply.github.com>
Co-authored-by: dominic <domw30@gmail.com>
Co-authored-by: ericlow <eric.l@turing.com>
Co-authored-by: Subrahmanyam Padala <subrahmanyam03@gmail.com>
Co-authored-by: James Earle <j_earle@hotmail.com>
Co-authored-by: Subrahmanyam Padala <subbu@lambda.local>
Co-authored-by: joonchoi0918 <101390821+joonchoi0918@users.noreply.github.com>
Co-authored-by: ericlow <eric.low.dev@gmail.com>
Co-authored-by: eric-zero-dev <91501349+eric-zero-dev@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zns-dapp",
-	"version": "0.13.0",
+	"version": "0.13.1",
 	"private": true,
 	"dependencies": {
 		"@apollo/client": "^3.3.13",

src/App.tsx

@@ -33,6 +33,7 @@ import backgroundImage from 'assets/background.jpg';
 //- Page Imports
 import { ZNS, Staking } from 'pages';
 import PageContainer from 'containers/PageContainer';
+import { ZnsSdkProvider } from 'lib/providers/ZnsSdkProvider';
 
 // Web3 library to query
 function getLibrary(provider: any): Web3Provider {
@@ -93,12 +94,14 @@ function wrappedApp() {
 				<ChainSelectorProvider>
 					<SubgraphProvider>
 						<Web3ReactProvider getLibrary={getLibrary}>
-							{/* Our Hooks  */}
-							<MvpVersionProvider>
-								<EnlistProvider>
-									<App />
-								</EnlistProvider>
-							</MvpVersionProvider>
+							<ZnsSdkProvider>
+								{/* Our Hooks  */}
+								<MvpVersionProvider>
+									<EnlistProvider>
+										<App />
+									</EnlistProvider>
+								</MvpVersionProvider>
+							</ZnsSdkProvider>
 						</Web3ReactProvider>
 					</SubgraphProvider>
 				</ChainSelectorProvider>

src/components/Inputs/TextInput/TextInputWithTopPlaceHolder.tsx

@@ -6,15 +6,14 @@ interface TextInputWithTopPlaceHolderProps extends TextInputProps {
 	topPlaceholder: string;
 }
 
-const TextInputWithTopPlaceHolder: React.FC<
-	TextInputWithTopPlaceHolderProps
-> = ({ topPlaceholder, ...props }) => {
-	return (
-		<div className={styles.TextInputTopPlaceholderWrapper}>
-			<span className={styles.TopPlaceholder}>{topPlaceholder}</span>
-			<TextInput {...props} className={styles.TextInputTopPlaceholder} />
-		</div>
-	);
-};
+const TextInputWithTopPlaceHolder: React.FC<TextInputWithTopPlaceHolderProps> =
+	({ topPlaceholder, ...props }) => {
+		return (
+			<div className={styles.TextInputTopPlaceholderWrapper}>
+				<span className={styles.TopPlaceholder}>{topPlaceholder}</span>
+				<TextInput {...props} className={styles.TextInputTopPlaceholder} />
+			</div>
+		);
+	};
 
 export default TextInputWithTopPlaceHolder;

src/components/Tables/GenericTable/GenericTable.tsx

@@ -2,7 +2,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import styles from './GenericTable.module.scss';
 import { useInView } from 'react-intersection-observer';
-import { useCurrentDomain } from 'lib/providers/CurrentDomainProvider';
 import { usePropsState } from 'lib/hooks/usePropsState';
 import { IconButton, SearchBar, Spinner, TextButton } from 'components';
 import grid from './assets/grid.svg';
@@ -18,9 +17,8 @@ const GenericTable = (props: any) => {
 	///////////////////////
 	// State & Variables //
 	///////////////////////
-	const { domainMetadata } = useCurrentDomain();
 	const isGridViewByDefault =
-		window.innerWidth <= 700 || Boolean(domainMetadata?.gridViewByDefault);
+		window.innerWidth <= 700 || props.isGridViewByDefault;
 
 	// chunk defines which row we're up to when infinite scroll is enabled
 	// i.e., chunk 2 with chunkSize 6 means we've loaded 12 rows

src/containers/Tables/SubdomainTable/SubdomainTable.tsx

@@ -107,6 +107,7 @@ const SubdomainTable = ({ style }: SubdomainTableProps) => {
 				infiniteScroll
 				isLoading={isLoading || isDomainLoading}
 				loadingText={'Loading Subdomains'}
+				isGridViewByDefault={domainMetadata?.gridViewByDefault}
 				style={style}
 			/>
 		</>

src/containers/Tables/SubdomainTable/SubdomainTableCard.tsx

@@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom';
 import { useWeb3React } from '@web3-react/core';
 import { Web3Provider } from '@ethersproject/providers/lib/web3-provider';
 import useCurrency from 'lib/hooks/useCurrency';
-import { useCurrentDomain } from 'lib/providers/CurrentDomainProvider';
+import { useDomainMetadata } from 'lib/hooks/useDomainMetadata';
 import { DomainMetrics } from '@zero-tech/zns-sdk/lib/types';
 import { ethers } from 'ethers';
 import { formatNumber, formatEthers } from 'lib/utils';
@@ -35,7 +35,8 @@ const SubdomainTableCard = (props: any) => {
 	const domain = props.data;
 	const tradeData: DomainMetrics = domain?.metrics;
 
-	const { domainMetadata } = useCurrentDomain();
+	const domainMetadata = useDomainMetadata(domain?.metadata);
+
 	const isRootDomain = domain.name.split('.').length <= 2;
 	const isBiddable =
 		isRootDomain || Boolean(domainMetadata?.isBiddable ?? true);

src/containers/Tables/SubdomainTable/SubdomainTableRow.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { useWeb3React } from '@web3-react/core';
 import { Web3Provider } from '@ethersproject/providers/lib/web3-provider';
-import { useCurrentDomain } from 'lib/providers/CurrentDomainProvider';
+import { useDomainMetadata } from 'lib/hooks/useDomainMetadata';
 
 import { BidButton, BuyNowButton } from 'containers';
 
@@ -29,14 +29,15 @@ const SubdomainTableRow = (props: any) => {
 
 	const { makeABid, updated } = useBid();
 	const { getBidsForDomain } = useBidProvider();
-	const { domainMetadata } = useCurrentDomain();
 	const { instance: sdk } = useZnsSdk();
 
 	const { wildPriceUsd } = useCurrency();
 
 	const domain = props.data;
 	const tradeData: DomainMetrics = domain?.metrics;
 
+	const domainMetadata = useDomainMetadata(domain?.metadata);
+
 	const [bids, setBids] = useState<Bid[] | undefined>();
 	const [buyNowPrice, setBuyNowPrice] = useState<number | undefined>();
 

src/containers/staking/Deposits/Deposits.module.scss

@@ -5,6 +5,9 @@
 	> * {
 		flex: 1;
 
+		height: unset;
+		align-content: stretch;
+
 		&:not(:last-child) {
 			margin-right: 16px;
 		}

src/containers/staking/Deposits/Deposits.tsx

@@ -113,11 +113,11 @@ const Deposits = () => {
 					<StatsWidget
 						className="normalView"
 						fieldName={'Your Total Stake (USD)'}
-						isLoading={account !== null && !totalStakedUsd}
+						isLoading={totalStakedUsd === undefined}
 						title={
 							account && totalStakedUsd !== undefined
 								? '$' + toFiat(totalStakedUsd) + ' USD'
-								: '-'
+								: '$0'
 						}
 					/>
 				</ul>

src/containers/staking/StakePoolTable/StakePoolTable.helpers.tsx → src/containers/staking/StakePoolTable/StakePoolTable.constants.ts

@@ -58,3 +58,7 @@ export const TABLE_HEADERS_DISCONNECTED = [
 		className: '',
 	},
 ];
+
+export enum MESSAGE {
+	FAILED_TO_LOAD = 'Failed to load',
+}

src/containers/staking/StakePoolTable/StakePoolTable.tsx

@@ -8,7 +8,7 @@ import styles from './StakePoolTable.module.scss';
 import {
 	TABLE_HEADERS,
 	TABLE_HEADERS_DISCONNECTED,
-} from './StakePoolTable.helpers';
+} from './StakePoolTable.constants';
 import { useWeb3React } from '@web3-react/core';
 
 const StakePoolTable = () => {

src/containers/staking/StakePoolTable/StakePoolTableRow.test.tsx

@@ -0,0 +1,177 @@
+import '@testing-library/jest-dom/extend-expect';
+import {
+	fireEvent,
+	render,
+	screen,
+	waitForElementToBeRemoved,
+} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { ethers } from 'ethers';
+
+import {
+	MESSAGE,
+	TABLE_HEADERS,
+	TABLE_HEADERS_DISCONNECTED,
+} from './StakePoolTable.constants';
+import StakePoolTableRow, { TEST_ID } from './StakePoolTableRow';
+
+//////////
+// Mock //
+//////////
+
+var mockUserValueStaked = jest.fn();
+
+/**
+ * Note:
+ * This is directly copied from pool output in SDK
+ * as of Fri 18 Mar 2022
+ */
+const mockPoolData = {
+	instance: {
+		address: '0x9E87a268D42B0Aba399C121428fcE2c626Ea01FF',
+		userValueStaked: mockUserValueStaked,
+	},
+	content: {
+		image: '/staking/farm.png',
+		name: 'Farm WILD - WETH LP',
+		token: 'Liquidity Provider',
+		tokenTicker: 'LP',
+		domain: '/pools/lp',
+		tokenPurchaseUrl: '',
+	},
+	metrics: {
+		apy: 145.03269039595662,
+		tvl: {
+			numberOfTokens: 35576.6553275205,
+			valueOfTokensUSD: 6971564.4606713345,
+		},
+	},
+};
+
+const mockUserData = {
+	userValueUnlocked: ethers.utils.parseEther('1000'),
+	userValueLocked: ethers.utils.parseEther('1000'),
+};
+
+var mockAccountValid = { account: '1' };
+var mockAccountInvalid = { account: undefined };
+var mockAccount: { account: string | undefined } = mockAccountValid;
+
+jest.mock('@web3-react/core', () => ({
+	useWeb3React: () => mockAccount,
+}));
+
+var mockSelectStakePool = jest.fn();
+jest.mock('lib/providers/staking/PoolSelectProvider', () => ({
+	useStakingPoolSelector: () => ({
+		selectStakePool: mockSelectStakePool,
+	}),
+}));
+
+///////////
+// Setup //
+///////////
+
+const renderComponent = () => {
+	return render(
+		<table>
+			<tbody>
+				<StakePoolTableRow data={mockPoolData} rowNumber={'1'} />
+			</tbody>
+		</table>,
+	);
+};
+
+const jestConsole = console;
+const consoleError = console.error;
+
+beforeEach(() => {
+	global.console = require('console');
+	console.error = jest.fn();
+});
+
+afterEach(() => {
+	mockAccount = mockAccountValid; // reset mock account value
+	global.console = jestConsole;
+	console.error = consoleError;
+});
+
+///////////
+// Tests //
+///////////
+
+test('should render', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	renderComponent();
+	await screen.findByText(mockPoolData.content.name);
+});
+
+test('should render correct number of columns with wallet connected', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	const { getByTestId } = renderComponent();
+	await screen.findByText(mockPoolData.content.name);
+	expect(getByTestId(TEST_ID.CONTAINER).childElementCount).toBe(
+		TABLE_HEADERS.length,
+	);
+});
+
+test('should render correct number of columns with wallet disconnected', async () => {
+	mockAccount = mockAccountInvalid;
+	const { getByTestId } = renderComponent();
+	await screen.findByText(mockPoolData.content.name);
+	expect(getByTestId(TEST_ID.CONTAINER).childElementCount).toBe(
+		TABLE_HEADERS_DISCONNECTED.length,
+	);
+});
+
+test('should handle row click event', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	const { getByTestId } = renderComponent();
+	await screen.findByText(mockPoolData.content.name);
+	const container = getByTestId(TEST_ID.CONTAINER);
+	fireEvent.click(container);
+	expect(mockSelectStakePool).toBeCalledWith(mockPoolData);
+});
+
+test('should handle button click event', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	renderComponent();
+	await screen.findByText(mockPoolData.content.name);
+	const button = screen.getByRole('button', { name: 'Stake' });
+	fireEvent.mouseUp(button);
+	expect(mockSelectStakePool).toBeCalledWith(mockPoolData);
+});
+
+test('should render spinner while loading', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	const { getByTestId } = renderComponent();
+	const spinner = getByTestId(TEST_ID.SPINNER);
+	expect(spinner).toBeInTheDocument();
+	await waitForElementToBeRemoved(spinner);
+});
+
+test('should handle failed load', async () => {
+	mockUserValueStaked.mockRejectedValue(undefined);
+	renderComponent();
+	await screen.findByText(MESSAGE.FAILED_TO_LOAD);
+	expect(console.error).toBeCalledTimes(1);
+});
+
+test('should format apy correctly', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	renderComponent();
+	await screen.findByText('145.03%');
+});
+
+test('should format total stake correctly', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	renderComponent();
+	await screen.findByText('$6,971,564.46');
+});
+
+test('should format user stake correctly', async () => {
+	mockUserValueStaked.mockResolvedValue(mockUserData);
+	renderComponent();
+	await screen.findByText('2,000.00 ' + mockPoolData.content.tokenTicker);
+});