diff --git a/assets/ecosystem/aolotto.png b/assets/ecosystem/aolotto.png new file mode 100644 index 000000000..94679c038 Binary files /dev/null and b/assets/ecosystem/aolotto.png differ diff --git a/package.json b/package.json index ac05c545f..44d1b4f29 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "wander", "displayName": "Wander", - "version": "1.18.1", + "version": "1.24.2", "description": "__MSG_extensionDescription__", "author": "th8ta", "packageManager": "yarn@1.22.18", diff --git a/src/api/modules/token_balance/token_balance.background.ts b/src/api/modules/token_balance/token_balance.background.ts index 3cdc0d078..448e24d6c 100644 --- a/src/api/modules/token_balance/token_balance.background.ts +++ b/src/api/modules/token_balance/token_balance.background.ts @@ -1,7 +1,6 @@ import type { BackgroundModuleFunction } from "~api/background/background-modules"; import { ExtensionStorage } from "~utils/storage"; -import { getAoTokenBalance, getNativeTokenBalance } from "~tokens/aoTokens/ao"; -import { AO_NATIVE_TOKEN } from "~utils/ao_import"; +import { getAoTokenBalance } from "~tokens/aoTokens/ao"; import { isAddress } from "~utils/assertions"; const background: BackgroundModuleFunction = async (_, id?: string) => { @@ -9,10 +8,7 @@ const background: BackgroundModuleFunction = async (_, id?: string) => { isAddress(id); const address = await ExtensionStorage.get("active_address"); - const balance = - id === AO_NATIVE_TOKEN - ? await getNativeTokenBalance(address) - : (await getAoTokenBalance(address, id)).toString(); + const balance = (await getAoTokenBalance(address, id)).toString(); return balance; }; diff --git a/src/api/modules/user_tokens/user_tokens.background.ts b/src/api/modules/user_tokens/user_tokens.background.ts index 4c722fad9..5b665aaa1 100644 --- a/src/api/modules/user_tokens/user_tokens.background.ts +++ b/src/api/modules/user_tokens/user_tokens.background.ts @@ -2,11 +2,9 @@ import type { BackgroundModuleFunction } from "~api/background/background-module import { ExtensionStorage } from "~utils/storage"; import { getAoTokenBalance, - getNativeTokenBalance, type TokenInfo, type TokenInfoWithBalance } from "~tokens/aoTokens/ao"; -import { AO_NATIVE_TOKEN } from "~utils/ao_import"; const background: BackgroundModuleFunction< TokenInfoWithBalance[] | TokenInfo[] @@ -25,15 +23,8 @@ const background: BackgroundModuleFunction< let balance: string | null = null; try { - if (token.processId === AO_NATIVE_TOKEN) { - balance = await getNativeTokenBalance(address); - } else { - const balanceResult = await getAoTokenBalance( - address, - token.processId - ); - balance = balanceResult.toString(); - } + const balanceResult = await getAoTokenBalance(address, token.processId); + balance = balanceResult.toString(); } catch (error) { console.error( `Error fetching balance for token ${token.Name} (${token.processId}):`, diff --git a/src/components/popup/Token.tsx b/src/components/popup/Token.tsx index 8ffd62d9b..c676fb58a 100644 --- a/src/components/popup/Token.tsx +++ b/src/components/popup/Token.tsx @@ -447,7 +447,8 @@ const FiatBalance = styled(Text).attrs({ const BalanceSection = styled.div` display: flex; flex-direction: column; - justify-content: right; + align-items: flex-end; + justify-content: center; flex-shrink: 0; p, diff --git a/src/routes/popup/explore.tsx b/src/routes/popup/explore.tsx index b23efaa26..6a495cafd 100644 --- a/src/routes/popup/explore.tsx +++ b/src/routes/popup/explore.tsx @@ -41,33 +41,35 @@ export function ExploreView() { return ( -
- Wander Icon - scroll("left")}> - - - - {categories.map((category) => ( - handleCategoryClick(category.title)} - > - - {category.title} - - ))} - - scroll("right")}> - - -
- + +
+ Wander Icon + scroll("left")}> + + + + {categories.map((category) => ( + handleCategoryClick(category.title)} + > + + {category.title} + + ))} + + scroll("right")}> + + +
+ + {filteredApps.map((app, index) => ( ) : ( )} @@ -127,21 +133,32 @@ const filterApps = ( }); }; -const IconWrapper = styled.div<{ backgroundColor?: string }>` +const IconWrapper = styled.div<{ + backgroundColor?: string; + showBorder?: boolean; +}>` background-color: ${(props) => props.backgroundColor || "white"}; border-radius: 12px; + ${(props) => + props.showBorder && `border: 1px solid ${props.theme.borderDefault};`} overflow: hidden; height: 40px; width: 40px; + display: flex; + justify-content: center; + align-items: center; `; -const IconImage = styled.img<{ objectFit?: "contain" | "cover" }>` - width: 100%; - height: 100%; +const IconImage = styled.img<{ + objectFit?: "contain" | "cover"; + size?: string; +}>` + width: ${(props) => props.size || "100%"}; + height: ${(props) => props.size || "100%"}; object-fit: ${(props) => props.objectFit || "contain"}; `; -const GradientWrapper = styled.div<{ colors?: string[] }>` +const GradientWrapper = styled.div<{ colors?: string[]; showBorder?: boolean }>` border-radius: 12px; overflow: hidden; height: 40px; @@ -150,6 +167,11 @@ const GradientWrapper = styled.div<{ colors?: string[] }>` props.colors ? `linear-gradient(135deg, ${props.colors[0]} 0%, ${props.colors[1]} 100%)` : "linear-gradient(135deg, #8B57FE 0%, #886DFB 100%)"}; + ${(props) => + props.showBorder && `border: 1px solid ${props.theme.borderDefault};`} + display: flex; + justify-content: center; + align-items: center; `; interface AppIconProps { @@ -157,17 +179,26 @@ interface AppIconProps { alt?: string; backgroundColor?: string; objectFit?: "contain" | "cover"; + showBorder?: boolean; + imageSize?: string; } function AppIconWrapper({ source, alt, + showBorder, backgroundColor, - objectFit + objectFit, + imageSize }: AppIconProps) { return ( - - + + ); } @@ -177,17 +208,26 @@ interface AppGradientIconProps { alt?: string; colors?: string[]; objectFit?: "contain" | "cover"; + showBorder?: boolean; + imageSize?: string; } function AppLinearGradientIconWrapper({ source, alt, colors, - objectFit + showBorder, + objectFit, + imageSize }: AppGradientIconProps) { return ( - - + + ); } @@ -211,18 +251,13 @@ const Title = styled.div` align-items: center; `; -const Wrapper = styled(Section)` +const Wrapper = styled(Section).attrs({ showPaddingVertical: false })` display: flex; flex: 1; height: 100%; flex-direction: column; gap: 1rem; padding-bottom: 100px; - background: linear-gradient( - 180deg, - #26126f 0%, - ${({ theme }) => (theme.displayTheme === "dark" ? "#111" : "#FFF")} 150px - ); `; const AppTitle = styled(Text).attrs({ @@ -317,6 +352,23 @@ const CategoryIcon = styled.div` color: ${(props) => props.theme.primaryText}; `; +const FixedHeader = styled.div` + display: flex; + gap: 1rem; + flex-direction: column; + position: fixed; + left: 0; + width: 100vw; + padding: 24px 24px 16px 24px; + box-sizing: border-box; + background: linear-gradient( + 180deg, + #26126f 0%, + ${({ theme }) => (theme.displayTheme === "dark" ? "#111" : "#FFF")} 150px + ); + z-index: 100; +`; + const Header = styled.div` display: flex; align-items: center; @@ -368,4 +420,5 @@ const AppList = styled.div` display: flex; flex-direction: column; gap: 8px; + padding-top: 136px; `; diff --git a/src/tokens/aoTokens/ao.ts b/src/tokens/aoTokens/ao.ts index c77473fdd..19f7e58c6 100644 --- a/src/tokens/aoTokens/ao.ts +++ b/src/tokens/aoTokens/ao.ts @@ -46,7 +46,8 @@ export const defaultTokens: TokenInfo[] = [ Ticker: "AO", Denomination: 12, Logo: "UkS-mdoiG8hcAClhKK8ch4ZhEzla0mCPDOix9hpdSFE", - processId: "m3PaWzK4PTG9lAaqYQPaPdOcXdO8hYqi5Fe9NWqXd0w" + // processId: "m3PaWzK4PTG9lAaqYQPaPdOcXdO8hYqi5Fe9NWqXd0w" + processId: "0syT13r0s0tgPmIed95bJnuSqaD29HQNN8D3ElLSrsc" }, { Name: "Q Arweave", @@ -497,9 +498,7 @@ export async function fetchTokenBalance( refresh?: boolean ): Promise { try { - if (token.processId === AO_NATIVE_TOKEN) { - return (await getNativeTokenBalance(address)).toString(); - } else if (token.processId === "AR") { + if (token.processId === "AR") { return await getArTokenBalance(address); } else { if (refresh) token = await getTokenInfo(token.processId); diff --git a/src/utils/ao_import.ts b/src/utils/ao_import.ts index 9b6be5386..b0c148ae9 100644 --- a/src/utils/ao_import.ts +++ b/src/utils/ao_import.ts @@ -1,12 +1,15 @@ import { getAoTokens } from "~tokens"; import { ExtensionStorage } from "./storage"; -export const AO_NATIVE_TOKEN = "m3PaWzK4PTG9lAaqYQPaPdOcXdO8hYqi5Fe9NWqXd0w"; +// export const AO_NATIVE_TOKEN = "m3PaWzK4PTG9lAaqYQPaPdOcXdO8hYqi5Fe9NWqXd0w"; +export const AO_NATIVE_TOKEN = "0syT13r0s0tgPmIed95bJnuSqaD29HQNN8D3ElLSrsc"; export const EXP_TOKEN = "aYrCboXVSl1AXL9gPFe3tfRxRf0ZmkOXH65mKT0HHZw"; export const AO_NATIVE_TOKEN_BALANCE_MIRROR = "Pi-WmAQp2-mh-oWH9lWpz5EthlUDj_W0IusAv-RXhRk"; +// export const AO_NATIVE_OLD_TOKEN = +// "BJj8sNao3XPqsoJnea4DnJyPzHnKhkhcY1HtWBxHcLs"; export const AO_NATIVE_OLD_TOKEN = - "BJj8sNao3XPqsoJnea4DnJyPzHnKhkhcY1HtWBxHcLs"; + "m3PaWzK4PTG9lAaqYQPaPdOcXdO8hYqi5Fe9NWqXd0w"; export const AO_NATIVE_TOKEN_INFO = { Name: "AO", diff --git a/src/utils/apps.ts b/src/utils/apps.ts index 354293d55..c3e259304 100644 --- a/src/utils/apps.ts +++ b/src/utils/apps.ts @@ -77,6 +77,7 @@ import AoctionHouseIcon from "url:/assets/ecosystem/aoctionhouse.png"; import CtrlPlayIcon from "url:/assets/ecosystem/ctrlplay.png"; import DecentraMindIcon from "url:/assets/ecosystem/decentramind.png"; import PetOrRektIcon from "url:/assets/ecosystem/pet-or-rekt.png"; +import AolottoIcon from "url:/assets/ecosystem/aolotto.png"; export interface App { name: string; @@ -97,7 +98,9 @@ export interface App { icon: string; useAppIconWrapper?: boolean; backgroundColor?: string; + showBorder?: boolean; objectFit?: "contain" | "cover"; + imageSize?: string; } export const apps: App[] = [ @@ -291,6 +294,15 @@ export const apps: App[] = [ useAppIconWrapper: true, backgroundColor: "#000000" }, + { + name: "Aolotto", + category: "Games", + url: "https://aolotto.com", + icon: AolottoIcon, + showBorder: true, + imageSize: "32px", + backgroundColor: "#FFF" + }, // DeAI { @@ -318,6 +330,7 @@ export const apps: App[] = [ category: "NFTs", url: "https://1of1_aoction-house.arweave.net", icon: AoctionHouseIcon, + imageSize: "32px", useAppIconWrapper: true },