feat(react): zustand (#31)

.gitattributes

@@ -0,0 +1 @@
+*.txt ident

.gitignore

@@ -1,4 +1,5 @@
-
+.idea/
+.vscode/
 .DS_Store 
 node_modules
 /.pnp

__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+// __mocks__/fileMock.js
+module.exports = 'test-file-stub'

__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+// __mocks__/styleMock.js
+module.exports = {}

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
     presets: ['@babel/preset-env', '@babel/preset-typescript', 'next/babel']
-}
+}

components/connectAccount.tsx

@@ -21,7 +21,8 @@ export default function ConnectAccount() {
               </h3>
               <br />
               <br />
-              <p>release v.0.6.0</p>
+              <p>release v.0.7.2. - v2022.01.02 </p>
+              <p>evtag: bc02400352968b9490fa23f3348313093e972a01</p>
             </div>
 
             <Button onClick={openWalletModal}>{`Connect Wallet`}</Button>

components/mint/deposit.tsx

@@ -9,10 +9,10 @@ import { commify, formatUnits, parseUnits } from '@ethersproject/units';
 import { useDictatorDAO, useTokenContract } from '@/hooks/useContract';
 import { useMemo, useState } from 'react';
 
-import { BigNumber } from '@ethersproject/bignumber';
-import { BigNumberish } from 'ethers';
+import { BigNumber, BigNumberish } from '@ethersproject/bignumber';
+
 import { CONTRACT_ADDRESSES } from '@/constants/contracts';
-import { DOMODAO as DictatorDao } from '@/contracts/types';
+//import { DOMODAO as DictatorDao } from '@/contracts/types';
 import type { FormEvent } from 'react';
 import NumericalInput from '../numericalInput';
 import { Popover } from '@headlessui/react';
@@ -44,11 +44,11 @@ export default function MintDeposit() {
 
   const { mutate: foldBalanceMutate } = useTokenBalance(
     account,
-    TOKEN_ADDRESSES.xFOLD[chainId],
+    TOKEN_ADDRESSES.XFOLD[chainId],
   );
 
   const { data: totalSupply, mutate: totalSupplyMutate } = useTotalSupply(
-    TOKEN_ADDRESSES.xFOLD[chainId],
+    TOKEN_ADDRESSES.XFOLD[chainId],
   );
 
   const formattedTotalSupply = useFormattedBigNumber(totalSupply, 0);
@@ -63,7 +63,7 @@ export default function MintDeposit() {
     useTokenAllowance(
       mintToken?.address,
       account,
-      CONTRACT_ADDRESSES.Staking[chainId],
+      CONTRACT_ADDRESSES.XFOLD[chainId],
     );
 
   const formattedDepositBalance = useFormattedBigNumber(mintTokenBalance, 4);
@@ -160,7 +160,7 @@ export default function MintDeposit() {
 
     try {
       const transaction = await mintTokenContract.approve(
-        CONTRACT_ADDRESSES.Staking[chainId],
+        CONTRACT_ADDRESSES.XFOLD[chainId],
         MaxUint256,
       );
 
@@ -229,35 +229,6 @@ export default function MintDeposit() {
                     <span>%</span>
                   </div>
                 </div>
-
-                <div>
-                  <label
-                    className="block mb-2 text-sm text-gray-300"
-                    htmlFor="liquidationFee"
-                  >
-                    Liquidity Position Price
-                  </label>
-
-                  <div className="flex px-3 py-1 rounded-md bg-primary focus-within:ring-4">
-                    <input
-                      autoComplete="off"
-                      autoCorrect="off"
-                      inputMode="numeric"
-                      id="liquidationFee"
-                      name="liquidationFee"
-                      placeholder="10"
-                      step={0.1}
-                      max={10}
-                      min={0}
-                      className="hide-number-input-arrows w-full text-right appearance-none bg-transparent focus:outline-none mr-0.5 text-white"
-                      spellCheck="false"
-                      type="number"
-                      {...slippageInput.eventBind}
-                    />
-
-                    <span>%</span>
-                  </div>
-                </div>
               </div>
             </div>
           </Popover.Panel>
@@ -305,15 +276,15 @@ export default function MintDeposit() {
       <div className="w-full h-px bg-primary-300" />
 
       <div className="flex justify-between">
-        <p className="leading-none">xFOLD Received</p>
+        <p className="leading-none">XFOLD Received</p>
 
         <p className="leading-none">
           {formattedFoldAmountOut === '0.00' ? `-` : formattedFoldAmountOut}
         </p>
       </div>
 
       <div className="flex justify-between">
-        <p className="leading-none">xFOLD Supply</p>
+        <p className="leading-none">XFOLD Supply</p>
 
         <p className="leading-none">{`${formattedTotalSupply} / ${commify(
           MAX_FOLD_MINTABLE,
@@ -339,12 +310,3 @@ export default function MintDeposit() {
     </form>
   );
 }
-
-function amount(
-  amount: any,
-  BigNumberish: any,
-  operatorVote: any,
-  string: any,
-) {
-  throw new Error('Function not implemented.');
-}

components/overflowMenu.tsx

@@ -1,4 +1,4 @@
-import { SUSHI_SWAP_LINKS } from '@/constants/tokens';
+// import { SUSHI_SWAP_LINKS } from '@/constants/tokens';
 import { Menu } from '@headlessui/react';
 import cn from 'classnames';
 import Link from 'next/link';
@@ -20,15 +20,17 @@ const menuItemClassNames =
 export default function OverflowMenu() {
   return (
     <Menu as="div" className="relative">
-      <Menu.Button className="inline-flex space-x-2 w-full px-3 py-3 bg-primary-400 ring-1 ring-inset ring-white ring-opacity-10 text-sm rounded-xl focus:outline-none focus-visible:ring-opacity-20 hover:ring-opacity-20">
+      <Menu.Button className="inline-flex px-3 py-3 space-x-2 w-full text-sm rounded-xl ring-1 ring-inset ring-white ring-opacity-10 bg-primary-400 focus:outline-none focus-visible:ring-opacity-20 hover:ring-opacity-20">
         <MoreHorizontal size={20} />
       </Menu.Button>
 
-      <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-primary-400 ring-1 ring-inset ring-white ring-opacity-10 rounded-lg focus:outline-none p-1 z-50">
+      <Menu.Items className="absolute right-0 z-50 p-1 mt-2 w-56 rounded-lg ring-1 ring-inset ring-white ring-opacity-10 origin-top-right bg-primary-400 focus:outline-none">
         <Menu.Item>
           {({ active }) => (
             <a
-              href={SUSHI_SWAP_LINKS.FOLD}
+              href={
+                'https://app.sushi.com/swap?outputCurrency=0xd084944d3c05CD115C09d072B9F44bA3E0E45921'
+              }
               target="_blank"
               rel="noopener noreferrer"
               className={cn(menuItemClassNames, active && 'bg-white/[0.10]')}
@@ -40,12 +42,14 @@ export default function OverflowMenu() {
         <Menu.Item>
           {({ active }) => (
             <a
-              href={SUSHI_SWAP_LINKS.xFOLD}
+              href={
+                'ttps://app.sushi.com/swap?outputCurrency=0x454BD9E2B29EB5963048cC1A8BD6fD44e89899Cb'
+              }
               target="_blank"
               rel="noopener noreferrer"
               className={cn(menuItemClassNames, active && 'bg-white/[0.10]')}
             >
-              xFOLD
+              XFOLD
             </a>
           )}
         </Menu.Item>

components/stake/depositStake.tsx

@@ -17,7 +17,7 @@ import { useMemo } from 'react';
 import useTokenAllowance from '@/hooks/view/useTokenAllowance';
 import useTokenBalance from '@/hooks/view/useTokenBalance';
 import useWeb3Store from '@/hooks/useWeb3Store';
-import { useXFOLDStaked } from '@/hooks/view/usexFOLDStaked';
+import { usexFOLDStaked } from '@/hooks/view/usexFOLDStaked';
 
 export default function DepositStake() {
   const account = useWeb3Store((state) => state.account);
@@ -30,7 +30,7 @@ export default function DepositStake() {
     TOKEN_ADDRESSES.FOLD[chainId],
   );
 
-  const { mutate: xfoldStakedMutate } = useXFOLDStaked();
+  const { mutate: xfoldStakedMutate } = usexFOLDStaked();
 
   const formattedFOLDBalance = useFormattedBigNumber(xfoldBalance);
 

components/stake/lockStake.tsx

@@ -15,7 +15,7 @@ import { useDictatorDAO } from '@/hooks/useContract';
 import useInput from '@/hooks/useInput';
 import useUserLockedUntil from '@/hooks/view/useUserLockedUntil';
 import useWeb3Store from '@/hooks/useWeb3Store';
-import { useXFOLDStaked } from '@/hooks/view/usexFOLDStaked';
+import { usexFOLDStaked } from '@/hooks/view/usexFOLDStaked';
 
 export default function LockStake() {
   const chainId = useWeb3Store((state) => state.chainId);
@@ -27,7 +27,7 @@ export default function LockStake() {
   const { data: userLockedUntil, mutate: userLockedUntilMutate } =
     useUserLockedUntil();
 
-  const { data: xfoldStaked } = useXFOLDStaked();
+  const { data: xfoldStaked } = usexFOLDStaked();
 
   const isLockupPeriodAfterCurrentLockedTimestamp = useMemo(() => {
     if (typeof userLockedUntil === 'undefined') {
@@ -108,38 +108,38 @@ export default function LockStake() {
 
         <div className="space-y-2">
           <div>
-            <div className="flex space-x-2 mb-2">
+            <div className="flex mb-2 space-x-2">
               <div className="flex flex-1 divide-x">
                 <button
                   onClick={() => lockupPeriod.setValue('180')}
                   type="button"
-                  className="flex-1 py-2 px-3 border-primary-300 rounded-l-md whitespace-nowrap bg-primary block text-center focus:outline-none focus:ring-4"
+                  className="block flex-1 px-3 py-2 text-center whitespace-nowrap rounded-l-md border-primary-300 bg-primary focus:outline-none focus:ring-4"
                 >
                   180 Days
                 </button>
 
                 <button
                   onClick={() => lockupPeriod.setValue('365')}
                   type="button"
-                  className="flex-1 py-2 px-3 border-primary-300 whitespace-nowrap bg-primary block text-center focus:outline-none focus:ring-4"
+                  className="block flex-1 px-3 py-2 text-center whitespace-nowrap border-primary-300 bg-primary focus:outline-none focus:ring-4"
                 >
                   365 Days
                 </button>
 
                 <button
                   onClick={() => lockupPeriod.setValue('730')}
                   type="button"
-                  className="flex-1 py-2 px-3 border-primary-300 rounded-r-md whitespace-nowrap bg-primary block text-center focus:outline-none focus:ring-4"
+                  className="block flex-1 px-3 py-2 text-center whitespace-nowrap rounded-r-md border-primary-300 bg-primary focus:outline-none focus:ring-4"
                 >
                   730 Days
                 </button>
               </div>
 
-              <div className="py-2 pr-4 pl-3 rounded-md whitespace-nowrap bg-primary block text-center focus-within:ring-4">
+              <div className="block py-2 pr-4 pl-3 text-center whitespace-nowrap rounded-md bg-primary focus-within:ring-4">
                 <input
                   autoComplete="off"
                   autoCorrect="off"
-                  className="hide-number-input-arrows text-right appearance-none bg-transparent flex-1 focus:outline-none mr-1 text-white"
+                  className="flex-1 mr-1 text-right text-white bg-transparent appearance-none hide-number-input-arrows focus:outline-none"
                   id="lockupPeriod"
                   max={365 * 2}
                   min={1}
@@ -162,7 +162,7 @@ export default function LockStake() {
 
             <Slider.Root
               name="lockupPeriod-range"
-              className="relative flex items-center select-none w-full h-5 touch-action-none"
+              className="flex relative items-center w-full h-5 select-none touch-action-none"
               max={365 * 2}
               min={1}
               step={1}
@@ -172,7 +172,7 @@ export default function LockStake() {
               }
             >
               <Slider.Track className="bg-primary-300 relative flex-grow rounded-full h-[3px]">
-                <Slider.Range className="absolute bg-white rounded-full h-full" />
+                <Slider.Range className="absolute h-full bg-white rounded-full" />
               </Slider.Track>
               <Slider.Thumb className="block w-4 h-4 bg-white rounded-full focus:outline-none focus:ring-4" />
             </Slider.Root>
@@ -183,13 +183,13 @@ export default function LockStake() {
           <div className="flex justify-between items-end">
             <p className="leading-none">Rewards Multiplier</p>
 
-            <p className="text-2xl leading-none font-semibold">{`${lockupPeriodMultiplier}x`}</p>
+            <p className="text-2xl font-semibold leading-none">{`${lockupPeriodMultiplier}x`}</p>
           </div>
         </div>
 
         {userLockedUntil && userLockedUntil.isLocked && (
           <>
-            <div className="h-px w-full bg-primary-300" />
+            <div className="w-full h-px bg-primary-300" />
 
             <div className="flex justify-between">
               <p className="leading-none">Currently Locked Until</p>

components/stake/withdrawStake.tsx

@@ -1,6 +1,5 @@
 import Button, { MaxButton } from '../button';
 import { formatUnits, parseUnits } from '@ethersproject/units';
-import { getxFOLDStaked, useXFOLDStaked } from '@/hooks/view/usexFOLDStaked';
 
 import type { FormEvent } from 'react';
 import { MIN_INPUT_VALUE } from '@/constants/numbers';
@@ -22,6 +21,7 @@ import useInput from '@/hooks/useInput';
 import useTokenBalance from '@/hooks/view/useTokenBalance';
 import useWeb3Store from '@/hooks/useWeb3Store';
 import { Contract } from 'ethers';
+import { usexFOLDStaked } from '@/hooks/view/usexFOLDStaked';
 
 dayjs.extend(relativeTime);
 
@@ -31,10 +31,10 @@ export default function WithdrawStake() {
 
   const { mutate: xfoldBalanceMutate } = useTokenBalance(
     account,
-    TOKEN_ADDRESSES.xFOLD[chainId],
+    TOKEN_ADDRESSES.XFOLD[chainId],
   );
 
-  const { data: xfoldStaked, mutate: xfoldStakedMutate } = useXFOLDStaked();
+  const { data: xfoldStaked, mutate: xfoldStakedMutate } = usexFOLDStaked();
 
   const DOMO_DAO = useDictatorDAO();
   const FOLD_ERC20 = useFoldToken();
@@ -64,7 +64,7 @@ export default function WithdrawStake() {
       withdrawInput.clear();
 
       const transaction = await DOMO_DAO.burn(account, amount);
-
+      console.log('XFOLD - Burning and unstaking in progress ');
       // const transaction = await XFOLD.burn(
       //   // @ts-ignore
       //   to,
@@ -113,7 +113,7 @@ export default function WithdrawStake() {
       </div>
 
       <div>
-        <div className="flex space-x-4 mb-2">
+        <div className="flex mb-2 space-x-4">
           <TokenSingle symbol="xFOLD" />
 
           <div className="flex-1">
@@ -130,7 +130,7 @@ export default function WithdrawStake() {
           </div>
         </div>
 
-        <p className="text-sm text-gray-300 h-5">
+        <p className="h-5 text-sm text-gray-300">
           {xfoldStaked && formattedXFOLDStaked ? (
             <>
               <span>{`Available: ${formattedXFOLDStaked} xFOLD`}</span>{' '}

constants/contracts.ts

@@ -1,7 +1,7 @@
 import { SupportedChainId } from './chains';
 
 export enum ContractNames {
-  STAKING = 'Staking',
+  XFOLD_ADDRESS = 'XFOLD',
   DOMODAO = 'DictatorDAO',
   OPERATOR_ADDRESS = 'Operator',
   FOLD = 'FOLD',
@@ -21,7 +21,7 @@ export const CONTRACT_ADDRESSES: ContractAddresses = {
     [SupportedChainId.MAINNET]: '0xd084944d3c05CD115C09d072B9F44bA3E0E45921',
     [SupportedChainId.RINKEBY]: '0xd084944d3c05CD115C09d072B9F44bA3E0E45921',
   },
-  [ContractNames.STAKING]: {
+  [ContractNames.XFOLD_ADDRESS]: {
     [SupportedChainId.MAINNET]: '0x454BD9E2B29EB5963048cC1A8BD6fD44e89899Cb',
     [SupportedChainId.RINKEBY]: '0x454BD9E2B29EB5963048cC1A8BD6fD44e89899Cb',
   },