Merge pull request #120 from dappforce/deploy/transfer-page

Add transfer page
dappforce · Dec 20, 2023 · 046a330 · 046a330
2 parents 83afa44 + 26d1dba
commit 046a330
Show file tree

Hide file tree

Showing 48 changed files with 1,196 additions and 409 deletions.
diff --git a/public/tailwind.css b/public/tailwind.css
@@ -934,24 +934,24 @@ video {
   width: 100%;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
-.w-\[260px\] {
-  width: 260px;
-}
-
 .w-max {
   width: -moz-max-content;
   width: max-content;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
 
+.max-w-\[260px\] {
+  max-width: 260px;
+}
+
 .max-w-\[min\(24rem\2c _95vw\)\] {
   max-width: min(24rem, 95vw);
 }
@@ -980,10 +980,6 @@ video {
   max-width: 24rem;
 }
 
-.max-w-\[260px\] {
-  max-width: 260px;
-}
-
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1522,6 +1518,11 @@ video {
   padding: 4px;
 }
 
+.\!px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
 .\!py-4 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
@@ -1602,11 +1603,6 @@ video {
   padding-bottom: 1.25rem;
 }
 
-.\!px-4 {
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-}
-
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -1848,6 +1844,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
 .text-current {
   color: currentColor;
 }
@@ -1913,11 +1914,6 @@ video {
   color: rgb(255 255 255 / 0.8);
 }
 
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -2451,6 +2447,11 @@ video {
     padding: 1.5rem;
   }
 
+  .md\:\!px-6 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -2461,11 +2462,6 @@ video {
     padding-bottom: 1.5rem;
   }
 
-  .md\:\!px-6 {
-    padding-left: 1.5rem !important;
-    padding-right: 1.5rem !important;
-  }
-
   .md\:text-left {
     text-align: left;
   }

diff --git a/src/components/creatorsStaking/Creators/index.tsx b/src/components/creatorsStaking/Creators/index.tsx
@@ -204,7 +204,7 @@ const CreatorsSection = ({ defaultSpaceId }: CreatorsSectionProps) => {
   useFetchCreatorsSpaces(creatorsSpaceIds)
   useFetchEraStakes(creatorsSpaceIds, currentEra)
   useFetchBackerInfoBySpaces(creatorsSpaceIds, myAddress)
-  useFetchBalanceByNetwork('subsocial', myAddress)
+  useFetchBalanceByNetwork({ network: 'subsocial', address: myAddress })
 
   return (
     <ModalContextWrapper>

diff --git a/src/components/creatorsStaking/Creators/modals/AmountInput.tsx b/src/components/creatorsStaking/Creators/modals/AmountInput.tsx
@@ -48,7 +48,7 @@ export const StakeOrIncreaseStakeAmountInput = (
 
   const { minimumStakingAmount, minimumRemainingAmount } = stakingConsts || {}
 
-  const balancesByCurrency = useBalancesByNetwork({
+  const { currencyBalance: balancesByCurrency } = useBalancesByNetwork({
     address: myAddress,
     network: 'subsocial',
     currency: tokenSymbol,
@@ -225,9 +225,9 @@ export const AmountInput = ({
   }
 
   useEffect(() => {
-    if(inputRef.current) {
+    if (inputRef.current) {
       inputRef.current.focus()
-    } 
+    }
   }, [])
 
   return (

diff --git a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
@@ -72,6 +72,8 @@ function StakingTxButton ({
     fetchGeneralEraInfo(dispatch)
     fetchEraStakes(dispatch, [ spaceId ], eraInfo?.info?.currentEra || '0')
 
+    fetchEraStakes(dispatch, [ spaceId ], eraInfo?.info?.currentEra || '0')
+
     fetchBackerLedger(dispatch, myAddress || '')
 
     if (modalVariant === 'stake') {
@@ -129,7 +131,7 @@ export function StakeOrIncreaseTxButton (props: CommonTxButtonProps) {
   const sendEvent = useSendEvent()
   const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
 
-  const balancesByCurrency = useBalancesByNetwork({
+  const { currencyBalance: balancesByCurrency } = useBalancesByNetwork({
     address: myAddress,
     network: 'subsocial',
     currency: props.tokenSymbol,

diff --git a/src/components/main/Main.module.sass b/src/components/main/Main.module.sass
@@ -4,6 +4,14 @@
   \:global .DfSectionOuter
     max-width: calc(1088px + #{$space_normal} * 2) !important
 
+.TransferPage
+  \:global .DfSectionOuter
+    max-width: 632px !important
+    height: 100%
+
+  \:global .DfSection
+    height: 100%
+
 .WarningMessage
   display: flex
   background: #fff
@@ -27,4 +35,4 @@
 @media (max-width: 767px)
   .CreatorStakingSection
     \:global .DfSection
-      margin-top: 0 !important
+      margin-top: 0 !important
diff --git a/src/components/main/TransferPage.tsx b/src/components/main/TransferPage.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { NextPage } from 'next'
+import TransferPageLayout from '../transfer/TransferPageLayout'
+import { PageContent } from '../utils/PageWrapper'
+import clsx from 'clsx'
+import Footer from '../footer/Footer'
+import styles from './Main.module.sass'
+
+type TransferPageProps = {
+  transferType?: string
+  asset?: string
+  from?: string
+  to?: string
+  recipient?: string
+  amount?: string
+}
+
+const TransferPage: NextPage<TransferPageProps> = (props) => {
+  const { transferType, asset, from, to, recipient, amount } = props
+
+  return (
+    <>
+      <div className={clsx('layout-wrapper', styles.TransferPage)}>
+        <PageContent>
+          <TransferPageLayout
+            transferType={
+              transferType === 'cross' ? 'cross-chain' : 'same-chain'
+            }
+            defaultSelectedToken={{ token: asset || 'DOT', network: from }}
+            to={to}
+            defaultRecipient={recipient}
+            amount={amount}
+          />
+        </PageContent>
+      </div>
+      <Footer />
+    </>
+  )
+}
+
+export default TransferPage