Merge branch 'tomideoladipo-fro-329' of github.com:FuelLabs/fuels-por…

…tal into tomideoladipo-fro-329
FuelLabs · Jul 12, 2023 · ac28620 · ac28620
2 parents 2ee97ec + ec25e5c
commit ac28620
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 113 deletions.
diff --git a/_prose.yml b/_prose.yml
@@ -1,11 +1,7 @@
 prose:
- rooturl: '/packages/app/src/systems/Ecosystem/_projects'
+ rooturl: 'packages/app/src/systems/Ecosystem/_projects'
  metadata:
- /packages/app/src/systems/Ecosystem/_projects:
- - name: 'title'
- field:
- label: 'Project Title'
- element: 'text'
+ packages/app/src/systems/Ecosystem/_projects:
  - name: 'name'
  field:
  label: 'Project Name'
@@ -27,14 +23,7 @@ prose:
  field:
  element: 'text'
  label: 'Project Icon URL'
- - name: 'status'
+ - name: 'isLive'
  field:
- element: 'select'
- label: 'Project Status'
- options:
- - name: 'Live'
- value: 'live'
- - name: 'In Testnet'
- value: 'testnet'
- - name: 'In Development'
- value: 'development'
+ element: 'checkbox'
+ label: 'Is Project Live on Mainnet?'
diff --git a/packages/app/src/systems/Ecosystem/_projects/2023-07-07-Orao-network.md b/packages/app/src/systems/Ecosystem/_projects/2023-07-07-Orao-network.md
@@ -0,0 +1,10 @@
+---
+isLive: true
+published: false
+name: Orao network
+url: 'https://orao.network/'
+tags:
+ - infra
+ - data
+description: Oracle Service for Custom Data Feeds.
+---
diff --git a/packages/app/src/systems/Ecosystem/components/EcosystemTags/EcosystemTags.tsx b/packages/app/src/systems/Ecosystem/components/EcosystemTags/EcosystemTags.tsx
@@ -20,12 +20,12 @@ export const EcosystemTags = ({
 }: EcosystemTagsProps) => {
  if (isLoading) return <EcosystemTagsLoading />;
  return (
- <Box.Flex justify="flex-start" align="center" gap="$3" wrap="wrap">
+ <Box.Flex justify="flex-start" align="center" gap="$2" wrap="wrap">
  <Button
  variant="outlined"
  onPress={onPressAllCategories}
- css={!activeTag ? styles.active : styles.default}
- size="sm"
+ css={{ ...styles.tag, ...(!activeTag && styles.active) }}
+ size="xs"
  >
  All Categories
  </Button>
@@ -35,8 +35,8 @@ export const EcosystemTags = ({
  variant="outlined"
  key={tag}
  onPress={() => onPressTag?.(tag)}
- css={activeTag === tag ? styles.active : styles.default}
- size="sm"
+ css={{ ...styles.tag, ...(activeTag === tag && styles.active) }}
+ size="xs"
  >
  {tag}
  </Button>
@@ -46,17 +46,18 @@ export const EcosystemTags = ({
 };
 
 const styles = {
- default: cssObj({
+ tag: cssObj({
  color: '$intentsBase12',
+ padding: '$4 $3',
  }),
  active: cssObj({
  borderColor: '$intentsPrimary10',
  color: '$intentsBase12',
  }),
  divider: cssObj({
  width: '1px',
- height: '$4',
- backgroundColor: '$intentsBase9',
+ height: '$3',
+ backgroundColor: '$intentsBase6',
  }),
 };
 

diff --git a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.stories.tsx b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.stories.tsx
@@ -13,14 +13,6 @@ const meta: Meta<typeof ProjectItem> = {
  parameters: {
  layout: 'fullscreen',
  },
- argTypes: {
- status: {
- options: ['live', 'testnet', 'in-development'],
- control: {
- type: 'select',
- },
- },
- },
 };
 
 export default meta;

diff --git a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx
@@ -12,7 +12,6 @@ import { motion } from 'framer-motion';
 import type { FC } from 'react';
 
 import type { Project } from '../../types';
-import { STATUS_TEXT } from '../../types';
 
 import { ProjectItemLoader } from './ProjectItemLoader';
 
@@ -32,7 +31,7 @@ export const ProjectItem: ProjectItemComponent = ({
  name,
  description,
  url,
- status,
+ isLive,
 }: ProjectItemProps) => {
  const onCardPress = () => {
  window.open(url, '_blank');
@@ -56,8 +55,8 @@ export const ProjectItem: ProjectItemComponent = ({
  iconSize={20}
  css={styles.projectIcon}
  />
- <Box.Stack gap="$2" justify="space-between" css={styles.details}>
- <Box.Stack align="flex-start" gap="$2">
+ <Box.Stack gap="$1" justify="space-between" css={styles.details}>
+ <Box.Stack align="flex-start" gap="$1">
  <Box.Flex
  align="flex-start"
  justify="space-between"
@@ -66,7 +65,12 @@ export const ProjectItem: ProjectItemComponent = ({
  <Text fontSize="base" color="intentsBase12">
  {name}
  </Text>
- <Icon icon="ArrowUpRight" size={20} stroke={1} />
+ <Icon
+ icon="ArrowUpRight"
+ color="intentsBase8"
+ size={20}
+ stroke={1}
+ />
  </Box.Flex>
  <Text fontSize="sm"> {description}</Text>
  </Box.Stack>
@@ -76,14 +80,16 @@ export const ProjectItem: ProjectItemComponent = ({
  css={styles.link}
  href={url}
  color="intentsBase12"
- size="sm"
+ size="xs"
  >
  {getUrlHostName(url)}
  </ButtonLink>
- <Tag intent="base" size="xs" css={styles.tag} variant="ghost">
- <Box css={{ ...styles.dot, ...styles[`dot-${status}`] }} />
- {STATUS_TEXT[status]}
- </Tag>
+ {isLive ? (
+ <Tag intent="base" size="xs" css={styles.tag} variant="ghost">
+ <Box css={styles.dot} />
+ {'Live on mainnet'}
+ </Tag>
+ ) : null}
  </Box.Flex>
  </Box.Stack>
  </Card.Body>
@@ -105,31 +111,20 @@ const styles = {
  link: cssObj({
  textDecoration: 'underline',
  color: '$intentsBase12',
+ padding: '0',
  }),
  dot: cssObj({
- width: '$2',
- height: '$2',
+ width: '$1',
+ height: '$1',
  borderRadius: '50%',
- }),
- 'dot-live': cssObj({
- background: '$intentsPrimary9',
- border: '1px solid $intentsPrimary11',
- boxShadow: ' 0px 0px 4px #ffffff',
- }),
- 'dot-testnet': cssObj({
- background: '$intentsInfo9',
- border: '1px solid $intentsInfo11',
- boxShadow: ' 0px 0px 4px #ffffff',
- }),
- 'dot-in-development': cssObj({
- background: '$intentsWarning9',
- border: '1px solid $intentsWarning11',
- boxShadow: ' 0px 0px 4px #ffffff',
+ border: '1px solid #A9F6D5',
+ background: '#00F58C',
+ boxShadow: '0px 0px 4px 0px #00F58C',
  }),
  tag: cssObj({
  color: '$intentsBase12',
  borderRadius: '$sm',
- padding: '0 $2',
+ padding: '0 $1',
  backgroundColor: '$gray5',
  }),
  projectIcon: cssObj({
@@ -148,6 +143,7 @@ const styles = {
  alignItems: 'flex-start',
  gap: '$4',
  justifyContent: 'flex-start',
+ padding: '$6',
  }),
 };
 

diff --git a/packages/app/src/systems/Ecosystem/components/ProjectList/ProjectList.tsx b/packages/app/src/systems/Ecosystem/components/ProjectList/ProjectList.tsx
@@ -38,9 +38,11 @@ export const ProjectList = ({
 
 const styles = {
  grid: cssObj({
+ alignItems: 'flex-start',
  /// show only 1 column on mobile
  '@media (max-width: 768px)': {
  gridTemplateColumns: '1fr',
+ alignItems: 'stretch',
  },
  }),
 };

diff --git a/packages/app/src/systems/Ecosystem/data/projects.json b/packages/app/src/systems/Ecosystem/data/projects.json
@@ -1,14 +1 @@
-[
- {
- "title": "Fuelet app",
- "status": "live",
- "published": false,
- "name": "Fuelet app",
- "url": "https://fuelet.app/",
- "tags": ["wallet", "mobile", "infra"],
- "description": "Non-custodial wallet on Fuel.",
- "icon_url": "https://fuelet.app/images/svg/logo.svg",
- "contents": "",
- "id": "20230628FueletApp"
- }
-]
+[]
diff --git a/packages/app/src/systems/Ecosystem/data/sample_projects.json b/packages/app/src/systems/Ecosystem/data/sample_projects.json
@@ -1,44 +1,40 @@
 [
  {
  "name": "Sway Swap",
- "description": "SwaySwap is a blazingly fast DEX built on the fastest modular execution layer: Fuel.",
+ "description": "",
  "tags": ["defi", "swap"],
  "url": "https://fuellabs.github.io/swayswap/",
- "status": "live"
+ "isLive": true
  },
  {
  "name": "Fuelet",
  "description": "Non-custodial wallet on Fuel.",
  "tags": ["wallet", "mobile", "infra"],
- "url": "https://fuelet.app/",
- "status": "live"
+ "url": "https://fuelet.app/"
  },
  {
  "name": "ThunderNFT",
  "description": "The Superior NFT Experience, on Fuel.",
  "tags": ["marketplace", "nft"],
  "url": "https://thundernft.market/",
- "status": "in-development"
+ "isLive": true
  },
  {
  "name": "Orao Network",
  "description": "Oracle Service for Custom Data Feeds.",
  "tags": ["oracle", "infra"],
- "url": "https://orao.network/",
- "status": "live"
+ "url": "https://orao.network/"
  },
  {
  "name": "SwayLend",
  "description": "First ever Lending protocol on Fuel Network.",
  "tags": ["defi", "lending"],
- "url": "https://swaylend.com/",
- "status": "testnet"
+ "url": "https://swaylend.com/"
  },
  {
  "name": "Poolshark",
  "description": "Poolshark is an open-source AMM protocol that makes it easy for users to catch directional moves from the comfort of a liquidity pool.",
  "tags": ["defi", "infra", "amm"],
- "url": "https://docs.poolsharks.io/",
- "status": "in-development"
+ "url": "https://docs.poolsharks.io/"
  }
 ]
diff --git a/packages/app/src/systems/Ecosystem/pages/Ecosystem.tsx b/packages/app/src/systems/Ecosystem/pages/Ecosystem.tsx
@@ -27,27 +27,29 @@ export function Ecosystem() {
  <Layout {...animations.slideInTop()}>
  <Box.Flex css={styles.container} align="center" grow={1}>
  <Box.Stack gap="$10" grow={1}>
- <Box.Flex justify="space-between" align="bottom">
- <Box.Stack gap="$2">
- <Heading as="h2" css={styles.heading}>
+ <Box.Flex
+ justify="space-between"
+ align="flex-end"
+ css={styles.headingWrapper}
+ >
+ <Box.Stack gap="$2" wrap="wrap">
+ <Heading as="h3" css={styles.heading}>
  Explore Fuel Dapps
  </Heading>
- <Text as="small" color="intentsBase12">
- Here&apos;s a list of apps built on Fuel
+ <Text as="small" fontSize="sm" color="intentsBase12">
+ Here&apos;s a list of dapps built on Fuel
  </Text>
  </Box.Stack>
- <Box.Stack>
- <Input>
- <Input.Field
- name="search"
- placeholder="Search"
- type="text"
- onChange={handleSearch}
- value={search || ''}
- />
- <Input.ElementRight element={<Icon icon="Search" />} />
- </Input>
- </Box.Stack>
+ <Input size="sm" css={styles.searchBar}>
+ <Input.Field
+ name="search"
+ placeholder="Search"
+ type="text"
+ onChange={handleSearch}
+ value={search || ''}
+ />
+ <Input.ElementRight element={<Icon icon="Search" />} />
+ </Input>
  </Box.Flex>
  <EcosystemTags
  tags={tags}
@@ -71,15 +73,30 @@ const styles = {
  heading: cssObj({
  margin: 0,
  }),
- wrapper: cssObj({}),
+ subHeading: cssObj({
+ fontSize: '0.875rem',
+ }),
+ headingWrapper: cssObj({
+ '@media (max-width: 768px)': {
+ flexDirection: 'column',
+ gap: '$10',
+ alignItems: 'flex-start',
+ },
+ }),
+ searchBar: cssObj({
+ '@media (max-width: 768px)': {
+ width: '100%',
+ },
+ }),
  container: cssObj({
  marginTop: '$12',
  maxWidth: '$xl',
- padding: '$12',
+ padding: '$24 $40',
  margin: '0 auto',
 
  '@media (max-width: 768px)': {
  maxWidth: '100%',
+ padding: '$12',
  },
  }),
 };
diff --git a/packages/app/src/systems/Ecosystem/types.ts b/packages/app/src/systems/Ecosystem/types.ts
@@ -3,13 +3,5 @@ export type Project = {
  description: string;
  tags: string[];
  url: string;
- status: ProjectStatus;
-};
-
-export type ProjectStatus = 'live' | 'testnet' | 'in-development';
-
-export const STATUS_TEXT: Record<ProjectStatus, string> = {
- live: 'Live on Mainnet',
- testnet: 'Live on Testnet',
- 'in-development': 'In development',
+ isLive?: boolean;
 };