diff --git a/packages/modal-ui-js/src/lib/components/ConnectHardwareWallet.ts b/packages/modal-ui-js/src/lib/components/ConnectHardwareWallet.ts index 92a534e71..d5e09be15 100644 --- a/packages/modal-ui-js/src/lib/components/ConnectHardwareWallet.ts +++ b/packages/modal-ui-js/src/lib/components/ConnectHardwareWallet.ts @@ -3,6 +3,8 @@ import { DEFAULT_DERIVATION_PATH, modalState } from "../modal"; import { connectToWallet } from "../render-modal"; import { renderSpecifyDerivationPath } from "./SpecifyDerivationPath"; import { translate } from "@near-wallet-selector/core"; +import { CloseIcon } from "./icons/CloseIcon"; +import { LedgerDeviceIcon } from "./icons/LedgerDeviceIcon"; export function renderConnectHardwareWallet(module: ModuleState) { if (!modalState) { @@ -18,99 +20,16 @@ export function renderConnectHardwareWallet(module: ModuleState) {

${translate("modal.ledger.connectWithLedger")}

- +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ ${LedgerDeviceIcon} +

${translate("modal.ledger.makeSureYourLedger")}

${translate( diff --git a/packages/modal-ui-js/src/lib/components/GetAWallet.ts b/packages/modal-ui-js/src/lib/components/GetAWallet.ts index 224bcb23b..bd7dde27d 100644 --- a/packages/modal-ui-js/src/lib/components/GetAWallet.ts +++ b/packages/modal-ui-js/src/lib/components/GetAWallet.ts @@ -6,6 +6,10 @@ import type { import { modalState } from "../modal"; import { renderWhatIsAWallet } from "./WhatIsAWallet"; import { translate } from "@near-wallet-selector/core"; +import { BackArrowIcon } from "./icons/BackArrowIcon"; +import { CloseIcon } from "./icons/CloseIcon"; +import { QRIcon } from "./icons/QRIcon"; +import { LinkIcon } from "./icons/LinkIcon"; function getWalletUrl(module: ModuleState) { if (!modalState) { @@ -34,22 +38,16 @@ export async function renderGetAWallet() {

-

${translate( "modal.wallet.getAWallet" - )}

+ )} +
@@ -80,88 +78,9 @@ export async function renderGetAWallet() {
${ qrIcon && walletUrl - ? ` - - - - - - - - - ` + ? `${QRIcon}` : !qrIcon && walletUrl - ? ` - - - - - ` + ? `${LinkIcon}` : `` } diff --git a/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts b/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts index daa116035..d5f7b6bed 100644 --- a/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts +++ b/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts @@ -4,6 +4,8 @@ import { modalState } from "../modal"; import { renderLedgerSelectAccount } from "./LedgerSelectAccount"; import { renderWalletConnectionFailed } from "./WalletConnectionFailed"; import { translate } from "@near-wallet-selector/core"; +import { BackArrowIcon } from "./icons/BackArrowIcon"; +import { CloseIcon } from "./icons/CloseIcon"; export async function renderLedgerAccountsOverviewList( module: ModuleState, @@ -13,24 +15,16 @@ export async function renderLedgerAccountsOverviewList( document.querySelector(".modal-right")!.innerHTML = `
-
-

${translate("modal.ledger.connecting")} ${ +

+ ${translate("modal.ledger.connecting")} ${ selectedAccounts.length - } ${translate( - "modal.ledger.ofAccounts" - )}

+ } ${translate("modal.ledger.ofAccounts")} + +
diff --git a/packages/modal-ui-js/src/lib/components/LedgerSelectAccount.ts b/packages/modal-ui-js/src/lib/components/LedgerSelectAccount.ts index 57130c5da..5ed91bd57 100644 --- a/packages/modal-ui-js/src/lib/components/LedgerSelectAccount.ts +++ b/packages/modal-ui-js/src/lib/components/LedgerSelectAccount.ts @@ -4,6 +4,8 @@ import type { HardwareWalletAccountState } from "../render-modal"; import { renderLedgerAccountsOverviewList } from "./LedgerAccountsOverviewList"; import { renderSpecifyDerivationPath } from "./SpecifyDerivationPath"; import { translate } from "@near-wallet-selector/core"; +import { BackArrowIcon } from "./icons/BackArrowIcon"; +import { CloseIcon } from "./icons/CloseIcon"; export async function renderLedgerSelectAccount( module: ModuleState, @@ -15,22 +17,12 @@ export async function renderLedgerSelectAccount( document.querySelector(".modal-right")!.innerHTML = `
-
+

${translate( "modal.ledger.selectYourAccounts" )}

- +
diff --git a/packages/modal-ui-js/src/lib/components/NoLedgerAccountsFound.ts b/packages/modal-ui-js/src/lib/components/NoLedgerAccountsFound.ts index ad8158174..c3c5552b4 100644 --- a/packages/modal-ui-js/src/lib/components/NoLedgerAccountsFound.ts +++ b/packages/modal-ui-js/src/lib/components/NoLedgerAccountsFound.ts @@ -1,27 +1,18 @@ import type { ModuleState, Wallet } from "@near-wallet-selector/core"; import { renderConnectHardwareWallet } from "./ConnectHardwareWallet"; import { translate } from "@near-wallet-selector/core"; +import { BackArrowIcon } from "./icons/BackArrowIcon"; +import { CloseIcon } from "./icons/CloseIcon"; export async function renderNoLedgerAccountsFound(module: ModuleState) { document.querySelector(".modal-right")!.innerHTML = `
-
+

${translate("modal.ledger.noAccountsFound")}

- +
diff --git a/packages/modal-ui-js/src/lib/components/ScanQRCode.ts b/packages/modal-ui-js/src/lib/components/ScanQRCode.ts index d049a3330..7e406d550 100644 --- a/packages/modal-ui-js/src/lib/components/ScanQRCode.ts +++ b/packages/modal-ui-js/src/lib/components/ScanQRCode.ts @@ -4,6 +4,8 @@ import { translate } from "@near-wallet-selector/core"; import { connectToWallet } from "../render-modal"; import copy from "copy-to-clipboard"; import * as QRCode from "qrcode"; +import { CloseIcon } from "./icons/CloseIcon"; +import { CopyIcon } from "./icons/CopyIcon"; export async function renderScanQRCode( module: ModuleState, @@ -24,10 +26,7 @@ export async function renderScanQRCode( "modal.qr.scanWithYourMobile" )}
@@ -36,28 +35,7 @@ export async function renderScanQRCode(
- - - - + ${CopyIcon} ${translate("modal.qr.copyToClipboard")}
diff --git a/packages/modal-ui-js/src/lib/components/SpecifyDerivationPath.ts b/packages/modal-ui-js/src/lib/components/SpecifyDerivationPath.ts index 5e22547de..6625e749c 100644 --- a/packages/modal-ui-js/src/lib/components/SpecifyDerivationPath.ts +++ b/packages/modal-ui-js/src/lib/components/SpecifyDerivationPath.ts @@ -8,6 +8,10 @@ import { renderNoLedgerAccountsFound } from "./NoLedgerAccountsFound"; import { renderWalletConnecting } from "./WalletConnecting"; import { renderWalletConnectionFailed } from "./WalletConnectionFailed"; import { translate } from "@near-wallet-selector/core"; +import { CloseIcon } from "./icons/CloseIcon"; +import { BackArrowIcon } from "./icons/BackArrowIcon"; +import { UpArrowIcon } from "./icons/UpArrowIcon"; +import { DownArrowIcon } from "./icons/DownArrowIcon"; export function renderSpecifyDerivationPath(module: ModuleState) { if (!modalState) { @@ -16,22 +20,13 @@ export function renderSpecifyDerivationPath(module: ModuleState) { document.querySelector(".modal-right")!.innerHTML = `
-
+

${translate("modal.ledger.specifyHDPath")}

-
@@ -43,18 +38,10 @@ export function renderSpecifyDerivationPath(module: ModuleState) {
diff --git a/packages/modal-ui-js/src/lib/components/WalletAccount.ts b/packages/modal-ui-js/src/lib/components/WalletAccount.ts index 0420967f5..be43183bd 100644 --- a/packages/modal-ui-js/src/lib/components/WalletAccount.ts +++ b/packages/modal-ui-js/src/lib/components/WalletAccount.ts @@ -1,5 +1,7 @@ import type { ModuleState, Wallet } from "@near-wallet-selector/core"; import { translate } from "@near-wallet-selector/core"; +import { CloseIcon } from "./icons/CloseIcon"; +import { ConnectionSuccessIcon } from "./icons/ConnectionSuccessIcon"; export async function renderWalletAccount( module: ModuleState | null = null @@ -9,13 +11,7 @@ export async function renderWalletAccount(

@@ -28,28 +24,7 @@ export async function renderWalletAccount(

${module?.metadata.name}

- - - - + ${ConnectionSuccessIcon} ${translate("modal.wallet.connectionSuccessful")} diff --git a/packages/modal-ui-js/src/lib/components/WalletConnecting.ts b/packages/modal-ui-js/src/lib/components/WalletConnecting.ts index 5378f41cf..0d37bbb75 100644 --- a/packages/modal-ui-js/src/lib/components/WalletConnecting.ts +++ b/packages/modal-ui-js/src/lib/components/WalletConnecting.ts @@ -1,5 +1,6 @@ import type { ModuleState, Wallet } from "@near-wallet-selector/core"; import { translate } from "@near-wallet-selector/core"; +import { CloseIcon } from "./icons/CloseIcon"; export async function renderWalletConnecting( module: ModuleState | null = null @@ -9,13 +10,7 @@ export async function renderWalletConnecting(

diff --git a/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts b/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts index a391d0068..343bfdc40 100644 --- a/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts +++ b/packages/modal-ui-js/src/lib/components/WalletConnectionFailed.ts @@ -1,6 +1,8 @@ import type { ModuleState, Wallet } from "@near-wallet-selector/core"; import { connectToWallet } from "../render-modal"; import { translate } from "@near-wallet-selector/core"; +import { CloseIcon } from "./icons/CloseIcon"; +import { ConnectionErrorIcon } from "./icons/ConnectionErrorIcon"; export async function renderWalletConnectionFailed( module: ModuleState, @@ -11,13 +13,7 @@ export async function renderWalletConnectionFailed(

@@ -30,35 +26,7 @@ export async function renderWalletConnectionFailed(
- - - - - + ${ConnectionErrorIcon} ${translate("modal.wallet.connectionFailed")}

${err && err.message ? err.message : ""}

diff --git a/packages/modal-ui-js/src/lib/components/WalletNotInstalled.ts b/packages/modal-ui-js/src/lib/components/WalletNotInstalled.ts index 4fc5806ac..376146ad0 100644 --- a/packages/modal-ui-js/src/lib/components/WalletNotInstalled.ts +++ b/packages/modal-ui-js/src/lib/components/WalletNotInstalled.ts @@ -2,6 +2,8 @@ import type { ModuleState, Wallet } from "@near-wallet-selector/core"; import { modalState } from "../modal"; import { translate } from "@near-wallet-selector/core"; import { renderWhatIsAWallet } from "./WhatIsAWallet"; +import { BackArrowIcon } from "./icons/BackArrowIcon"; +import { CloseIcon } from "./icons/CloseIcon"; export function renderWalletNotInstalled( module: ModuleState & { @@ -16,20 +18,9 @@ export function renderWalletNotInstalled( document.querySelector(".modal-right")!.innerHTML = `
-
+
-

+

diff --git a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts index c415479d2..0b82596a0 100644 --- a/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts +++ b/packages/modal-ui-js/src/lib/components/WhatIsAWallet.ts @@ -1,5 +1,8 @@ import { renderGetAWallet } from "./GetAWallet"; import { translate } from "@near-wallet-selector/core"; +import { CloseIcon } from "./icons/CloseIcon"; +import { KeyIcon } from "./icons/KeyIcon"; +import { FolderIcon } from "./icons/FolderIcon"; export async function renderWhatIsAWallet() { document.querySelector(".modal-right")!.innerHTML = ` @@ -11,13 +14,7 @@ export async function renderWhatIsAWallet() { "modal.wallet.whatIsAWallet" )}
@@ -25,9 +22,7 @@ export async function renderWhatIsAWallet() {
- - - + ${KeyIcon}

${translate("modal.wallet.secureAndManage")}

@@ -37,11 +32,7 @@ export async function renderWhatIsAWallet() {
- - - - - + ${FolderIcon}

${translate("modal.wallet.logInToAny")}

diff --git a/packages/modal-ui-js/src/lib/components/icons/BackArrowIcon.ts b/packages/modal-ui-js/src/lib/components/icons/BackArrowIcon.ts new file mode 100644 index 000000000..cc44cb309 --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/BackArrowIcon.ts @@ -0,0 +1,6 @@ +export const BackArrowIcon = ` + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/CloseIcon.ts b/packages/modal-ui-js/src/lib/components/icons/CloseIcon.ts new file mode 100644 index 000000000..fc80d5351 --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/CloseIcon.ts @@ -0,0 +1,8 @@ +export const CloseIcon = ` + + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/ConnectionErrorIcon.ts b/packages/modal-ui-js/src/lib/components/icons/ConnectionErrorIcon.ts new file mode 100644 index 000000000..b5ef44e9d --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/ConnectionErrorIcon.ts @@ -0,0 +1,30 @@ +export const ConnectionErrorIcon = ` + + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/ConnectionSuccessIcon.ts b/packages/modal-ui-js/src/lib/components/icons/ConnectionSuccessIcon.ts new file mode 100644 index 000000000..dd5eb0cbc --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/ConnectionSuccessIcon.ts @@ -0,0 +1,23 @@ +export const ConnectionSuccessIcon = ` + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/CopyIcon.ts b/packages/modal-ui-js/src/lib/components/icons/CopyIcon.ts new file mode 100644 index 000000000..5f9d31afb --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/CopyIcon.ts @@ -0,0 +1,23 @@ +export const CopyIcon = ` + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/DownArrowIcon.ts b/packages/modal-ui-js/src/lib/components/icons/DownArrowIcon.ts new file mode 100644 index 000000000..47693be9a --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/DownArrowIcon.ts @@ -0,0 +1,6 @@ +export const DownArrowIcon = ` + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/FolderIcon.ts b/packages/modal-ui-js/src/lib/components/icons/FolderIcon.ts new file mode 100644 index 000000000..a8ed969d4 --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/FolderIcon.ts @@ -0,0 +1,6 @@ +export const FolderIcon = ` + + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/KeyIcon.ts b/packages/modal-ui-js/src/lib/components/icons/KeyIcon.ts new file mode 100644 index 000000000..1e75c7d5b --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/KeyIcon.ts @@ -0,0 +1,4 @@ +export const KeyIcon = ` + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/LedgerDeviceIcon.ts b/packages/modal-ui-js/src/lib/components/icons/LedgerDeviceIcon.ts new file mode 100644 index 000000000..b8484400b --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/LedgerDeviceIcon.ts @@ -0,0 +1,82 @@ +export const LedgerDeviceIcon = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; diff --git a/packages/modal-ui-js/src/lib/components/icons/LinkIcon.ts b/packages/modal-ui-js/src/lib/components/icons/LinkIcon.ts new file mode 100644 index 000000000..8cd85af36 --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/LinkIcon.ts @@ -0,0 +1,27 @@ +export const LinkIcon = ` + + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/QRIcon.ts b/packages/modal-ui-js/src/lib/components/icons/QRIcon.ts new file mode 100644 index 000000000..80882e448 --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/QRIcon.ts @@ -0,0 +1,54 @@ +export const QRIcon = ` + + + + + + + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/UpArrowIcon.ts b/packages/modal-ui-js/src/lib/components/icons/UpArrowIcon.ts new file mode 100644 index 000000000..ad734f933 --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/UpArrowIcon.ts @@ -0,0 +1,6 @@ +export const UpArrowIcon = ` + + +`; diff --git a/packages/modal-ui-js/src/lib/components/icons/WarningIcon.ts b/packages/modal-ui-js/src/lib/components/icons/WarningIcon.ts new file mode 100644 index 000000000..acc3f0b95 --- /dev/null +++ b/packages/modal-ui-js/src/lib/components/icons/WarningIcon.ts @@ -0,0 +1,6 @@ +export const WarningIcon = ` + + + + + `; diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts index a302e0b69..e707d2f4c 100644 --- a/packages/modal-ui-js/src/lib/render-modal.ts +++ b/packages/modal-ui-js/src/lib/render-modal.ts @@ -15,6 +15,7 @@ import { modalState } from "./modal"; import { renderWalletAccount } from "./components/WalletAccount"; import { renderScanQRCode } from "./components/ScanQRCode"; import { translate } from "@near-wallet-selector/core"; +import { WarningIcon } from "./components/icons/WarningIcon"; export type HardwareWalletAccountState = HardwareWalletAccount & { selected: boolean; @@ -206,7 +207,7 @@ function renderOptionsList( module.metadata.deprecated ? `
- + ${WarningIcon}
` : "" diff --git a/packages/modal-ui/src/lib/components/BackArrow.tsx b/packages/modal-ui/src/lib/components/BackArrow.tsx index 073c0efa2..0a85ac55d 100644 --- a/packages/modal-ui/src/lib/components/BackArrow.tsx +++ b/packages/modal-ui/src/lib/components/BackArrow.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { BackArrowIcon } from "./icons/BackArrowIcon"; interface BackArrowProps { onClick: () => void; @@ -7,21 +8,7 @@ interface BackArrowProps { export const BackArrow: React.FC = ({ onClick }) => { return ( ); }; diff --git a/packages/modal-ui/src/lib/components/CloseButton.tsx b/packages/modal-ui/src/lib/components/CloseButton.tsx index 577203304..3abcd7524 100644 --- a/packages/modal-ui/src/lib/components/CloseButton.tsx +++ b/packages/modal-ui/src/lib/components/CloseButton.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { CloseIcon } from "./icons/CloseIcon"; interface CloseButtonProps { onClick: () => void; @@ -7,16 +8,7 @@ interface CloseButtonProps { export const CloseButton: React.FC = ({ onClick }) => { return ( ); }; diff --git a/packages/modal-ui/src/lib/components/ConnectionResult.tsx b/packages/modal-ui/src/lib/components/ConnectionResult.tsx index 225ca3686..395fd96a4 100644 --- a/packages/modal-ui/src/lib/components/ConnectionResult.tsx +++ b/packages/modal-ui/src/lib/components/ConnectionResult.tsx @@ -1,6 +1,8 @@ import React from "react"; import type { ModuleState } from "@near-wallet-selector/core"; import { translate } from "@near-wallet-selector/core"; +import { ConnectionErrorIcon } from "./icons/ConnectionErrorIcon"; +import { ConnectionSuccessIcon } from "./icons/ConnectionSuccessIcon"; interface ConnectionResultProps { module: ModuleState; @@ -20,36 +22,7 @@ export const ConnectionResult: React.FC = ({ {err ? (
- - - - - - + {translate("modal.wallet.connectionFailed")}

{message}

@@ -59,29 +32,7 @@ export const ConnectionResult: React.FC = ({
) : (
- - - - - + {translate("modal.wallet.connectionSuccessful")}
)} diff --git a/packages/modal-ui/src/lib/components/DerivationPath.tsx b/packages/modal-ui/src/lib/components/DerivationPath.tsx index 32b0d06b4..8aa8bc0ac 100644 --- a/packages/modal-ui/src/lib/components/DerivationPath.tsx +++ b/packages/modal-ui/src/lib/components/DerivationPath.tsx @@ -11,8 +11,10 @@ import HardwareWalletAccountsForm from "./HardwareWalletAccountsForm"; import { WalletConnecting } from "./WalletConnecting"; import { ModalHeader } from "./ModalHeader"; import { BackArrow } from "./BackArrow"; -import { LedgerDeviceIcon } from "./LedgerDeviceIcon"; +import { LedgerDeviceIcon } from "./icons/LedgerDeviceIcon"; import { translate } from "@near-wallet-selector/core"; +import { UpArrowIcon } from "./icons/UpArrowIcon"; +import { DownArrowIcon } from "./icons/DownArrowIcon"; interface DerivationPathProps { selector: WalletSelector; @@ -288,21 +290,7 @@ export const DerivationPath: React.FC = ({ setCustomDerivationPath(newValue); }} > - - - +
diff --git a/packages/modal-ui/src/lib/components/ScanQRCode.tsx b/packages/modal-ui/src/lib/components/ScanQRCode.tsx index ebd654be1..ff05b78f4 100644 --- a/packages/modal-ui/src/lib/components/ScanQRCode.tsx +++ b/packages/modal-ui/src/lib/components/ScanQRCode.tsx @@ -2,7 +2,7 @@ import React from "react"; import QRCode from "qrcode"; import copy from "copy-to-clipboard"; import { ModalHeader } from "./ModalHeader"; -import { CopyIcon } from "./CopyIcon"; +import { CopyIcon } from "./icons/CopyIcon"; import { translate } from "@near-wallet-selector/core"; import type { ModuleState, Wallet } from "@near-wallet-selector/core"; diff --git a/packages/modal-ui/src/lib/components/WalletConnected.tsx b/packages/modal-ui/src/lib/components/WalletConnected.tsx index 2aeaabc64..429bd5ddb 100644 --- a/packages/modal-ui/src/lib/components/WalletConnected.tsx +++ b/packages/modal-ui/src/lib/components/WalletConnected.tsx @@ -2,6 +2,7 @@ import React, { Fragment } from "react"; import type { ModuleState } from "@near-wallet-selector/core"; import { CloseButton } from "./CloseButton"; import { translate } from "@near-wallet-selector/core"; +import { ConnectionSuccessIcon } from "./icons/ConnectionSuccessIcon"; interface WalletConnectedProps { module: ModuleState; @@ -26,29 +27,7 @@ export const WalletConnected: React.FC = ({

{module?.metadata.name}

- - - - - + {translate("modal.wallet.connectionSuccessful")}
diff --git a/packages/modal-ui/src/lib/components/WalletHome.tsx b/packages/modal-ui/src/lib/components/WalletHome.tsx index 9bddeec3e..04a701067 100644 --- a/packages/modal-ui/src/lib/components/WalletHome.tsx +++ b/packages/modal-ui/src/lib/components/WalletHome.tsx @@ -9,6 +9,10 @@ import type { import { ModalHeader } from "./ModalHeader"; import { BackArrow } from "./BackArrow"; import { translate } from "@near-wallet-selector/core"; +import { QRIcon } from "./icons/QRIcon"; +import { LinkIcon } from "./icons/LinkIcon"; +import { KeyIcon } from "./icons/KeyIcon"; +import { FolderIcon } from "./icons/FolderIcon"; interface WalletHomeProps { selector: WalletSelector; @@ -90,89 +94,8 @@ export const WalletHome: React.FC = ({ }} >
- {qrIcon && walletUrl && ( - - - - - - - - - - )} - {!qrIcon && walletUrl && ( - - - - - - )} + {qrIcon && walletUrl && } + {!qrIcon && walletUrl && }
{name} @@ -195,21 +118,7 @@ export const WalletHome: React.FC = ({
- - - +

{translate("modal.wallet.secureAndManage")}

@@ -218,34 +127,7 @@ export const WalletHome: React.FC = ({
- - - - - +

{translate("modal.wallet.logInToAny")}

diff --git a/packages/modal-ui/src/lib/components/WalletOptions.tsx b/packages/modal-ui/src/lib/components/WalletOptions.tsx index acf36ca9e..971ff7667 100644 --- a/packages/modal-ui/src/lib/components/WalletOptions.tsx +++ b/packages/modal-ui/src/lib/components/WalletOptions.tsx @@ -4,6 +4,7 @@ import type { ModuleState, Wallet, } from "@near-wallet-selector/core"; +import { WarningIcon } from "./icons/WarningIcon"; interface WalletOptionsProps { selector: WalletSelector; @@ -108,32 +109,7 @@ export const WalletOptions: React.FC = ({
{deprecated && (
- - - - - +
)} diff --git a/packages/modal-ui/src/lib/components/icons/BackArrowIcon.tsx b/packages/modal-ui/src/lib/components/icons/BackArrowIcon.tsx new file mode 100644 index 000000000..9fb2d068a --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/BackArrowIcon.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const BackArrowIcon: React.FC = () => { + return ( + + + + ); +}; diff --git a/packages/modal-ui/src/lib/components/icons/CloseIcon.tsx b/packages/modal-ui/src/lib/components/icons/CloseIcon.tsx new file mode 100644 index 000000000..e4066cbd4 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/CloseIcon.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const CloseIcon: React.FC = () => { + return ( + + + + + ); +}; diff --git a/packages/modal-ui/src/lib/components/icons/ConnectionErrorIcon.tsx b/packages/modal-ui/src/lib/components/icons/ConnectionErrorIcon.tsx new file mode 100644 index 000000000..5d6668ba8 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/ConnectionErrorIcon.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +export const ConnectionErrorIcon: React.FC = () => { + return ( + + + + + + ); +}; diff --git a/packages/modal-ui/src/lib/components/icons/ConnectionSuccessIcon.tsx b/packages/modal-ui/src/lib/components/icons/ConnectionSuccessIcon.tsx new file mode 100644 index 000000000..26de00022 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/ConnectionSuccessIcon.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +export const ConnectionSuccessIcon: React.FC = () => { + return ( + + + + + ); +}; diff --git a/packages/modal-ui/src/lib/components/CopyIcon.tsx b/packages/modal-ui/src/lib/components/icons/CopyIcon.tsx similarity index 100% rename from packages/modal-ui/src/lib/components/CopyIcon.tsx rename to packages/modal-ui/src/lib/components/icons/CopyIcon.tsx diff --git a/packages/modal-ui/src/lib/components/icons/DownArrowIcon.tsx b/packages/modal-ui/src/lib/components/icons/DownArrowIcon.tsx new file mode 100644 index 000000000..b3653bab7 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/DownArrowIcon.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const DownArrowIcon: React.FC = () => { + return ( + + + + ); +}; diff --git a/packages/modal-ui/src/lib/components/icons/FolderIcon.tsx b/packages/modal-ui/src/lib/components/icons/FolderIcon.tsx new file mode 100644 index 000000000..cf5153a47 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/FolderIcon.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +export const FolderIcon = () => ( + + + + + +); diff --git a/packages/modal-ui/src/lib/components/icons/KeyIcon.tsx b/packages/modal-ui/src/lib/components/icons/KeyIcon.tsx new file mode 100644 index 000000000..31b05f8fc --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/KeyIcon.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +export const KeyIcon = () => ( + + + +); diff --git a/packages/modal-ui/src/lib/components/LedgerDeviceIcon.tsx b/packages/modal-ui/src/lib/components/icons/LedgerDeviceIcon.tsx similarity index 100% rename from packages/modal-ui/src/lib/components/LedgerDeviceIcon.tsx rename to packages/modal-ui/src/lib/components/icons/LedgerDeviceIcon.tsx diff --git a/packages/modal-ui/src/lib/components/icons/LinkIcon.tsx b/packages/modal-ui/src/lib/components/icons/LinkIcon.tsx new file mode 100644 index 000000000..62a614af2 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/LinkIcon.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +export const LinkIcon = () => ( + + + + + +); diff --git a/packages/modal-ui/src/lib/components/icons/QRIcon.tsx b/packages/modal-ui/src/lib/components/icons/QRIcon.tsx new file mode 100644 index 000000000..ecdeacce5 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/QRIcon.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +export const QRIcon = () => ( + + + + + + + + + +); diff --git a/packages/modal-ui/src/lib/components/icons/UpArrowIcon.tsx b/packages/modal-ui/src/lib/components/icons/UpArrowIcon.tsx new file mode 100644 index 000000000..75287ae72 --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/UpArrowIcon.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const UpArrowIcon: React.FC = () => { + return ( + + + + ); +}; diff --git a/packages/modal-ui/src/lib/components/icons/WarningIcon.tsx b/packages/modal-ui/src/lib/components/icons/WarningIcon.tsx new file mode 100644 index 000000000..9cb5a640d --- /dev/null +++ b/packages/modal-ui/src/lib/components/icons/WarningIcon.tsx @@ -0,0 +1,32 @@ +import React from "react"; + +export const WarningIcon: React.FC = () => { + return ( + + + + + + ); +};