fixes done

push-protocol · Jan 13, 2025 · 74c5718 · 74c5718
1 parent b868bed
commit 74c5718
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 96 deletions.
diff --git a/examples/core-connection/yarn.lock b/examples/core-connection/yarn.lock
@@ -6822,7 +6822,7 @@ __metadata:
 
 "shared-components@file:../../packages/shared-components::locator=core-connection%40workspace%3A.":
   version: 0.1.0
-  resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=f63c81&locator=core-connection%40workspace%3A."
+  resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=4270f6&locator=core-connection%40workspace%3A."
   dependencies:
     "@emotion/react": "npm:^11.13.0"
     "@radix-ui/react-dialog": "npm:^1.1.1"
@@ -6843,7 +6843,7 @@ __metadata:
   peerDependencies:
     react: ^18.3.1
     react-dom: ^18.3.1
-  checksum: 10/79cc95a9b4697156f8b4e3f4b026f89284855d97af9c8bf9d8bc601997c80a6bb6afd5cf1bd42d844ec38a8339a40bcffcf62e396d327abd22096b710f00ec79
+  checksum: 10/8ba8d4af0295c9192d4df2d2f96fdfb6eba69d3400588450d9c6c3e658877d4b613de32365e83ddc4cad0213427727b8b075299b353e079e8e42cd34105044d1
   languageName: node
   linkType: hard
 

diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -15,4 +15,4 @@
   "scripts": {
     "release:stable": "npx nx run ui-kit:nx-release-publish --otp=1"
   }
-}
+}
diff --git a/packages/ui-kit/src/lib/constants.ts b/packages/ui-kit/src/lib/constants.ts
@@ -1,4 +1,3 @@
-import { FC, ReactNode } from 'react';
 import {
   ArbitrumMonotone,
   BnbMonotone,
@@ -23,9 +22,7 @@ export const CONSTANTS = {
   ENV: ENV,
 };
 
-export const CHAIN_LOGO: {
-  [x: number | string]: FC<ReactNode>;
-} = {
+export const CHAIN_LOGO: Record<string, React.FC | React.ComponentType> = {
   1: EthereumMonotone,
   11155111: EthereumMonotone,
   137: PolygonMonotone,

diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { usePushWalletContext } from './PushWalletProvider';
 import config from '../../config';
 import styled from 'styled-components';
@@ -20,10 +20,7 @@ const PushWalletIFrame: FC = () => {
   return (
     <>
       {isWalletVisible ? (
-        <FrameContainer
-          isWalletMinimised={isWalletMinimised}
-          account={account}
-        >
+        <FrameContainer isWalletMinimised={isWalletMinimised} account={account}>
           {isIframeLoading && (
             <FrameLoadingContainer>
               <CloseButtonContainer
@@ -34,9 +31,7 @@ const PushWalletIFrame: FC = () => {
                 <CrossIcon />
               </CloseButtonContainer>
               <LoadingTextContainer>
-                <LoadingText>
-                  Loading...
-                </LoadingText>
+                <LoadingText>Loading...</LoadingText>
                 <Spinner />
               </LoadingTextContainer>
             </FrameLoadingContainer>
@@ -46,13 +41,9 @@ const PushWalletIFrame: FC = () => {
             isWalletMinimised={isWalletMinimised}
             isIframeLoading={isIframeLoading}
           >
-            <AccountContainer
-              account={account}
-            >
+            <AccountContainer account={account}>
               {account ? (
-                <DashButtonContainer
-                  onClick={() => setMinimiseWallet(true)}
-                >
+                <DashButtonContainer onClick={() => setMinimiseWallet(true)}>
                   <DashIcon />
                 </DashButtonContainer>
               ) : (
@@ -81,62 +72,65 @@ const PushWalletIFrame: FC = () => {
           </FrameSubContainer>
         </FrameContainer>
       ) : null}
-
     </>
-
   );
 };
 
 export { PushWalletIFrame };
 
-const FrameContainer = styled.div`
+const FrameContainer = styled.div<{
+  account: string | null;
+  isWalletMinimised: boolean;
+}>`
   position: fixed;
   display: flex;
   flex-direction: column;
   background-color: #17181b;
   border-radius: 10px;
   z-index: 99;
 
-  width:${({ account, isWalletMinimised }) => isWalletMinimised ? '0px' : account ? '450px' : '100%'};
-  height:${({ account, isWalletMinimised }) => isWalletMinimised ? '0px' : account ? '710px' : '100%'};
-  right:${({ account }) => account ? '24px' : '0'};
-  top:${({ account }) => account ? '24px' : '0'};
-
-  @media (max-width:425px){
-    width:${({ account, isWalletMinimised }) => isWalletMinimised ? '0px' : account ? '96%' : '100%'};
-    right:${({ account }) => account ? '2%' : '0'};
-    top:${({ account }) => account ? '8%' : '0'};
+  width: ${({ account, isWalletMinimised }) =>
+    isWalletMinimised ? '0px' : account ? '450px' : '100%'};
+  height: ${({ account, isWalletMinimised }) =>
+    isWalletMinimised ? '0px' : account ? '710px' : '100%'};
+  right: ${({ account }) => (account ? '24px' : '0')};
+  top: ${({ account }) => (account ? '24px' : '0')};
+
+  @media (max-width: 425px) {
+    width: ${({ account, isWalletMinimised }) =>
+      isWalletMinimised ? '0px' : account ? '96%' : '100%'};
+    right: ${({ account }) => (account ? '2%' : '0')};
+    top: ${({ account }) => (account ? '8%' : '0')};
   }
-`
+`;
 
 const CloseButtonContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   cursor: pointer;
   padding: 0 16px;
-`
+`;
 
 const DashButtonContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius:1000px;
-  height:14px;
-  width:14px;
-  background-color:#ffbb16;
-
-`
+  border-radius: 1000px;
+  height: 14px;
+  width: 14px;
+  background-color: #ffbb16;
+`;
 
 const LoadingTextContainer = styled.div`
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  gap:16px;
-  width:-webkit-fill-available;
-  height:-webkit-fill-available;
-`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  width: -webkit-fill-available;
+  height: -webkit-fill-available;
+`;
 
 const LoadingText = styled.p`
   font-size: 18px;
@@ -146,33 +140,35 @@ const LoadingText = styled.p`
   font-family: FK Grotesk Neu;
   margin: 0px;
   width: auto;
-`
+`;
 
 const FrameLoadingContainer = styled.div`
-  height:-webkit-fill-available;
-  width:-webkit-fill-available;
-  flex-direction:column;
-  display:flex;
-  padding:8px;
-  background-color:#17181b;
-`
+  height: -webkit-fill-available;
+  width: -webkit-fill-available;
+  flex-direction: column;
+  display: flex;
+  padding: 8px;
+  background-color: #17181b;
+`;
 
-const FrameSubContainer = styled.div`
+const FrameSubContainer = styled.div<{
+  isWalletMinimised: boolean;
+  isIframeLoading: boolean;
+}>`
   display: ${({ isWalletMinimised, isIframeLoading }) =>
     isWalletMinimised || isIframeLoading ? 'none' : 'flex'};
   width: -webkit-fill-available;
   height: -webkit-fill-available;
   flex-direction: column;
-`
+`;
 
-const AccountContainer = styled.div`
- width: -webkit-fill-available;
+const AccountContainer = styled.div<{ account: string | null }>`
+  width: -webkit-fill-available;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: var(--spacing-xxs) var(--spacing-xxs);
-  border-top-right-radius:${({ account }) => account ? '10px' : '0px'};
-  border-top-left-radius:${({ account }) => account ? '10px' : '0px'};
-  background-color:${({ account }) => account ? '#e3e3e3' : '#17181B'};
-
-`
+  border-top-right-radius: ${({ account }) => (account ? '10px' : '0px')};
+  border-top-left-radius: ${({ account }) => (account ? '10px' : '0px')};
+  background-color: ${({ account }) => (account ? '#e3e3e3' : '#17181B')};
+`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
       "scripts": {
         "release:stable": "npx nx run ui-kit:nx-release-publish --otp=1"
       }
-    }
+    }