fix: alignment and inbound in swap (#65)

* fix:alignment * fix: swap activity details * fix: inbound
reef-chain · Feb 19, 2024 · 6f618c0 · 6f618c0
1 parent ec8f4f0
commit 6f618c0
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 90 deletions.
diff --git a/src/pages/dashboard/Activity/SwapActivityDetails.tsx b/src/pages/dashboard/Activity/SwapActivityDetails.tsx
@@ -67,7 +67,7 @@ function SwapActivityDetails({ isOpen, onClose, swapPair }:Props):JSX.Element {
                 </div>
               </div>
               <Uik.Text text="Transfer Details" type="light" className="mt-2" />
-              <div className="transfer-asset__block my-2" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <div className="transfer-asset__block my-2" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' ,padding:"2rem"}}>
                 <SwapDetails token1={swapPair.token1} token2={swapPair.token2} fees={swapPair.fees} />
 
               </div>

diff --git a/src/pages/dashboard/Activity/SwapActivityItem.tsx b/src/pages/dashboard/Activity/SwapActivityItem.tsx
@@ -49,10 +49,9 @@ const SwapActivityItem = ({ token1, token2, fees }: Props): JSX.Element => (
 
       <div className="activity-item__content">
         <div
-          className="activity-item__info"
-          style={{ display: 'flex', justifyContent: 'space-between' }}
+          style={{ display: 'flex', justifyContent: 'space-between',width:"100%" }}
         >
-          <div>
+          <div style={{width:"100%"}}>
             <div
               className="activity-item__title"
               title={`Swap ${token1.token.symbol}-${token2.token.symbol}`}

diff --git a/src/pages/dashboard/Activity/SwapDetails.tsx b/src/pages/dashboard/Activity/SwapDetails.tsx
@@ -70,97 +70,74 @@ function SwapDetails({ token1, token2, fees }:Props):JSX.Element {
     );
   }, [token2.token.iconUrl]);
   return (
+
+    <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+  <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around' }}>
+    <Uik.Text type="mini" text={`${type1 === 'receive'?'Received':"Sent"} ${token1.token.name}`} />
+    <div className="mb-3">
+      <Uik.Text type="mini" text={`${type2 === 'receive'?'Received':"Sent"} ${token2.token.name}`} />
+    </div>
+  </div>
+  <div style={{ display: 'flex', flexDirection: 'column' }}>
     <div>
-      <div style={{ display: 'flex' }}>
-        <div style={{
-          display: 'flex', flexDirection: 'column', justifyContent: 'space-around', width: '14rem',
-        }}
+      <div
+        className="activity-item__amount-wrapper"
+        title={`${type1 === 'receive' ? '+' : '-'} ${showBalance(token1.token as Token)}`}
+      >
+        <div
+          className={`
+            activity-item__amount-swap activity-item__amount
+            ${type1 === 'receive' ? 'activity-item__amount-swap-receive' : ''}
+            ${hideBalance.isHidden ? 'activity-item__amount--hidden' : ''}
+          `}
         >
-          <Uik.Text type="mini" text={`Sent ${token1.token.name}`} />
-          <div className="mb-3">
-            <Uik.Text type="mini" text={`Received ${token2.token.name}`} />
-          </div>
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <div>
-            <div
-              className="activity-item__amount-wrapper"
-              title={`${type1 === 'receive' ? '+' : '-'} ${showBalance(
-                token1.token as Token,
-              )}`}
-            >
-              <div
-                className={`
-                    activity-item__amount-swap activity-item__amount
-                    ${
-                      type1 === 'receive'
-                        ? 'activity-item__amount-swap-receive'
-                        : ''
-                    }
-                    ${
-                      hideBalance.isHidden
-                        ? 'activity-item__amount--hidden'
-                        : ''
-                    }
-                  `}
-              >
-                {!hideBalance.isHidden ? (
-                  amount1
-                ) : (
-                  <div>
-                    <div />
-                    <div />
-                    <div />
-                    <div />
-                    <div />
-                  </div>
-                )}
-              </div>
-              {activityPreviewIcon1}
+          {!hideBalance.isHidden ? (
+            amount1
+          ) : (
+            <div>
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
             </div>
-            <div
-              className="activity-item__amount-wrapper"
-              title={`${type2 === 'receive' ? '+' : '-'} ${showBalance(
-                token2.token as Token,
-              )}`}
-            >
-              <div
-                className={`
-                    activity-item__amount-swap
-                    activity-item__amount
-                    ${
-                      type2 === 'receive'
-                        ? 'activity-item__amount-swap-receive'
-                        : ''
-                    }
-                    ${
-                      hideBalance.isHidden
-                        ? 'activity-item__amount--hidden'
-                        : ''
-                    }
-                  `}
-              >
-                {!hideBalance.isHidden ? (
-                  amount2
-                ) : (
-                  <div>
-                    <div />
-                    <div />
-                    <div />
-                    <div />
-                    <div />
-                  </div>
-                )}
-              </div>
-              {activityPreviewIcon2}
-            </div>
-            <div className="activity-item__amount---swap-fees">
-              {`fee - ${displayBalanceFromToken(fees.token as Token)} REEF`}
+          )}
+        </div>
+        {activityPreviewIcon1}
+      </div>
+      <div
+        className="activity-item__amount-wrapper"
+        title={`${type2 === 'receive' ? '+' : '-'} ${showBalance(token2.token as Token)}`}
+      >
+        <div
+          className={`
+            activity-item__amount-swap
+            activity-item__amount
+            ${type2 === 'receive' ? 'activity-item__amount-swap-receive' : ''}
+            ${hideBalance.isHidden ? 'activity-item__amount--hidden' : ''}
+          `}
+        >
+          {!hideBalance.isHidden ? (
+            amount2
+          ) : (
+            <div>
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
             </div>
-          </div>
+          )}
         </div>
+        {activityPreviewIcon2}
+      </div>
+      <div className="activity-item__amount---swap-fees">
+        {`fee - ${displayBalanceFromToken(fees.token as Token)} REEF`}
       </div>
     </div>
+  </div>
+</div>
+
   );
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -6478,9 +6478,9 @@ bindings@^1.3.0, bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
-"bip32-ed25519@git+https://github.com/Zondax/bip32-ed25519.git":
+"bip32-ed25519@https://github.com/Zondax/bip32-ed25519":
   version "0.0.4"
-  resolved "git+https://github.com/Zondax/bip32-ed25519.git#0949df01b5c93885339bc28116690292088f6134"
+  resolved "https://github.com/Zondax/bip32-ed25519#0949df01b5c93885339bc28116690292088f6134"
   dependencies:
     bn.js "^5.1.1"
     elliptic "^6.4.1"