From aadcdb8232eed9fd372ea9e125f0dba302672e9f Mon Sep 17 00:00:00 2001 From: nicholas ma Date: Sat, 24 Feb 2024 09:56:07 -0800 Subject: [PATCH 1/6] fix: extend back button --- src/components/popup/HeadV2.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/popup/HeadV2.tsx b/src/components/popup/HeadV2.tsx index 7631e9d76..d790929ad 100644 --- a/src/components/popup/HeadV2.tsx +++ b/src/components/popup/HeadV2.tsx @@ -98,13 +98,13 @@ export default function HeadV2({ collapse={scrollDirection === "down"} scrolled={scrolled} > - - { - if (back) await back(); - else goBack(); - }} - /> + { + if (back) await back(); + else goBack(); + }} + > + {title} @@ -170,7 +170,9 @@ const BackWrapper = styled.div` position: relative; display: flex; width: max-content; - height: max-content; + align-items: center; + justify-content: center; + height: 100%; cursor: pointer; ${hoverEffect} From d8c11d896b1e4eb66dfa9520363f663a58bdfbca Mon Sep 17 00:00:00 2001 From: elehmandevelopment Date: Mon, 26 Feb 2024 10:23:14 -0700 Subject: [PATCH 2/6] refactor: update light mode text and messages --- assets/_locales/en/messages.json | 20 ++++++++++++++++++++ src/routes/popup/announcement.tsx | 12 ++++++------ 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/assets/_locales/en/messages.json b/assets/_locales/en/messages.json index 75cd58472..e88d2bd32 100644 --- a/assets/_locales/en/messages.json +++ b/assets/_locales/en/messages.json @@ -1649,5 +1649,25 @@ "setting_ao_support_description": { "message": "Show ao tokens in your wallet (beta)", "description": "ao support settings description" + }, + "got_it": { + "message": "Got it", + "description": "Got it button text" + }, + "display_ao_tokens": { + "message": "Display AO tokens in ArConnect (Beta)", + "description": "Display AO tokens description" + }, + "ao_computer": { + "message": "ao.computer", + "description": "ao computer url" + }, + "ao_announcement_text": { + "message": "Look out for new updates around ao in the future. To learn more visit", + "description": "ao announcement description text" + }, + "ao_announcement_title": { + "message": "AO testnet is now live!", + "description": "ao announcement title text" } } diff --git a/src/routes/popup/announcement.tsx b/src/routes/popup/announcement.tsx index ea4611ceb..7daf82b42 100644 --- a/src/routes/popup/announcement.tsx +++ b/src/routes/popup/announcement.tsx @@ -35,18 +35,17 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => { ao graphic
- AO testnet is now live! + {browser.i18n.getMessage("ao_announcement_title")} - Look out for new updates around ao in the future. To learn more - visit{" "} + {browser.i18n.getMessage("ao_announcement_text")}{" "} browser.tabs.create({ url: "https://ao.computer" }) } > - ao.computer + {browser.i18n.getMessage("ao_computer")} @@ -84,7 +83,7 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => { )} - Display AO tokens in ArConnect (Beta) + {browser.i18n.getMessage("display_ao_tokens")}
@@ -97,7 +96,7 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => { }} style={{ marginTop: "43px", fontWeight: "400" }} > - Dismiss + {browser.i18n.getMessage("got_it")} @@ -178,4 +177,5 @@ const UncheckedSvg = styled.svg` const HeaderText = styled(Text)` font-size: 18px; font-weight: 500; + color: #ffffff; `; From 1a0bcfe05b17e66f9199472a02ef6b37b184262b Mon Sep 17 00:00:00 2001 From: elehmandevelopment Date: Mon, 26 Feb 2024 12:59:02 -0700 Subject: [PATCH 3/6] chore: update dependencies --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 23320bbed..01eba217c 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ ] }, "dependencies": { - "@arconnect/components": "^0.2.7", + "@arconnect/components": "^0.2.8", "@arconnect/keystone-sdk": "^0.0.5", "@arconnect/warp-dre": "^0.0.1", "@arconnect/webext-bridge": "^5.0.6", diff --git a/yarn.lock b/yarn.lock index 76e5cd0c7..f3baa74a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15,10 +15,10 @@ resolved "https://registry.yarnpkg.com/@apocentre/alias-sampling/-/alias-sampling-0.5.3.tgz#897ff181b48ad7b2bcb4ecf29400214888244f08" integrity sha512-7UDWIIF9hIeJqfKXkNIzkVandlwLf1FWTSdrb9iXvOP8oF544JRXQjCbiTmCv2c9n44n/FIWtehhBfNuAx2CZA== -"@arconnect/components@^0.2.7": - version "0.2.7" - resolved "https://registry.yarnpkg.com/@arconnect/components/-/components-0.2.7.tgz#71f6469d6c169fc6ac179917bef798bb0f288402" - integrity sha512-qfdsOKeeo5BKeL4ozJhj0Pm5miSr8760rgX95p5upsPJYg5RSikHFwm9jN+pS0OyEYWMBUom6Aa2NfVjwrvtAw== +"@arconnect/components@^0.2.8": + version "0.2.8" + resolved "https://registry.yarnpkg.com/@arconnect/components/-/components-0.2.8.tgz#ed400223da5a8682da69262712e56f4663b605ed" + integrity sha512-CM8clY8LGr7PBjhhg+2ynI83OqRJSJspyC2xltZh9D/vcN24deFalWcgOFRIQOYMCYQZKZPcCt+oRm2lDi/IvA== dependencies: "@iconicicons/react" "^1.5.1" axios "^1.6.7" From 748844ee272ab185acaf3ab5357724ceda2d7b2f Mon Sep 17 00:00:00 2001 From: elehmandevelopment Date: Mon, 26 Feb 2024 13:00:03 -0700 Subject: [PATCH 4/6] style: update announcement modal > light mode --- src/routes/popup/announcement.tsx | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/routes/popup/announcement.tsx b/src/routes/popup/announcement.tsx index 7daf82b42..623f0dc72 100644 --- a/src/routes/popup/announcement.tsx +++ b/src/routes/popup/announcement.tsx @@ -1,13 +1,22 @@ -import { ButtonV2, ModalV2, Spacer, Text } from "@arconnect/components"; +import { + ButtonV2, + ModalV2, + Spacer, + Text, + type DisplayTheme +} from "@arconnect/components"; import aoGraphic from "url:/assets/ecosystem/ao-arconnect.svg"; import { ExtensionStorage } from "~utils/storage"; import { useEffect, useState } from "react"; import browser from "webextension-polyfill"; +import { useTheme } from "~utils/theme"; import styled from "styled-components"; export const AnnouncementPopup = ({ isOpen, setOpen }) => { const [checked, setChecked] = useState(true); + const theme = useTheme(); + const handleCheckbox = async () => { const newState = !checked; setChecked(newState); @@ -82,7 +91,7 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => { /> )} - + {browser.i18n.getMessage("display_ao_tokens")} @@ -124,11 +133,12 @@ const ContentWrapper = styled.div` const CenterText = styled(Text).attrs({ noMargin: true -})` +})<{ displayTheme: DisplayTheme }>` width: 245px; text-align: center; - color: #ffffff; - font-weight: 400; + color: ${(props) => + props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"}; + font-weight: 500; font-size: 11px; line-height: 16px; align-self: stretch; @@ -174,8 +184,9 @@ const UncheckedSvg = styled.svg` flex-grow: 0; `; -const HeaderText = styled(Text)` +const HeaderText = styled(Text)<{ displayTheme: DisplayTheme }>` font-size: 18px; font-weight: 500; - color: #ffffff; + color: ${(props) => + props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"}; `; From bf18b74923ab2cd6a9f43d0af8b14da732a37405 Mon Sep 17 00:00:00 2001 From: nicholas ma Date: Mon, 26 Feb 2024 14:59:09 -0800 Subject: [PATCH 5/6] fix: back button spacing --- src/components/popup/HeadV2.tsx | 9 +- src/routes/popup/send/index.tsx | 417 ++++++++++++++++---------------- 2 files changed, 212 insertions(+), 214 deletions(-) diff --git a/src/components/popup/HeadV2.tsx b/src/components/popup/HeadV2.tsx index d790929ad..5b8b240a9 100644 --- a/src/components/popup/HeadV2.tsx +++ b/src/components/popup/HeadV2.tsx @@ -172,17 +172,10 @@ const BackWrapper = styled.div` width: max-content; align-items: center; justify-content: center; + padding: 8px 0; height: 100%; cursor: pointer; - ${hoverEffect} - - &::after { - width: 158%; - height: 158%; - border-radius: 100%; - } - &:active svg { transform: scale(0.92); } diff --git a/src/routes/popup/send/index.tsx b/src/routes/popup/send/index.tsx index d49ca6940..16943cb7e 100644 --- a/src/routes/popup/send/index.tsx +++ b/src/routes/popup/send/index.tsx @@ -382,218 +382,222 @@ export default function Send({ id }: Props) { } return ( - - - { - TempTransactionStorage.removeItem("send"); - setQty(""); - goBack(); - }} - title={browser.i18n.getMessage("send")} - /> - {/* TOP INPUT */} - - { - setShowSlider(!showSlider); - }} - > - - {contact && contact.profileIcon ? ( - - ) : ( - contact && ( - - {generateProfileIcon(contact.name || contact.address)} - - ) - )} - {!recipient.address - ? browser.i18n.getMessage("select_recipient") - : contact && contact.name - ? contact.name - : formatAddress(recipient.address, 10)} - - - - setQty((e.target as HTMLInputElement).value)} - onKeyDown={(e) => { - if ( - e.key !== "Enter" || - invalidQty || - parseFloat(qty) === 0 || - qty === "" || - recipient.address === "" - ) - return; - send(); - }} - fullWidth - icon={ - - {!!price && ( - - USD/ - - {token.ticker.toUpperCase()} - - + <> + { + TempTransactionStorage.removeItem("send"); + setQty(""); + goBack(); + }} + title={browser.i18n.getMessage("send")} + /> + + + {/* TOP INPUT */} + + { + setShowSlider(!showSlider); + }} + > + + {contact && contact.profileIcon ? ( + + ) : ( + contact && ( + + {generateProfileIcon(contact.name || contact.address)} + + ) )} - setQty(max.toString())} - > - Max - - - } - /> - - - {!!price && !isAo ? ( - - ≈ - {qtyMode === "fiat" - ? formatTokenBalance(secondaryQty) - : formatFiatBalance(secondaryQty, currency)} - {qtyMode === "fiat" && " " + token.ticker} - - ) : ( - <> - )} - - ~{networkFee} - {" AR "} - {browser.i18n.getMessage("network_fee")} - - - {!uToken && ( - + {!recipient.address + ? browser.i18n.getMessage("select_recipient") + : contact && contact.name + ? contact.name + : formatAddress(recipient.address, 10)} + + + setQty((e.target as HTMLInputElement).value)} + onKeyDown={(e) => { + if ( + e.key !== "Enter" || + invalidQty || + parseFloat(qty) === 0 || + qty === "" || + recipient.address === "" + ) + return; + send(); + }} fullWidth + icon={ + + {!!price && ( + + USD/ + + {token.ticker.toUpperCase()} + + + )} + setQty(max.toString())} + > + Max + + + } /> - - )} - - - - setShownTokenSelector(true)}> - - - - - {token.name || token.ticker} - {isAo && ao logo} - - - {browser.i18n.getMessage("setting_currency")} - - - - - - {browser.i18n.getMessage("next")} - - - - - {showTokenSelector && ( - - - updateSelectedToken("AR")} /> - {tokens - .filter((token) => token.type === "asset") - .map((token, i) => ( - updateSelectedToken(token.id)} - key={i} - /> - ))} - {aoTokens - .filter((token) => token.balance > 0) - .map((token, i) => ( - updateSelectedToken(token.id)} - /> - ))} - - - {tokens - .filter((token) => token.type === "collectible") - .map((token, i) => ( - updateSelectedToken(token.id)} - key={i} - /> - ))} - - - )} - {showSlider && ( - + + {!!price && !isAo ? ( + + ≈ + {qtyMode === "fiat" + ? formatTokenBalance(secondaryQty) + : formatFiatBalance(secondaryQty, currency)} + {qtyMode === "fiat" && " " + token.ticker} + + ) : ( + <> + )} + + ~{networkFee} + {" AR "} + {browser.i18n.getMessage("network_fee")} + + + {!uToken && ( + + + + )} + + + + setShownTokenSelector(true)}> + + + + + {token.name || token.ticker} + {isAo && ao logo} + + + + {browser.i18n.getMessage("setting_currency")} + + + + + + - { - setShowSlider(false); - }} + {browser.i18n.getMessage("next")} + + + + + {showTokenSelector && ( + - setShowSlider(false)} - /> - - - )} - - + + updateSelectedToken("AR")} /> + {tokens + .filter((token) => token.type === "asset") + .map((token, i) => ( + updateSelectedToken(token.id)} + key={i} + /> + ))} + {aoTokens + .filter((token) => token.balance > 0) + .map((token, i) => ( + updateSelectedToken(token.id)} + /> + ))} + + + {tokens + .filter((token) => token.type === "collectible") + .map((token, i) => ( + updateSelectedToken(token.id)} + key={i} + /> + ))} + + + )} + {showSlider && ( + + { + setShowSlider(false); + }} + > + setShowSlider(false)} + /> + + + )} + + + ); } @@ -638,7 +642,8 @@ const CurrencyButton = styled(Button)` `; const Wrapper = styled.div<{ showOverlay: boolean }>` - height: calc(100vh - 72px); + height: calc(100vh - 144px); + padding-top: 2px; display: flex; flex-direction: column; justify-content: space-between; From f82b642f1b881d07ca13c5034b61025a217cc632 Mon Sep 17 00:00:00 2001 From: nicholas ma Date: Mon, 26 Feb 2024 16:51:50 -0800 Subject: [PATCH 6/6] chore: version bump for beta and changelog --- .changeset/large-rats-share.md | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/large-rats-share.md diff --git a/.changeset/large-rats-share.md b/.changeset/large-rats-share.md new file mode 100644 index 000000000..e005d883d --- /dev/null +++ b/.changeset/large-rats-share.md @@ -0,0 +1,5 @@ +--- +"arconnect": minor +--- + +feat: adds ao token support diff --git a/package.json b/package.json index 01eba217c..2d78b2914 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "arconnect", "displayName": "ArConnect", - "version": "1.2.1", + "version": "1.2.2", "description": "__MSG_extensionDescription__", "author": "th8ta", "packageManager": "yarn@1.22.18",