Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add aolotto & make explore header fixed #653

Merged
merged 3 commits into from
Feb 11, 2025
Merged

chore: add aolotto & make explore header fixed #653

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b8e6c62
chore: add aolotto to games
pawanpaudel93 Feb 10, 2025
a691ece
fix: make explore header to be fixed at top
pawanpaudel93 Feb 10, 2025
d89e141
fix: add left zero
pawanpaudel93 Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/ecosystem/aolotto.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
140 changes: 96 additions & 44 deletions src/routes/popup/explore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand All @@ -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>
);
}
Expand All @@ -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>
);
}
Expand All @@ -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({
Expand Down Expand Up @@ -317,6 +352,22 @@ const CategoryIcon = styled.div`
color: ${(props) => props.theme.primaryText};
`;

const FixedHeader = styled.div`
display: flex;
gap: 1rem;
flex-direction: column;
position: fixed;
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;
Expand Down Expand Up @@ -368,4 +419,5 @@ const AppList = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 136px;
`;
13 changes: 13 additions & 0 deletions src/utils/apps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -97,7 +98,9 @@ export interface App {
icon: string;
useAppIconWrapper?: boolean;
backgroundColor?: string;
showBorder?: boolean;
objectFit?: "contain" | "cover";
imageSize?: string;
}

export const apps: App[] = [
Expand Down Expand Up @@ -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
{
Expand Down Expand Up @@ -318,6 +330,7 @@ export const apps: App[] = [
category: "NFTs",
url: "https://1of1_aoction-house.arweave.net",
icon: AoctionHouseIcon,
imageSize: "32px",
useAppIconWrapper: true
},

Expand Down