UI improvements (#24)

* implemented UI improvements

* Use soroban-cli token wrap subcommand

* have to update xdr Identifier

* Fix bug in account address parsing

* [WIP] trying to get simulate token.approve working

* nonce is a bigint

* Getting approve/deposit flow working

* HACK: use hardcoded key for now until freighter is ready

* minor fix to txn footprint parsing

* remove console.debug

* Created components

* Filling data

* Adjusted transaction behavior

* Update components/molecules/form-pledge/index.tsx

Co-authored-by: Paul Bellamy <[email protected]>

* Update components/organisms/pledge/index.tsx

Co-authored-by: Paul Bellamy <[email protected]>

* Code tweaks and transaction submission fix

* Added target amount

Co-authored-by: Paul Bellamy <[email protected]>
Co-authored-by: Paul Bellamy <[email protected]>

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "importOrder": ["react", "<THIRD_PARTY_MODULES>", "components/*", "app/*|config/*|interfaces/*|stories/*", "^[./]"],
+  "importOrderSeparation": true
+}

assets/icons/index.tsx

@@ -0,0 +1,21 @@
+import FacebookSvg from './facebook.svg'
+import CongratulationsSvg from './congratulations.svg'
+import TwitterSvg from './twitter.svg'
+import LinkedinSvg from './linkedin.svg'
+import LinkSvg from './link.svg'
+import OpenSvg from './open.svg'
+import DropdownSvg from './dropdown.svg'
+import ErrorSvg from './error.svg'
+import LoadingSvg from './loading.svg'
+
+export {
+  FacebookSvg,
+  CongratulationsSvg,
+  TwitterSvg,
+  LinkedinSvg,
+  LinkSvg,
+  OpenSvg,
+  DropdownSvg,
+  ErrorSvg,
+  LoadingSvg,
+}

components/atoms/amount-input/index.tsx

@@ -0,0 +1,31 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import styles from './style.module.css'
+
+export interface InputProps {
+  placeHolder: string
+  setAmount: Dispatch<SetStateAction<number | undefined>>
+  input: string
+  setInput: Dispatch<SetStateAction<string>>
+}
+
+export function AmountInput({ placeHolder, setAmount, input, setInput }: InputProps) {
+  const handleChange = (event: {
+    target: { name: string; value: string }
+  }): void => {
+    setAmount(parseInt(event.target.value))
+    setInput(event.target.value)
+  }
+
+  return (
+    <input
+      name="amount"
+      type="number"
+      placeholder={placeHolder}
+      className={styles.input}
+      onChange={handleChange}
+      value={input}
+      min={0}
+      autoComplete="off"
+    />
+  )
+}

components/atoms/amount-input/style.module.css

@@ -0,0 +1,8 @@
+.input {
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid #e5e4e7;
+  border-radius: 8px;
+  height: 50px;
+  padding: 16px;
+}

components/atoms/author-info/index.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react'
+import styles from './style.module.css'
+import Image, { StaticImageData } from 'next/image'
+
+export interface AuthorInfoProps {
+  image: StaticImageData
+  author: string
+  dateTime: string
+}
+
+export function AuthorInfo({ image, author, dateTime }: AuthorInfoProps) {
+  return (
+    <div className={styles.content}>
+      <Image src={image} width={36} height={36} alt="avatar" />
+      <div className={styles.author}>
+        <span>{dateTime}</span>
+        <br />
+        <span>
+          by <b>{author}</b>
+        </span>
+      </div>
+    </div>
+  )
+}

components/atoms/author-info/style.module.css

@@ -0,0 +1,12 @@
+.content {
+  display: flex;
+  margin-bottom: 1rem;
+  font-weight: 500;
+  font-size: 12px;
+  opacity: 0.6;
+  align-items: center;
+}
+
+.author {
+  margin-left: 1rem;
+}

components/atoms/button/index.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react'
+import { Loading } from '../loading'
+import styles from './style.module.css'
+
+export interface ButtonProps {
+  title: string
+  onClick: () => void
+  disabled: boolean
+  isLoading: boolean
+}
+
+export function Button({ title, onClick, disabled, isLoading }: ButtonProps) {
+  return (
+    <button className={styles.button} onClick={onClick} disabled={disabled}>
+      {isLoading ? <Loading size={18} /> : title}
+    </button>
+  )
+}

components/atoms/button/style.module.css

@@ -0,0 +1,21 @@
+.button {
+  width: 100%;
+  display: flex;
+  padding: 16px 12px;
+  height: 50px;
+  background: #3e63dd;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 16px;
+  color: #ffffff;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 1rem;
+}
+
+.button:disabled {
+  background: #889cde;
+  cursor: not-allowed;
+}

components/atoms/card/index.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react'
+import styles from './style.module.css'
+
+export interface CardProps {
+  children: ReactNode
+}
+
+export function Card({ children }: CardProps) {
+  return <div className={styles.card}>{children}</div>
+}

components/atoms/card/style.module.css

@@ -0,0 +1,11 @@
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  border-radius: 12px;
+  background-color: #ffffff;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  min-width: 400px;
+}

components/atoms/checkbox/index.tsx

@@ -0,0 +1,37 @@
+import React, { Dispatch, ReactNode, SetStateAction } from 'react'
+import styles from './style.module.css'
+
+export interface CheckboxProps {
+  title: string
+  value: number
+  isChecked: boolean
+  setAmount: Dispatch<SetStateAction<number | undefined>>
+  clearInput: () => void
+}
+
+export function Checkbox({
+  title,
+  value,
+  isChecked,
+  setAmount,
+  clearInput,
+}: CheckboxProps) {
+  const handleCheckBox = (event: {
+    target: { checked: any; value: string }
+  }) => {
+    clearInput()
+    setAmount(parseInt(event.target.value))
+  }
+
+  return (
+    <label className={styles.label}>
+      <input
+        type="checkbox"
+        value={value}
+        checked={isChecked}
+        onChange={handleCheckBox}
+      />
+      <span>{title}</span>
+    </label>
+  )
+}

components/atoms/checkbox/style.module.css

@@ -0,0 +1,26 @@
+.label {
+  position: relative;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.label [type='checkbox'] {
+  display: none;
+}
+
+.label [type='checkbox'] + span {
+  width: 100%;
+  display: inline-block;
+  padding: 1em;
+  border: 1px solid #e5e4e7;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.label :checked + span {
+  display: inline-block;
+  border: 1px solid #3e63dd;
+  color: #3e63dd;
+  border-radius: 8px;
+}

components/atoms/connect-button/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { AppContext } from '../../../wallet'
+import styles from './style.module.css'
+
+export interface ConnectButtonProps {
+  label: string
+  isHigher?: boolean
+}
+
+export function ConnectButton({ label, isHigher }: ConnectButtonProps) {
+  const { connect } = React.useContext(AppContext)
+  const openConnectModal = async () => {
+    await connect()
+  }
+
+  return (
+    <button
+      className={styles.button}
+      style={{ height: isHigher ? 50 : 38 }}
+      onClick={openConnectModal}
+    >
+      {label}
+    </button>
+  )
+}

components/atoms/connect-button/style.module.css

@@ -0,0 +1,21 @@
+.button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 12px;
+  gap: 8px;
+  background: #1a1523;
+  border-radius: 8px;
+  border: 0;
+  height: 38px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 22px;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.higher {
+    height: 58px;
+}

components/atoms/index.tsx

@@ -0,0 +1,8 @@
+export * from './card'
+export * from './button'
+export * from './amount-input'
+export * from './progress-bar'
+export * from './checkbox'
+export * from './author-info'
+export * from './connect-button'
+export * from './loading'

components/atoms/loading/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Image from 'next/image'
+import { LoadingSvg } from '../../../assets/icons'
+
+export interface SpacerProps {
+  size: number
+}
+
+export function Loading({ size }: SpacerProps) {
+  return (
+    <Image
+      src={LoadingSvg}
+      width={size}
+      height={size}
+      alt="loading..."
+    />
+  )
+}