Wander 1.24.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wander",
   "displayName": "Wander",
-  "version": "1.18.1",
+  "version": "1.24.2",
   "description": "__MSG_extensionDescription__",
   "author": "th8ta",
   "packageManager": "[email protected]",

src/api/modules/token_balance/token_balance.background.ts

@@ -1,18 +1,14 @@
 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<string> = async (_, id?: string) => {
   // validate input
   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;
 };

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}):`,

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,

src/routes/popup/explore.tsx

@@ -41,33 +41,35 @@ export function ExploreView() {
 
   return (
     <Wrapper>
-      <Header>
-        <img src={WanderIcon} alt="Wander Icon" width={38.407} height={18} />
-        <ScrollButton direction="left" onClick={() => scroll("left")}>
-          <ArrowLeft height={20} width={20} />
-        </ScrollButton>
-        <Categories ref={categoriesRef}>
-          {categories.map((category) => (
-            <Category
-              key={category.title}
-              onClick={() => handleCategoryClick(category.title)}
-            >
-              <CategoryIcon as={category.icon} />
-              {category.title}
-            </Category>
-          ))}
-        </Categories>
-        <ScrollButton direction="right" onClick={() => scroll("right")}>
-          <ArrowRight height={20} width={20} />
-        </ScrollButton>
-      </Header>
-      <Input
-        {...searchInput.bindings}
-        sizeVariant="small"
-        variant="search"
-        fullWidth
-        placeholder="Search for an app"
-      />
+      <FixedHeader>
+        <Header>
+          <img src={WanderIcon} alt="Wander Icon" width={38.407} height={18} />
+          <ScrollButton direction="left" onClick={() => scroll("left")}>
+            <ArrowLeft height={20} width={20} />
+          </ScrollButton>
+          <Categories ref={categoriesRef}>
+            {categories.map((category) => (
+              <Category
+                key={category.title}
+                onClick={() => handleCategoryClick(category.title)}
+              >
+                <CategoryIcon as={category.icon} />
+                {category.title}
+              </Category>
+            ))}
+          </Categories>
+          <ScrollButton direction="right" onClick={() => scroll("right")}>
+            <ArrowRight height={20} width={20} />
+          </ScrollButton>
+        </Header>
+        <Input
+          {...searchInput.bindings}
+          sizeVariant="small"
+          variant="search"
+          fullWidth
+          placeholder="Search for an app"
+        />
+      </FixedHeader>
       <AppList>
         {filteredApps.map((app, index) => (
           <AppWrapper
@@ -82,13 +84,17 @@ export function ExploreView() {
                   source={app.icon}
                   alt={app.name}
                   objectFit={app.objectFit}
+                  showBorder={app.showBorder}
+                  imageSize={app.imageSize}
                 />
               ) : (
                 <AppIconWrapper
                   source={app.icon}
                   alt={app.name}
                   backgroundColor={app.backgroundColor}
                   objectFit={app.objectFit}
+                  showBorder={app.showBorder}
+                  imageSize={app.imageSize}
                 />
               )}
               <Description>
@@ -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,24 +167,38 @@ 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 {
   source: string;
   alt?: string;
   backgroundColor?: string;
   objectFit?: "contain" | "cover";
+  showBorder?: boolean;
+  imageSize?: string;
 }
 
 function AppIconWrapper({
   source,
   alt,
+  showBorder,
   backgroundColor,
-  objectFit
+  objectFit,
+  imageSize
 }: AppIconProps) {
   return (
-    <IconWrapper backgroundColor={backgroundColor}>
-      <IconImage src={source} alt={alt || ""} objectFit={objectFit} />
+    <IconWrapper backgroundColor={backgroundColor} showBorder={showBorder}>
+      <IconImage
+        src={source}
+        alt={alt || ""}
+        objectFit={objectFit}
+        size={imageSize}
+      />
     </IconWrapper>
   );
 }
@@ -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 (
-    <GradientWrapper colors={colors}>
-      <IconImage objectFit={objectFit} src={source} alt={alt || ""} />
+    <GradientWrapper colors={colors} showBorder={showBorder}>
+      <IconImage
+        objectFit={objectFit}
+        src={source}
+        alt={alt || ""}
+        size={imageSize}
+      />
     </GradientWrapper>
   );
 }
@@ -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;
 `;

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<string> {
   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);

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",

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
   },