diff --git a/examples/core-connection/yarn.lock b/examples/core-connection/yarn.lock index 191b3b72..a75205e0 100644 --- 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 index 4f84000f..e46396fe 100644 --- a/packages/ui-kit/package.json +++ b/packages/ui-kit/package.json @@ -10,7 +10,7 @@ "devDependencies": { "@types/react": "^18.3.13", "react": "^18.3.1", - "shared-components": "../shared-components" + "styled-components": "^6.1.14" }, "scripts": { "release:stable": "npx nx run ui-kit:nx-release-publish --otp=1" diff --git a/packages/ui-kit/src/lib/common/icons/ArbitrumMonotone.tsx b/packages/ui-kit/src/lib/common/icons/ArbitrumMonotone.tsx new file mode 100644 index 00000000..c008586c --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/ArbitrumMonotone.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +const ArbitrumMonotone = () => { + return ( + + + + + + + + + + + + ); +}; + +export default ArbitrumMonotone; diff --git a/packages/ui-kit/src/lib/common/icons/BnbMonotone.tsx b/packages/ui-kit/src/lib/common/icons/BnbMonotone.tsx new file mode 100644 index 00000000..15e478fc --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/BnbMonotone.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +const BnbMonotone = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default BnbMonotone; diff --git a/packages/ui-kit/src/lib/common/icons/CrossIcon.tsx b/packages/ui-kit/src/lib/common/icons/CrossIcon.tsx new file mode 100644 index 00000000..6f184ef6 --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/CrossIcon.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +const CrossIcon = () => { + return ( + + + + + ); +}; + +export default CrossIcon; diff --git a/packages/ui-kit/src/lib/common/icons/DashIcon.tsx b/packages/ui-kit/src/lib/common/icons/DashIcon.tsx new file mode 100644 index 00000000..3fcad7e8 --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/DashIcon.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +const DashIcon = () => { + return ( + + + + ); +}; + +export default DashIcon; diff --git a/packages/ui-kit/src/lib/common/icons/EllipseIcon.tsx b/packages/ui-kit/src/lib/common/icons/EllipseIcon.tsx new file mode 100644 index 00000000..802e39a7 --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/EllipseIcon.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +const EllipseIcon = () => { + return ( + + + + ); +}; + +export default EllipseIcon; diff --git a/packages/ui-kit/src/lib/common/icons/EthereumMonotone.tsx b/packages/ui-kit/src/lib/common/icons/EthereumMonotone.tsx new file mode 100644 index 00000000..aaffa07a --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/EthereumMonotone.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +const EthereumMonotone = () => { + return ( + + + + + + + + ); +}; + +export default EthereumMonotone; diff --git a/packages/ui-kit/src/lib/common/icons/OptimismMonotone.tsx b/packages/ui-kit/src/lib/common/icons/OptimismMonotone.tsx new file mode 100644 index 00000000..b6c5eb29 --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/OptimismMonotone.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +const OptimismMonotone = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default OptimismMonotone; diff --git a/packages/ui-kit/src/lib/common/icons/PolygonMonotone.tsx b/packages/ui-kit/src/lib/common/icons/PolygonMonotone.tsx new file mode 100644 index 00000000..a70fad26 --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/PolygonMonotone.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +const PolygonMonotone = () => { + return ( + + + + + + + + + + + + ); +}; + +export default PolygonMonotone; diff --git a/packages/ui-kit/src/lib/common/icons/PushLogo.tsx b/packages/ui-kit/src/lib/common/icons/PushLogo.tsx new file mode 100644 index 00000000..02a94a5d --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/PushLogo.tsx @@ -0,0 +1,144 @@ +import React from 'react'; + +const PushLogo = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default PushLogo; diff --git a/packages/ui-kit/src/lib/common/icons/PushMonotone.tsx b/packages/ui-kit/src/lib/common/icons/PushMonotone.tsx new file mode 100644 index 00000000..b93a3eab --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/PushMonotone.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +const PushMonotone = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default PushMonotone; diff --git a/packages/ui-kit/src/lib/common/icons/SolanaMonotone.tsx b/packages/ui-kit/src/lib/common/icons/SolanaMonotone.tsx new file mode 100644 index 00000000..5be5e5de --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/SolanaMonotone.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +const SolanaMonotone = () => { + return ( + + + + + + + + + + + + ); +}; + +export default SolanaMonotone; diff --git a/packages/ui-kit/src/lib/common/icons/index.ts b/packages/ui-kit/src/lib/common/icons/index.ts new file mode 100644 index 00000000..3e8b8dfe --- /dev/null +++ b/packages/ui-kit/src/lib/common/icons/index.ts @@ -0,0 +1,13 @@ +export { default as DashIcon } from './DashIcon'; +export { default as CrossIcon } from './CrossIcon'; +export { default as Ellipse } from './EllipseIcon'; +export { default as PushLogo } from './PushLogo'; + +// Chains Logo +export { default as PushMonotone } from './PushMonotone'; +export { default as EthereumMonotone } from './EthereumMonotone'; +export { default as ArbitrumMonotone } from './ArbitrumMonotone'; +export { default as BnbMonotone } from './BnbMonotone'; +export { default as OptimismMonotone } from './OptimismMonotone'; +export { default as PolygonMonotone } from './PolygonMonotone'; +export { default as SolanaMonotone } from './SolanaMonotone'; \ No newline at end of file diff --git a/packages/ui-kit/src/lib/common/index.ts b/packages/ui-kit/src/lib/common/index.ts new file mode 100644 index 00000000..ca0ed62d --- /dev/null +++ b/packages/ui-kit/src/lib/common/index.ts @@ -0,0 +1,2 @@ +export * from './icons' +export * from './spinner' \ No newline at end of file diff --git a/packages/ui-kit/src/lib/common/spinner/Spinner.tsx b/packages/ui-kit/src/lib/common/spinner/Spinner.tsx new file mode 100644 index 00000000..d920871a --- /dev/null +++ b/packages/ui-kit/src/lib/common/spinner/Spinner.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import styled, { keyframes } from 'styled-components'; +import { Ellipse } from '../icons'; + +// Keyframes for the spinning animation +const spin = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +`; + +// Styled container for the Spinner +const Container = styled.div` + display: flex; + align-items: center; + justify-content: center; + animation: ${spin} 1s linear infinite; + width: 24px; + height: 24px; + color:#D548EC; +`; + +// Spinner functional component +const Spinner = () => { + return ( + + + + ); +}; + +export default Spinner; diff --git a/packages/ui-kit/src/lib/common/spinner/index.ts b/packages/ui-kit/src/lib/common/spinner/index.ts new file mode 100644 index 00000000..38446a9d --- /dev/null +++ b/packages/ui-kit/src/lib/common/spinner/index.ts @@ -0,0 +1 @@ +export { default as Spinner } from './Spinner'; \ No newline at end of file diff --git a/packages/ui-kit/src/lib/constants.ts b/packages/ui-kit/src/lib/constants.ts index 5bed0841..06618346 100644 --- a/packages/ui-kit/src/lib/constants.ts +++ b/packages/ui-kit/src/lib/constants.ts @@ -1,14 +1,12 @@ -import { FC } from 'react'; import { ArbitrumMonotone, BnbMonotone, EthereumMonotone, - IconProps, OptimismMonotone, PolygonMonotone, PushMonotone, SolanaMonotone, -} from 'shared-components'; +} from './common'; /** * SUPPORTED ENVIRONEMENTS @@ -24,9 +22,7 @@ export const CONSTANTS = { ENV: ENV, }; -export const CHAIN_LOGO: { - [x: number | string]: FC; -} = { +export const CHAIN_LOGO: Record = { 1: EthereumMonotone, 11155111: EthereumMonotone, 137: PolygonMonotone, diff --git a/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx b/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx index 4381ee13..6f13e5c7 100644 --- a/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx +++ b/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx @@ -1,7 +1,8 @@ import { FC } from 'react'; import { usePushWalletContext } from './PushWalletProvider'; import { walletConnectionButtonStatusMapper } from '../wallet.constants'; -import { Button } from 'shared-components'; +import styled from 'styled-components' +import { Spinner } from '../../common'; export type ConnectPushWalletButtonProps = { showLogOutButton?: boolean; @@ -30,16 +31,44 @@ const ConnectPushWalletButton: FC = () => { return ( <> - + {isLoading && ()} + ); }; export { ConnectPushWalletButton }; + +const ConnectButton = styled.button` + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + white-space: nowrap; + flex-shrink: 0; + border: none; + background-color: #D548EC; + color: rgba(255,255,255,1); + border-radius: 12px; + gap: 4px; + height: 48px; + padding: 16px 24px; + min-width: 100px; + leading-trim: both; + text-edge: cap; + font-family:FK Grotesk Neu; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 16px; + width:inherit; + +` +const SpinnerContainer = styled.div` + padding:5px; +` \ No newline at end of file diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx index e466c7bf..2ca32cc2 100644 --- a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx +++ b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx @@ -1,15 +1,8 @@ import { FC } from 'react'; import { usePushWalletContext } from './PushWalletProvider'; -import { - Box, - Cross, - css, - Dash, - deviceMediaQ, - Spinner, - Text, -} from 'shared-components'; import config from '../../config'; +import styled from 'styled-components'; +import { CrossIcon, DashIcon, Spinner } from '../../common'; const PushWalletIFrame: FC = () => { const { @@ -27,115 +20,42 @@ const PushWalletIFrame: FC = () => { return ( <> {isWalletVisible ? ( - + {isIframeLoading && ( - - + { handleUserLogOutEvent(); }} > - - - - - Loading... - - - - + + + + Loading... + + + )} - - + {account ? ( - setMinimiseWallet(true)} - borderRadius="radius-round" - height="14px" - width="14px" - css={css` - background-color: #ffbb16; - `} - > - - + setMinimiseWallet(true)}> + + ) : ( - { handleUserLogOutEvent(); }} > - - + + )} - +