fuellabs / fuel-ui Goto Github PK

Motivation

The user needs to have tokens in order to interact with the escrow contract.

Usage example

No response

Possible implementations

No response

We should probably add a logo/styled title to the top nav component

What version of Design System are you using?

I'm not sure?

Steps to Reproduce

Try to import card from @fuels-ui/react

Expected Behavior

No Error

Actual Behavior

Error

Motivation

We need a user interface for the escrow contracts.

Usage example

No response

Possible implementations

No response

Task List

• #27
• #29
• #30
• #35
• #28
• #31
• #32
• #33
• #34

• Will use as base component the same component we have in SwaySwap

<Accordion type="single" defaultValue="item-1" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Hello world</Accordion.Trigger>
    <Accordion.Content>
      Yes. It's unstyled by default, giving you
      <br /> freedom over the look and feel.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Is it unstyled?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It&apos;s unstyled by default, giving you
      <br /> freedom over the look and feel.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

• Reference here

Tasks

• Alert component
• Alert.Title component
• Alert.Description component
• Alert.Actions component
• Alert.Button component
• Tests scenarios

Usage

import { Alert } from '@fuel-js/react';

/**
 * Basic example
 */
export default () => (
  <Alert status='error'>
    <Alert.Title>Your browser is outdated!</AlertTitle>
    <Alert.Description>Your experience may be degraded.</AlertDescription>
    <Alert.Actions>
      <Alert.Button>Dismiss</Alert.Button>
    </Alert.Actions>
  </Alert>
);

Custom props

• status: 'error' | 'success' | 'warning' | 'info'
• `variant: 'subtle' | 'solid' | 'left-accent' | 'top-accent'

References

• Heavilly inspired on Chakra's Alert

Tests Scenarios

• a11y

The user needs to be informed after certain events: copy address, successful or unsuccessful transaction etc

• Card component
• Card.Header component
• Card.Body component
• Card.Footer component

Usage

import { Card, ButtonLink } from '@fuel-js/react';

export default () => (
  <Card>
    <Card.Header>Some Title</Card.Header>
    <Card.Body>Image a long and beautiful text here!</Card.Body>
    <Card.Footer>
      <ButtonLink variant="link">More info</ButtonLink>
    </Card.Footer>
  </Alert>
);

Custom props

• boxShadow: BoxShadowSizes
• direction: 'row' | 'column'

• Just implement Radix Checkbox with styles

• Render an unordered or ordered list, with default chars or icons

Use case

<>
  <List type="ordered">
    <List.Item>Value #1</List.Item>
    <List.Item>Value #2</List.Item>
  </List>
  <List icon="CheckIcon">
    <List.Item>Value #1</List.Item>
    <List.Item>Value #2</List.Item>
  </List>
</>

Properties

• type: 'ordered' | 'unordered'
• icon: Icons

🌑

• Implement Radix Slider component

Right now 10 new wallets are generated every time the user refreshes the page. We only want to generate wallets once when the app first starts.

• Just implement Radix AspectRatio with styles

• Just implement Radix Switch with styles

• This component will add some pre-built transitions using framer-motion

Namespace components

<Transitions.Rotate180 />
<Transitions.Rotate360 />
<Transitions.SlideLeft />
<Transitions.SlideRight />
<Transitions.SlideTop />
<Transitions.SlideDown />
<Transitions.Fade />

Properties

• on: boolaen (trigger transition)

• Form.Control component
• Form.Label component
• Form.ErrorMessage component
• Form.HelperText component
• Test scenarios

Description

• Form.Control: The wrapper that provides context and functionality for all children.
• Form.Label: The label of a form section. The usage is similar to html label.
• Form.HelperText: The message that tells users more details about the form section.
• Form.ErrorMessage: The message that shows up when an error occurs.

Usage

import { Form, Input } from '@fuel-js/react';

/**
 * Basic example
 */
export default () => (
  <Form.Control>
    <Form.Label htmlFor='email'>Email address</Form.Label>
    <Input id='email' type='email' />
    <Form.HelperText>We'll never share your email.</Form.HelperText>
  </Form.Control>
);

/**
 * Using error message
 */
export default () => (
  <Form.Control>
    <Form.Label htmlFor='email'>Email address</Form.Label>
    <Input id='email' type='email' />
    <Form.ErrorMessage>Email is required.</Form.ErrorMessage>
  </Form.Control>
);

References

• Heavily inspired on Chakra's FormControl

Scenarios

• A11y
• Should input have aria-describedby by label first
• Should input have aria-describedby by helper message if present
• Should input have aria-describedby by error message if invalid
• Should input have props derived from form control state
• Should helper text be hidden if invalid
• Should error message be hidden if not invalid

Motivation

Escrow users need to be able to deposit assets into the escrow contract.

Usage example

No response

Possible implementations

No response

Motivation

Basic project setup for the escrow frontend application. Contains a basic wallet prompt if user has not created a wallet and a blank landing page.

Usage example

No response

Possible implementations

No response

Trying to install dependencies under ./packages/react not working.

Is it the node version?

Arguments:
/Users/<User>/.nvm/versions/node/v17.9.0/bin/node /opt/homebrew/Cellar/yarn/1.22.18/libexec/bin/yarn.js

PATH:

/opt/homebrew/sbin:/Users/<User>/.nvm/versions/node/v17.9.0/bin:/Users/<User>/.phpenv/shims:/Users/<User>/.phpenv/bin:/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/<User>/.composer/vendor/bin:/Users/<User>/.fig/bin:/Users/<User>/.local/bin

Yarn version:

1.22.18

Node version:

17.9.0

Platform:

darwin x64

Trace:

Error: https://registry.yarnpkg.com/@fuel%2fcss: Not found
      at Request.params.callback [as _callback] (/opt/homebrew/Cellar/yarn/1.22.18/libexec/lib/cli.js:66138:18)
      at Request.self.callback (/opt/homebrew/Cellar/yarn/1.22.18/libexec/lib/cli.js:140883:22)
      at Request.emit (node:events:527:28)
      at Request.<anonymous> (/opt/homebrew/Cellar/yarn/1.22.18/libexec/lib/cli.js:141855:10)
      at Request.emit (node:events:527:28)
      at IncomingMessage.<anonymous> (/opt/homebrew/Cellar/yarn/1.22.18/libexec/lib/cli.js:141777:12)
      at Object.onceWrapper (node:events:641:28)
      at IncomingMessage.emit (node:events:539:35)
      at endReadableNT (node:internal/streams/readable:1345:12)
      at processTicksAndRejections (node:internal/process/task_queues:83:21)

👉 Not urgent.

I believe it needs to be re-deployed from Fuel's repo, since it was moved from @pedronauck's account to Fuel's organization.

URL: https://fuel-design-system.vercel.app/

Image:

• Just implement Radix Tab with styles

• This component will add a tooltip with the message Press to copy to clipboard and a copy icon on left

Use case

<Copyable>My text</Copyable>

Motivation

To interact with the smart contracts we will need to store them in the contracts directory under escrow.

Usage example

No response

Possible implementations

No response

Tasks

• TextArea component
• Tests Scenarios

Description

The Textarea component allows you to easily create multi-line text inputs.

Usage

import { TextArea } from '@fuel-js/react';

/**
 * Basic example
 */
export default () => (
  <TextArea placeholder='Here is a sample placeholder' />
);

Props

<TextArea />

• value: string
• defaultValue: string
• onChange: (value: string) => void
• isInvalid: boolean
• isRequired: boolean
• isDisabled: boolean
• isLoading: boolean
• isReadOnly: boolean

References

• Heavily inspired on Chakra's TextArea

Tests Scenarios

• Should render a basic <textarea /> component
• Should call onChange on value change
• Should derive values from surrounding Form.Control

Motivation

Users need to be able to withdraw funds from the escrow contract.

Usage example

No response

Possible implementations

No response

Motivation

We need some method for users to be able to specify which wallet is making a contract call to escrow.

Usage example

No response

Possible implementations

No response

• Implement the same component we have in SwaySwap

What to add:

• About the repo
• not important Badges
• Getting Started
• #11
• #12

• This component is a non-native select like

• Implement Radix Toast component

Motivation

The user probably needs to be able to create 2 wallets as two addresses interact with the escrow contract. We may just want to create 2 wallets instead of 1 like we do now. This will also allow us to make sure everything is functioning correctly by checking each wallets token balance etc.

Usage example

No response

Possible implementations

No response

Motivation

The user needs to be able to create escrow contracts.

Usage example

No response

Possible implementations

No response

• Will use as base component the same component we have in SwaySwap

<ButtonGroup>
  <Button>First</Button>
  <Button>Second</Button>
</ButtonGroup>

• Avatar component
• Avatar.Image component
• Avatar.Fallback component
• Tests scenarios

Usage

import { Avatar } from '@fuel-js/react';

export default () => (
  <Avatar.Root>
    <Avatar.Image src="https://path.to/your-image" alt="Michael Jordan" />
    <Avatar.Fallback delayMs={600}>MJ</Avatar.Fallback>
  </Avatar.Root>
);

References

• Heavily inspired and using Radix's Alert

Tests Scenarios

• should render the fallback initially with first with letters of name
• should fallback text has just one letter if name is one word
• should not render the image initially
• should render the image after it has loaded
• should have alt text on the image

I'm not sure whether this repo needs one, but we can close the issue if it doesn't...

Motivation

Users will need to be able to update their approval state in the escrow contract.

Usage example

No response

Possible implementations

No response

Tasks

• Input.Number component

Properties

• value: Maybe<string | number>
• onChange: (value: Maybe<string | number>) => void
• decimals: number
• isReadOnly: boolean
• isDisabled: boolean

Reference here

Use case

<Description>
  <Description.Item>Label:</Description.Item>
  <Description.Value>Value</Description.Value>
</Description>

Properties

• flow: 'row' | 'col'
• itemStyle: CSSStyle
• valueStyle: CSSStyle

The links in example/app to the design system are broken (404). It also may be a good idea to put these links in the root readme as well.

Components

• Input component
• Input.Field component
• Input.AddonLeft component
• Input.AddonRight component
• Input.ElementLeft component
• Input.ElementRight component

Usage

import { Input, Icon } from '@fuel-js/react';

/**
 * Basic example
 */
export default () => (
  <Input>
    <Input.Field type="email" name="email" placeholder="email" />
  </Input>
);

/**
 * Using elements
 */
export default () => (
  <Input>
    <Input.ElementLeft element={<Icon.BiEnvelope />} />
    <Input.Field type="email" name="email" placeholder="email" />
  </Input>
);

/**
 * Using addons
 */
export default () => (
  <Input>
    <Input.AddonLeft>+234</Input.AddonLeft>
    <Input.Field type='tel' placeholder='phone number' />
  </Input>
);

Props

Input

• size: 'sm' | 'md' | 'lg'
• isInvalid: boolean
• isRequired: boolean
• isDisabled: boolean
• isReadOnly: boolean
• isFullWidth: boolean

References

• Heavily inspired on Chakra's Input

Tests Scenarios

• a11y tests
• Should render a basic <input /> element
• Should render elements inside input correctly
• Should render input with addons
• Should render input with elements
• Should disabled input renders correctly
• Should readonly input renders correctly
• Should invalid input renders correctly

• Just implement Radix RadioGroup with styles