diff --git a/packages/connect-react/src/react/hooks/use-connect.ts b/packages/connect-react/src/react/hooks/use-connect.ts index d70a3a9..43afc1f 100644 --- a/packages/connect-react/src/react/hooks/use-connect.ts +++ b/packages/connect-react/src/react/hooks/use-connect.ts @@ -28,9 +28,8 @@ const useConnectDispatch = () => { }; export const useConnect = () => { - const { isOpen, isAuthenticating, authData, authOptions, userSession } = useContext( - ConnectContext - ); + const { isOpen, isAuthenticating, authData, authOptions, userSession } = + useContext(ConnectContext); const dispatch = useConnectDispatch(); diff --git a/packages/connect-ui/src/components/modal/assets/close-icon.svg b/packages/connect-ui/src/components/modal/assets/close-icon.svg new file mode 100644 index 0000000..7924e43 --- /dev/null +++ b/packages/connect-ui/src/components/modal/assets/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/connect-ui/src/components/modal/assets/close-icon.tsx b/packages/connect-ui/src/components/modal/assets/close-icon.tsx deleted file mode 100644 index e11736b..0000000 --- a/packages/connect-ui/src/components/modal/assets/close-icon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { h } from '@stencil/core'; - -export const CloseIcon = ({ onClick }: { onClick: () => void }) => ( - - - - -); diff --git a/packages/connect-ui/src/components/modal/assets/key-and-keyhole.svg b/packages/connect-ui/src/components/modal/assets/key-and-keyhole.svg new file mode 100644 index 0000000..a52563d --- /dev/null +++ b/packages/connect-ui/src/components/modal/assets/key-and-keyhole.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/connect-ui/src/components/modal/assets/key-and-keyhole.tsx b/packages/connect-ui/src/components/modal/assets/key-and-keyhole.tsx deleted file mode 100644 index 06e69f9..0000000 --- a/packages/connect-ui/src/components/modal/assets/key-and-keyhole.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { h } from '@stencil/core'; - -export const KeyAndKeyhole = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/connect-ui/src/components/modal/assets/stacks-icon.svg b/packages/connect-ui/src/components/modal/assets/stacks-icon.svg new file mode 100644 index 0000000..7c6ae2e --- /dev/null +++ b/packages/connect-ui/src/components/modal/assets/stacks-icon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/connect-ui/src/components/modal/assets/stacks-icon.tsx b/packages/connect-ui/src/components/modal/assets/stacks-icon.tsx deleted file mode 100644 index c943f97..0000000 --- a/packages/connect-ui/src/components/modal/assets/stacks-icon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { h } from '@stencil/core'; - -export const StacksIcon = () => ( - - - - - -); diff --git a/packages/connect-ui/src/components/modal/modal.scss b/packages/connect-ui/src/components/modal/modal.scss index 394c417..46d492c 100644 --- a/packages/connect-ui/src/components/modal/modal.scss +++ b/packages/connect-ui/src/components/modal/modal.scss @@ -36,9 +36,6 @@ align-items: center; justify-content: space-between; padding: 24px; - svg { - cursor: pointer; - } } .header-left { @@ -50,6 +47,10 @@ } } +.header-right { + cursor: pointer; +} + .modal-content { display: flex; flex-direction: column; @@ -106,6 +107,9 @@ margin: 0px auto; box-sizing: border-box; border-radius: 8px; + font-size: 14px; + font-weight: 500; + line-height: 20px; display: block; align-items: center; justify-content: center; @@ -127,16 +131,6 @@ outline: none; border: none; cursor: pointer; - - span { - align-items: center; - -webkit-box-pack: center; - font-size: 14px; - font-weight: 500; - line-height: 20px; - color: #ffffff; - white-space: nowrap; - } } .modal-footer { diff --git a/packages/connect-ui/src/components/modal/modal.tsx b/packages/connect-ui/src/components/modal/modal.tsx index f2051fe..9ffeffa 100644 --- a/packages/connect-ui/src/components/modal/modal.tsx +++ b/packages/connect-ui/src/components/modal/modal.tsx @@ -1,7 +1,7 @@ import { Component, h, Prop, State, Element } from '@stencil/core'; -import { CloseIcon } from './assets/close-icon'; -import { KeyAndKeyhole } from './assets/key-and-keyhole'; -import { StacksIcon } from './assets/stacks-icon'; +import CloseIcon from './assets/close-icon.svg'; +import KeyAndKeyhole from './assets/key-and-keyhole.svg'; +import StacksIcon from './assets/stacks-icon.svg'; import type { AuthOptions } from '@stacks/connect/types/auth'; import { getBrowser } from './extension-util'; @@ -46,14 +46,14 @@ export class Modal {
- + Stacks Wallet
- this.handleCloseModal()} /> + this.handleCloseModal()} />
- + @@ -75,7 +75,7 @@ export class Modal { this.handleDownloadPath(browser); }} > - Download Stacks Wallet + Download Stacks Wallet
)} diff --git a/packages/connect-ui/src/index.html b/packages/connect-ui/src/index.html index 903e73a..ac3d94e 100644 --- a/packages/connect-ui/src/index.html +++ b/packages/connect-ui/src/index.html @@ -4,7 +4,7 @@ Connect UI - + diff --git a/packages/connect/src/auth.ts b/packages/connect/src/auth.ts index edb5886..afb3b55 100644 --- a/packages/connect/src/auth.ts +++ b/packages/connect/src/auth.ts @@ -77,7 +77,7 @@ export const authenticate = async (authOptions: AuthOptions) => { await userSession.handlePendingSignIn(authResponse); const token = decodeToken(authResponse); const payload = token?.payload; - const authResponsePayload = (payload as unknown) as AuthResponsePayload; + const authResponsePayload = payload as unknown as AuthResponsePayload; onFinish?.({ authResponse, authResponsePayload,