@@ -244,6 +280,21 @@ export default function SignDataItem() {
showOptions={false}
back={cancel}
/>
+ {mismatch && transfer && (
+
+
+ {" "}
+
+
+
{browser.i18n.getMessage("mismatch_warning_title")}
+
+ {browser.i18n.getMessage("mismatch_warning")}
+
+ {/* Read more */}
+
+
+ )}
{browser.i18n.getMessage(
diff --git a/src/routes/auth/signMessage.tsx b/src/routes/auth/signKeystone.tsx
similarity index 68%
rename from src/routes/auth/signMessage.tsx
rename to src/routes/auth/signKeystone.tsx
index 6fa406f08..fdbb94e45 100644
--- a/src/routes/auth/signMessage.tsx
+++ b/src/routes/auth/signKeystone.tsx
@@ -1,15 +1,13 @@
import { replyToAuthRequest, useAuthParams, useAuthUtils } from "~utils/auth";
-import { decodeSignature, messageToUR } from "~wallets/hardware/keystone";
+import {
+ dataItemToUR,
+ decodeSignature,
+ messageToUR
+} from "~wallets/hardware/keystone";
import { useEffect, useState } from "react";
import { useScanner } from "@arconnect/keystone-sdk";
import { useActiveWallet } from "~wallets/hooks";
import type { UR } from "@ngraveio/bc-ur";
-import {
- Properties,
- PropertyName,
- PropertyValue,
- TransactionProperty
-} from "~routes/popup/transaction/[id]";
import {
ButtonV2,
Section,
@@ -24,31 +22,69 @@ import Progress from "~components/Progress";
import browser from "webextension-polyfill";
import Head from "~components/popup/Head";
import Message from "~components/auth/Message";
-
-export default function SignMessage() {
+import type { AuthKeystoneType } from "~api/modules/sign/sign_auth";
+import { onMessage, sendMessage } from "@arconnect/webext-bridge";
+import type { Chunk } from "~api/modules/sign/chunks";
+import { bytesFromChunks } from "~api/modules/sign/transaction_builder";
+export default function SignKeystone() {
// sign params
const params = useAuthParams<{
- data: string;
+ collectionId: string;
+ keystoneSignType: string;
}>();
-
// reconstructed transaction
const [dataToSign, setDataToSign] = useState();
+ const [dataType, setDataType] = useState("Message");
useEffect(() => {
(async () => {
- if (!params?.data) return;
- // reset tx
- setDataToSign(Buffer.from(params?.data, "base64"));
+ // request chunks
+ if (params) {
+ setDataType(params?.keystoneSignType);
+ sendMessage("auth_listening", null, "background");
+
+ const chunks: Chunk[] = [];
+
+ // listen for chunks
+ onMessage("auth_chunk", ({ sender, data }) => {
+ // check data type
+ if (
+ data.collectionID !== params.collectionID ||
+ sender.context !== "background" ||
+ data.type === "start"
+ ) {
+ return;
+ }
+ // end chunk stream
+ if (data.type === "end") {
+ const bytes = bytesFromChunks(chunks);
+ const signData = Buffer.from(bytes);
+ setDataToSign(signData);
+ } else if (data.type === "bytes") {
+ // add chunk
+ chunks.push(data);
+ }
+ });
+ }
})();
}, [params]);
+ useEffect(() => {
+ (async () => {
+ if (dataType === "DataItem" && !!dataToSign) {
+ await loadTransactionUR();
+ setPage("qr");
+ }
+ })();
+ }, [dataType, dataToSign]);
+
// get auth utils
- const { closeWindow, cancel } = useAuthUtils("signMessage", params?.authID);
+ const { closeWindow, cancel } = useAuthUtils("signKeystone", params?.authID);
// authorize
async function authorize(data?: any) {
// reply to request
- await replyToAuthRequest("signMessage", params.authID, undefined, data);
+ await replyToAuthRequest("signKeystone", params.authID, undefined, data);
// close the window
closeWindow();
@@ -69,11 +105,14 @@ export default function SignMessage() {
async function loadTransactionUR() {
if (wallet.type !== "hardware" || !dataToSign) return;
-
// load the ur data
- const ur = await messageToUR(dataToSign, wallet.xfp);
-
- setTransactionUR(ur);
+ if (dataType === "DataItem") {
+ const ur = await dataItemToUR(dataToSign, wallet.xfp);
+ setTransactionUR(ur);
+ } else {
+ const ur = await messageToUR(dataToSign, wallet.xfp);
+ setTransactionUR(ur);
+ }
}
// loading
@@ -106,7 +145,7 @@ export default function SignMessage() {
// reply to request
await replyToAuthRequest(
- "signMessage",
+ "signKeystone",
params.authID,
"Failed to decode signature from keystone"
);
@@ -133,7 +172,7 @@ export default function SignMessage() {
allowOpen={false}
/>
- {(!page && dataToSign && (
+ {(!page && dataToSign && dataType === "Message" && (
@@ -145,13 +184,13 @@ export default function SignMessage() {
<>
+ onError={(error) => {
setToast({
type: "error",
duration: 2300,
content: browser.i18n.getMessage(`keystone_${error}`)
- })
- }
+ });
+ }}
/>
diff --git a/src/routes/popup/announcement.tsx b/src/routes/popup/announcement.tsx
index 349c012df..7b649c2b5 100644
--- a/src/routes/popup/announcement.tsx
+++ b/src/routes/popup/announcement.tsx
@@ -1,16 +1,15 @@
-import {
- ButtonV2,
- ModalV2,
- Spacer,
- Text,
- type DisplayTheme
-} from "@arconnect/components";
+import { ButtonV2, ModalV2, Spacer } from "@arconnect/components";
import { ExtensionStorage } from "~utils/storage";
import { useEffect, useRef, useState } from "react";
import browser from "webextension-polyfill";
import aoLogo from "url:/assets/ecosystem/ao-token-logo.png";
-import styled from "styled-components";
import { useStorage } from "@plasmohq/storage/hook";
+import {
+ ContentWrapper,
+ Content,
+ HeaderText,
+ CenterText
+} from "~components/modals/Components";
export const AnnouncementPopup = ({ isOpen, setOpen }) => {
const [notifications, setNotifications] = useStorage({
@@ -27,11 +26,6 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
}
}, [notifications]);
- const handleCheckbox = async () => {
- setChecked((prev) => !prev);
- setNotifications((prev) => !prev);
- };
-
const handleClickOutside = (event) => {
if (modalRef.current && !modalRef.current.contains(event.target)) {
ExtensionStorage.set("show_announcement", false);
@@ -87,83 +81,3 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
);
};
-
-export const Content = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex: none;
- align-self: stretch;
- flex-grow: 0;
-`;
-
-export const ContentWrapper = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: space-between;
-`;
-
-const CenterText = styled(Text).attrs({
- noMargin: true
-})<{ displayTheme?: DisplayTheme }>`
- width: 245px;
- text-align: center;
- color: ${(props) =>
- props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
- font-weight: 500;
- font-size: 11px;
- line-height: 16px;
- align-self: stretch;
- flex: none;
- flex-grow: 0;
-`;
-
-const Link = styled.u`
- cursor: pointer;
-`;
-
-const CheckContainer = styled.div`
- width: 245px;
- display: flex;
- flex-direction: row;
- padding-left: 72px;
- align-items: center;
- isolation: isolate;
- font-weight: 500;
- font-size: 11px;
- flex: none;
- flex-grow: 0;
- gap: 8px;
-`;
-
-const CheckedSvg = styled.svg`
- position: absolute;
- left: calc(50% + 4px / 2 - 113px);
- width: 18px;
- height: 18px;
- cursor: pointer;
- flex: none;
- flex-grow: 0;
- background: #8e7bea;
- border-radius: 2px;
-`;
-
-const UncheckedSvg = styled.svg`
- position: absolute;
- left: calc(50% + 4px / 2 - 113px);
- width: 18px;
- height: 18px;
- cursor: pointer;
- flex: none;
- flex-grow: 0;
-`;
-
-const HeaderText = styled(Text)<{ displayTheme?: DisplayTheme }>`
- font-size: 18px;
- font-weight: 500;
- color: ${(props) =>
- props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
-`;
diff --git a/src/routes/popup/index.tsx b/src/routes/popup/index.tsx
index d9a6cd89c..84e0fe085 100644
--- a/src/routes/popup/index.tsx
+++ b/src/routes/popup/index.tsx
@@ -107,17 +107,13 @@ export default function Home() {
useEffect(() => {
const checkBits = async () => {
- const bits = await checkWalletBits();
+ if (!loggedIn) return;
- if (bits === null) {
- return;
- } else {
- await trackEvent(EventType.BITS_LENGTH, { mismatch: bits });
- }
+ const bits = await checkWalletBits();
};
checkBits();
- }, []);
+ }, [loggedIn]);
useEffect(() => {
// check whether to show announcement
diff --git a/src/routes/popup/passwordPopup.tsx b/src/routes/popup/passwordPopup.tsx
index e9648c101..0b0f0d765 100644
--- a/src/routes/popup/passwordPopup.tsx
+++ b/src/routes/popup/passwordPopup.tsx
@@ -12,7 +12,7 @@ import aoLogo from "url:/assets/ecosystem/ao-token-logo.png";
import styled from "styled-components";
import { CheckIcon, CloseIcon } from "@iconicicons/react";
import { ResetButton } from "~components/dashboard/Reset";
-import { Content, ContentWrapper } from "./announcement";
+import { Content, ContentWrapper } from "~components/modals/Components";
export const PasswordWarningModal = ({
open,
diff --git a/src/routes/popup/send/announcement.tsx b/src/routes/popup/send/announcement.tsx
index e5f77b6b8..91f8484a0 100644
--- a/src/routes/popup/send/announcement.tsx
+++ b/src/routes/popup/send/announcement.tsx
@@ -1,14 +1,13 @@
-import {
- ButtonV2,
- ModalV2,
- Spacer,
- Text,
- type DisplayTheme
-} from "@arconnect/components";
+import { ButtonV2, ModalV2, Spacer } from "@arconnect/components";
import { useRef } from "react";
import browser from "webextension-polyfill";
import aoLogo from "url:/assets/ecosystem/ao-token-logo.png";
-import styled from "styled-components";
+import {
+ HeaderText,
+ CenterText,
+ Content,
+ ContentWrapper
+} from "~components/modals/Components";
export const AnnouncementPopup = ({ isOpen, setOpen }) => {
const modalRef = useRef(null);
@@ -60,48 +59,3 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
);
};
-
-const Content = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex: none;
- align-self: stretch;
- flex-grow: 0;
-`;
-
-const ContentWrapper = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: space-between;
-`;
-
-const CenterText = styled(Text).attrs({
- noMargin: true
-})<{ displayTheme?: DisplayTheme }>`
- width: 245px;
- text-align: center;
- color: ${(props) =>
- props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
- font-weight: 500;
- font-size: 11px;
- line-height: 16px;
- align-self: stretch;
- flex: none;
- flex-grow: 0;
-
- a {
- color: rgb(${(props) => props.theme.theme});
- text-decoration: none;
- }
-`;
-
-const HeaderText = styled(Text)<{ displayTheme?: DisplayTheme }>`
- font-size: 18px;
- font-weight: 500;
- color: ${(props) =>
- props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
-`;
diff --git a/src/routes/popup/send/confirm.tsx b/src/routes/popup/send/confirm.tsx
index 0b745bb7f..a32e82f15 100644
--- a/src/routes/popup/send/confirm.tsx
+++ b/src/routes/popup/send/confirm.tsx
@@ -45,16 +45,26 @@ import {
import { fractionedToBalance } from "~tokens/currency";
import { type Token } from "~tokens/token";
import { useContact } from "~contacts/hooks";
-import { sendAoTransfer, useAo } from "~tokens/aoTokens/ao";
+import {
+ sendAoTransfer,
+ sendAoTransferKeystone,
+ useAo
+} from "~tokens/aoTokens/ao";
import { useActiveWallet } from "~wallets/hooks";
import { UR } from "@ngraveio/bc-ur";
-import { decodeSignature, transactionToUR } from "~wallets/hardware/keystone";
+import {
+ KeystoneSigner,
+ decodeSignature,
+ transactionToUR,
+ type KeystoneInteraction
+} from "~wallets/hardware/keystone";
import { useScanner } from "@arconnect/keystone-sdk";
import Progress from "~components/Progress";
import { updateSubscription } from "~subscriptions";
import { SubscriptionStatus } from "~subscriptions/subscription";
import { checkPassword } from "~wallets/auth";
import BigNumber from "bignumber.js";
+import { SignType } from "@keystonehq/bc-ur-registry-arweave";
interface Props {
tokenID: string;
@@ -507,9 +517,34 @@ export default function Confirm({ tokenID, qty, subscription }: Props) {
const [transactionUR, setTransactionUR] = useState();
const [preparedTx, setPreparedTx] = useState>();
+ const keystoneInteraction = useMemo(() => {
+ const keystoneInteraction: KeystoneInteraction = {
+ display(data) {
+ setIsLoading(false);
+ setTransactionUR(data);
+ }
+ };
+ return keystoneInteraction;
+ }, [setIsLoading]);
+
+ const keystoneSigner = useMemo(() => {
+ if (wallet?.type !== "hardware") return null;
+ const keystoneSigner = new KeystoneSigner(
+ Buffer.from(Arweave.utils.b64UrlToBuffer(wallet.publicKey)),
+ wallet.xfp,
+ isAo ? SignType.DataItem : SignType.Transaction,
+ keystoneInteraction
+ );
+ return keystoneSigner;
+ }, [wallet, isAo, keystoneInteraction]);
+
useEffect(() => {
(async () => {
- if (!recipient?.address) return;
+ setIsLoading(true);
+ if (!recipient?.address) {
+ setIsLoading(false);
+ return;
+ }
// get the tx from storage
const prepared = await prepare(recipient.address);
@@ -522,7 +557,36 @@ export default function Confirm({ tokenID, qty, subscription }: Props) {
// check if the current wallet
// is a hardware wallet
- if (wallet?.type !== "hardware") return;
+ if (wallet?.type !== "hardware") {
+ setIsLoading(false);
+ return;
+ }
+
+ if (isAo) {
+ try {
+ setPreparedTx(prepared);
+ const res = await sendAoTransferKeystone(
+ ao,
+ tokenID,
+ recipient.address,
+ fractionedToBalance(amount, token, "AO"),
+ keystoneSigner
+ );
+ if (res) {
+ setToast({
+ type: "success",
+ content: browser.i18n.getMessage("sent_tx"),
+ duration: 2000
+ });
+ push(`/transaction/${res}`);
+ setIsLoading(false);
+ }
+ return res;
+ } catch (err) {
+ console.log("err in ao", err);
+ throw err;
+ }
+ }
const arweave = new Arweave(prepared.gateway);
const convertedTransaction = arweave.transactions.fromRaw(
@@ -531,6 +595,7 @@ export default function Confirm({ tokenID, qty, subscription }: Props) {
// get tx UR
try {
+ setIsLoading(false);
setTransactionUR(
await transactionToUR(
convertedTransaction,
@@ -548,7 +613,7 @@ export default function Confirm({ tokenID, qty, subscription }: Props) {
push("/send/transfer");
}
})();
- }, [wallet, recipient]);
+ }, [wallet, recipient, keystoneSigner, setIsLoading]);
// current hardware wallet operation
const [hardwareStatus, setHardwareStatus] = useState<"play" | "scan">();
@@ -582,6 +647,11 @@ export default function Confirm({ tokenID, qty, subscription }: Props) {
// decode signature
const { id, signature } = await decodeSignature(res);
+ if (isAo) {
+ keystoneSigner.submitSignature(signature);
+ return;
+ }
+
// set signature
transaction.setSignature({
id,
diff --git a/src/routes/popup/send/index.tsx b/src/routes/popup/send/index.tsx
index 1b801e80d..ea6e621ef 100644
--- a/src/routes/popup/send/index.tsx
+++ b/src/routes/popup/send/index.tsx
@@ -138,9 +138,6 @@ export default function Send({ id }: Props) {
"token"
);
- const wallet = useActiveWallet();
- const keystoneError = wallet?.type === "hardware" && isAo;
-
// tokens
const tokens = useTokens();
@@ -428,32 +425,21 @@ export default function Send({ id }: Props) {
{AO_NATIVE_TOKEN === tokenID && (
)}
-
+
{/* TOP INPUT */}
- {(keystoneError || degraded) && (
+ {degraded && (
- {keystoneError ? (
- <>
-
{browser.i18n.getMessage("keystone_ao_title")}
-
- {browser.i18n.getMessage("keystone_ao_description")}
-
-
- ) : (
- <>
- {browser.i18n.getMessage("ao_degraded")}
-
- {browser.i18n
- .getMessage("ao_degraded_description")
- .replace("
", "")}
-
-
- )}
+ {browser.i18n.getMessage("ao_degraded")}
+
+ {browser.i18n
+ .getMessage("ao_degraded_description")
+ .replace("
", "")}
+
)}
diff --git a/src/routes/popup/settings/apps/[url]/permissions.tsx b/src/routes/popup/settings/apps/[url]/permissions.tsx
index 2f9ea8304..2145bd6cc 100644
--- a/src/routes/popup/settings/apps/[url]/permissions.tsx
+++ b/src/routes/popup/settings/apps/[url]/permissions.tsx
@@ -9,7 +9,7 @@ import { useLocation } from "wouter";
export default function AppPermissions({ url }: Props) {
// app settings
- const app = new Application(url);
+ const app = new Application(decodeURIComponent(url));
const [settings, updateSettings] = app.hook();
const [, setLocation] = useLocation();
@@ -24,42 +24,53 @@ export default function AppPermissions({ url }: Props) {
{browser.i18n.getMessage("permissions")}
{Object.keys(permissionData).map(
- (permissionName: PermissionType, i) => (
-
-
-
- updateSettings((val) => {
- // toggle permission
- if (
- checked &&
- !val.permissions.includes(permissionName)
- ) {
- val.permissions.push(permissionName);
- } else if (!checked) {
- val.permissions = val.permissions.filter(
- (p) => p !== permissionName
- );
- }
+ (permissionName: PermissionType, i) => {
+ let formattedPermissionName = permissionName
+ .split("_")
+ .map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+ .join(" ");
- return val;
- })
- }
- checked={settings.permissions.includes(permissionName)}
- />
-
-
{permissionName}
-
- {browser.i18n.getMessage(permissionData[permissionName])}
-
-
- {i !== Object.keys(permissionData).length - 1 && (
-
- )}
-
+
+
+ updateSettings((val) => {
+ // toggle permission
+ if (
+ checked &&
+ !val.permissions.includes(permissionName)
+ ) {
+ val.permissions.push(permissionName);
+ } else if (!checked) {
+ val.permissions = val.permissions.filter(
+ (p) => p !== permissionName
+ );
+ }
+
+ return val;
+ })
+ }
+ checked={settings.permissions.includes(permissionName)}
+ />
+
+
{formattedPermissionName}
+
+ {browser.i18n.getMessage(permissionData[permissionName])}
+
+
+ {i !== Object.keys(permissionData).length - 1 && (
+
+ )}
+