Skip to content

Commit

Permalink
feat: add trade page and improve chart experience
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoseRFelix
JoseRFelix committed Dec 2, 2024
1 parent 06b9653 commit 299f5e7
Show file tree
Hide file tree
Showing 13 changed files with 708 additions and 210 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@
"dotenv-cli": "^7.2.1",
"eslint": "^8.50.0",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-unicorn": "^48.0.1",
"eslint-plugin-unused-imports": "^3.0.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react": "^7.37.2",
"is-ci-cli": "^2.2.0",
"jest": "^29.2.1",
"jest-environment-jsdom": "^29.7.0",
Expand Down
212 changes: 111 additions & 101 deletions packages/mobile/app/(tabs)/assets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Dec } from "@osmosis-labs/unit";
import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
import { FlashList } from "@shopify/flash-list";
import { debounce } from "debounce";
import { useRouter } from "expo-router";
import { Link } from "expo-router";
import { useMemo, useState } from "react";
import {
ActivityIndicator,
Expand Down Expand Up @@ -96,7 +96,7 @@ export default function TabTwoScreen() {
);
const selectedDisplayOption = useMemo(() => {
return displayOptions.find((item) => item.key === displayOption);
}, [items, displayOption]);
}, [displayOption]);

return (
<SafeAreaView
Expand Down Expand Up @@ -155,7 +155,9 @@ export default function TabTwoScreen() {
</View>

{isLoading ? (
<ActivityIndicator />
<View style={{ paddingHorizontal: 24 }}>
<ActivityIndicator />
</View>
) : (
<FlashList
data={items}
Expand All @@ -169,7 +171,11 @@ export default function TabTwoScreen() {
onEndReached={fetchNextPage}
/>
)}
{isFetchingNextPage && <ActivityIndicator />}
{isFetchingNextPage && (
<View style={{ paddingHorizontal: 24 }}>
<ActivityIndicator />
</View>
)}
</View>
</SafeAreaView>
);
Expand All @@ -180,120 +186,123 @@ const AssetItem = ({
}: {
asset: RouterOutputs["local"]["assets"]["getMarketAssets"]["items"][number];
}) => {
const router = useRouter();
const { displayOption } = useDisplayOptionStore();

return (
<TouchableOpacity
onPress={() =>
router.push({
pathname: "/asset/[id]",
params: {
id: asset.coinMinimalDenom.replace(/\//g, "-"),
coinDenom: asset.coinDenom,
coinImageUrl: asset.coinImageUrl,
},
})
}
style={styles.assetItem}
<Link
href={{
pathname: "/asset/[coinMinimalDenom]",
params: {
coinMinimalDenom: asset.coinMinimalDenom,
coinDenom: asset.coinDenom,
coinImageUrl: asset.coinImageUrl,
},
}}
asChild
push
>
<View style={styles.assetLeft}>
{asset.coinImageUrl?.endsWith(".svg") ? (
<SvgUri
uri={asset.coinImageUrl}
width={40}
height={40}
style={styles.assetIcon}
/>
) : (
<Image
source={{ uri: asset.coinImageUrl }}
style={styles.assetIcon}
/>
)}
<View>
<Text style={styles.assetName}>{asset.coinDenom}</Text>
<TouchableOpacity style={styles.assetItem}>
<View style={styles.assetLeft}>
{asset.coinImageUrl?.endsWith(".svg") ? (
<SvgUri
uri={asset.coinImageUrl}
width={40}
height={40}
style={styles.assetIcon}
/>
) : (
<Image
source={{ uri: asset.coinImageUrl }}
style={styles.assetIcon}
/>
)}
<View>
<Text style={styles.assetName}>{asset.coinDenom}</Text>
</View>
</View>
</View>
<View style={styles.assetRight}>
{displayOption.startsWith("price") && (
<>
<Text style={styles.price}>
{asset.currentPrice ? (
<>
{asset.currentPrice.symbol}
<SubscriptDecimal decimal={asset.currentPrice.toDec()} />
</>
) : (
""
)}
</Text>
{displayOption === "price-24h" && (
<Text
style={[
styles.percentage,
{
color: getChangeColor(
asset.priceChange24h?.toDec() || new Dec(0)
),
},
]}
>
{asset.priceChange24h?.toString()}
<View style={styles.assetRight}>
{displayOption.startsWith("price") && (
<>
<Text style={styles.price}>
{asset.currentPrice ? (
<>
{asset.currentPrice.symbol}
<SubscriptDecimal decimal={asset.currentPrice.toDec()} />
</>
) : (
""
)}
</Text>
)}
{displayOption === "price-24h" && (
<Text
style={[
styles.percentage,
{
color: getChangeColor(
asset.priceChange24h?.toDec() || new Dec(0)
),
},
]}
>
{asset.priceChange24h?.toString()}
</Text>
)}

{displayOption === "price-7d" && (
<Text
style={[
styles.percentage,
{
color: getChangeColor(
asset.priceChange24h?.toDec() || new Dec(0)
),
},
]}
>
{asset.priceChange7d?.toString()}
</Text>
)}
{displayOption === "price-7d" && (
<Text
style={[
styles.percentage,
{
color: getChangeColor(
asset.priceChange24h?.toDec() || new Dec(0)
),
},
]}
>
{asset.priceChange7d?.toString()}
</Text>
)}

{displayOption === "price-1h" && (
<Text
style={[
styles.percentage,
{
color: getChangeColor(
asset.priceChange1h?.toDec() || new Dec(0)
),
},
]}
>
{asset.priceChange1h?.toString()}
</Text>
)}
</>
)}
{displayOption === "price-1h" && (
<Text
style={[
styles.percentage,
{
color: getChangeColor(
asset.priceChange1h?.toDec() || new Dec(0)
),
},
]}
>
{asset.priceChange1h?.toString()}
</Text>
)}
</>
)}

{displayOption === "volume" && (
<Text style={styles.price}>{asset.volume24h?.toString() ?? "-"}</Text>
)}
{displayOption === "volume" && (
<Text style={styles.price}>
{asset.volume24h?.toString() ?? "-"}
</Text>
)}

{displayOption === "market-cap" && (
<Text style={styles.price}>{asset.marketCap?.toString() ?? "-"}</Text>
)}
{displayOption === "market-cap" && (
<Text style={styles.price}>
{asset.marketCap?.toString() ?? "-"}
</Text>
)}

{displayOption === "favorite" && <Text>Favorite</Text>}
</View>
</TouchableOpacity>
{displayOption === "favorite" && <Text>Favorite</Text>}
</View>
</TouchableOpacity>
</Link>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#0F172A",
padding: 16,
},
header: {
fontSize: 24,
Expand Down Expand Up @@ -331,6 +340,7 @@ const styles = StyleSheet.create({
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
paddingHorizontal: 24,
},
subheader: {
fontSize: 16,
Expand All @@ -352,6 +362,7 @@ const styles = StyleSheet.create({
justifyContent: "space-between",
alignItems: "center",
paddingVertical: 12,
paddingHorizontal: 24,
},
assetLeft: {
flexDirection: "row",
Expand Down Expand Up @@ -401,7 +412,6 @@ const styles = StyleSheet.create({
contentContainer: {
backgroundColor: Colors.osmoverse[900],
flex: 1,
paddingHorizontal: 24,
paddingTop: 32,
borderTopEndRadius: 32,
borderTopStartRadius: 32,
Expand Down
Loading

0 comments on commit 299f5e7

Please sign in to comment.