Teia UI update

src/atoms/button/DonateButton.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import { NetworkType } from '@airgap/beacon-dapp'
+import { TezosToolkit } from '@taquito/taquito'
+import { BeaconWallet } from '@taquito/beacon-wallet'
+import styles from './index.module.scss' // Import the SCSS module
+
+// Initialize the Tezos toolkit and Beacon wallet
+const tezos = new TezosToolkit('https://mainnet.api.tez.ie')
+
+let wallet
+
+if (typeof window !== 'undefined') {
+  // This block will only run in the browser
+  wallet = new BeaconWallet({ name: 'Tezos Donation' })
+  tezos.setWalletProvider(wallet)
+}
+
+const donate = async (amount, destinationAddress) => {
+  try {
+    // Request permissions with the correct network type
+    await wallet.requestPermissions({
+      network: { type: NetworkType.MAINNET },
+    })
+
+    // Create a transfer operation
+    const operation = await tezos.wallet
+      .transfer({
+        to: destinationAddress, // Use the passed destination address
+        amount: amount, // Amount in XTZ
+      })
+      .send()
+
+    console.log(`Waiting for ${operation.opHash} to be confirmed...`)
+
+    // Wait for confirmation
+    await operation.confirmation(1)
+
+    console.log(`Donation successful with ${operation.opHash}`)
+  } catch (error) {
+    console.error('Donation failed:', error)
+  }
+}
+
+// Donation input component with user-defined amount
+const DonateInput = ({ destinationAddress }) => {
+  const [amount, setAmount] = useState('')
+
+  const handleAmountChange = (event) => {
+    setAmount(event.target.value)
+  }
+
+  const handleDonateClick = () => {
+    const amountAsNumber = parseFloat(amount)
+    if (isNaN(amountAsNumber) || amountAsNumber <= 0) {
+      alert('Please enter a valid donation amount')
+      return
+    }
+    donate(amountAsNumber, destinationAddress)
+  }
+
+  return (
+    <div className={styles.daoDonateButton}>
+      <h4>Donate to DAO Treasury</h4>
+      <p>Address: {destinationAddress}</p>
+      <input
+        type="number"
+        value={amount}
+        onChange={handleAmountChange}
+        placeholder="Enter Number in XTZ"
+        inputMode="decimal" // This makes the on-screen keyboard show numbers on mobile
+        pattern="[0-9]*" // This allows only numbers to be entered
+        min="0"
+        className={styles.donateInput}
+      />
+      <br />
+      <input
+        type="button"
+        value={`Donate ${amount} XTZ`}
+        onClick={handleDonateClick}
+        className={styles.donateButton}
+      />
+    </div>
+  )
+}
+
+export default DonateInput

src/atoms/button/index.module.scss

@@ -166,3 +166,107 @@ $border: 2px;
     text-decoration: none;
   }
 }
+
+/* Styles for the DonateInput component */
+.daoDonateButton {
+  font-family: var(--text-font);
+  max-width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid var(--gray-20);
+  border-radius: 0.1em;
+  background-color: var(--gray-4);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: var(--body-transition);
+
+  h4 {
+    margin: 0 0 10px;
+    font-size: 18px;
+    color: var(--text-color);
+  }
+
+  p {
+    margin: 0 0 15px;
+    font-size: 14px;
+    color: var(--gray-60);
+  }
+
+  .donateInput {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid var(--gray-20);
+    border-radius: 0.1em;
+    font-size: 16px;
+    box-sizing: border-box;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    transition: var(--body-transition);
+
+    &:focus {
+      border-color: var(--primary-color);
+      outline: none;
+      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+    }
+  }
+
+  .donateButton {
+    width: 100%;
+    padding: 10px;
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: darken(grey, 10%);
+    }
+
+    &:active {
+      background-color: darken(black, 20%);
+    }
+  }
+}
+
+// Responsive adjustments
+@include respond-to('tablet') {
+  .daoDonateButton {
+    max-width: 100%;
+    padding: 15px;
+
+    h4 {
+      font-size: 16px;
+    }
+
+    p {
+      font-size: 12px;
+    }
+
+    .donateInput,
+    .donateButton {
+      font-size: 14px;
+    }
+  }
+}
+
+@include respond-to('mobile') {
+  .daoDonateButton {
+    padding: 10px;
+
+    h4 {
+      font-size: 14px;
+    }
+
+    p {
+      font-size: 12px;
+    }
+
+    .donateInput,
+    .donateButton {
+      font-size: 12px;
+    }
+  }
+}

src/components/footer/index.module.scss

@@ -91,6 +91,7 @@
 
 .copyright {
   grid-area: Copyright;
+  text-align: left;
 }
 
 .state_buttons {

src/components/form/FormFields.jsx

@@ -42,7 +42,14 @@ export const FormFields = ({ value, field, error, register, control }) => {
   const [showVisualizer, setShowVisualizer] = useState(false)
   const [audioBlob, setAudioBlob] = useState(null)
   const visualizerRef = useRef(null)
-
+  const AUDIO_MIME_TYPES = [
+    'audio/mpeg',
+    'audio/wav',
+    'audio/flac',
+    'audio/x-flac',
+    'audio/ogg',
+  ]
+=======
   const getArtistText = (userInfo, address) => {
     if (userInfo?.name) {
       return `${userInfo.name} (${address})`

src/components/header/feed_toolbar/FeedToolbar.jsx

@@ -8,10 +8,10 @@ import { SingleViewIcon, MasonryIcon, ChevronIcon } from '@icons'
 import { Button } from '@atoms/button'
 
 import { useLocalSettings } from '@context/localSettingsStore'
-import { useLocation, useNavigate } from 'react-router'
+import { useLocation, useNavigate, useParams } from 'react-router'
 import { Line } from '@atoms/line'
 import { shallow } from 'zustand/shallow'
-import { DEFAULT_START_FEED } from '@constants'
+import { useUserStore } from '@context/userStore'
 
 // const MediaFilter = ({ label, tagline }) => {
 //   return (
@@ -26,9 +26,9 @@ const locationMap = new Map([
   ['/feed/sales', 'Recent Sales'],
   ['/feed/random', 'Random'],
   ['/feed/newobjkts', 'New OBJKTs'],
-  ['/feed/friends', 'Friends'],
+  ['/feed/friends*', 'Friends'],
   // separator
-  ['---fund_feeds', 'fund_feeds'],
+  ['---fund_feeds', 'Event Feeds'],
   ['/feed/art4artists', 'Art4Artists'],
   ['/feed/tez4pal', '🇵🇸 Tez4Pal'],
   ['/feed/morocco-quake-aid', '🇲🇦 Quake Aid'],
@@ -38,7 +38,7 @@ const locationMap = new Map([
   ['/feed/iran', '🇮🇷 Iran'],
   ['/feed/tezospride', '🏳️‍🌈 Tezospride'],
   // separator
-  ['---mime_feeds', 'mime_feeds'],
+  ['---mime_feeds', 'By Format'],
   ['/feed/image', 'Image'],
   ['/feed/video', 'Video'],
   ['/feed/audio', 'Audio'],
@@ -62,9 +62,12 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
   )
   const location = useLocation()
   const feedLabel =
-    locationMap.get(location.pathname) || startFeed || DEFAULT_START_FEED
+    [...locationMap.entries()].find(([key]) =>
+      location.pathname.startsWith(key.replace('*', ''))
+    )?.[1] || 'Sort Feed' // Default to "Sort" if no match is found
 
   const navigate = useNavigate()
+  const walletAddress = useUserStore((st) => [st.address], shallow)
 
   // TODO: finish the filtering logic
   // const filters = false
@@ -83,7 +86,14 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
               <div className={styles.feeds_button}>
                 {[...locationMap.keys()].map((k) => {
                   if (k.startsWith('-')) {
-                    return <Line className={styles.separator} key={k} />
+                    return (
+                      <>
+                        <Line className={styles.separator} key={k} />
+                        <span className={styles.subtitle}>
+                          {locationMap.get(k)}
+                        </span>
+                      </>
+                    )
                   }
                   if (locationNeedSync.includes(k)) {
                     return (
@@ -98,7 +108,14 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
                     )
                   }
                   return (
-                    <Button key={k} to={k}>
+                    <Button
+                      key={k.replace('*', '')}
+                      to={
+                        k.startsWith('/feed/friends*')
+                          ? `/feed/friends/${walletAddress}`
+                          : k.replace('*', '')
+                      }
+                    >
                       {locationMap.get(k)}
                     </Button>
                   )

src/components/header/feed_toolbar/index.module.scss

@@ -107,6 +107,10 @@
   padding-bottom: 1em;
 }
 
+.subtitle {
+  font-weight: bold;
+}
+
 .filters_container {
   display: flex;
   flex-direction: row;

src/components/header/main_menu/MainMenu.jsx

@@ -34,7 +34,31 @@ export const MainMenu = () => {
           {/* <MenuItem route="search" /> */}
           <MenuItem className={styles.menu_label} route="search" />
           <MenuItem className={styles.menu_label} route="about" />
-          <MenuItem className={styles.menu_label} label="F.A.Q" route="faq" />
+          <MenuItem
+            className={styles.menu_label}
+            label="Getting Started"
+            route="faq"
+          />
+          <MenuItem
+            className={styles.menu_label}
+            label="Core Values"
+            route="corevalues"
+          />
+          <MenuItem
+            className={styles.menu_label}
+            label="Code of Conduct"
+            route="codeofconduct"
+          />
+          <MenuItem
+            className={styles.menu_label}
+            label="Terms and Conditions"
+            route="terms"
+          />
+          <MenuItem
+            className={styles.menu_label}
+            label="Privacy Policy"
+            route="privacypolicy"
+          />
         </div>
         <Line className={styles.line} vertical />
         <div className={styles.menu_right}>
@@ -66,7 +90,7 @@ export const MainMenu = () => {
 
           <MenuItem
             className={styles.menu_label}
-            label="DAO governance"
+            label="DAO Governance"
             route="dao"
           />
 

src/components/header/main_menu/index.module.scss

@@ -24,7 +24,7 @@
   height: 100vh;
 
   .content {
-    line-height: 3em;
+    line-height: 2.75em;
     display: flex;
     justify-content: center;
     flex-direction: row;

src/constants.ts

@@ -166,6 +166,7 @@ export const MOROCCO_QUAKE_FUNDING_CONTRACT =
 
 export const POLLS_CONTRACT = 'KT1SUExZfkmxf2fafrVgYjZGEKDete2siWoU'
 export const DAO_GOVERNANCE_CONTRACT = 'KT1GHX73W5BcjbYRSZSrUJcnZE3Uw92VYF66'
+export const DAO_TREASURY_CONTRACT = 'KT1RRLSxpsiKpnVZQsBGCqG9HFBXbPBtUYBD'
 export const DAO_TOKEN_CONTRACT = 'KT1QrtA753MSv8VGxkDrKKyJniG5JtuHHbtV'
 export const DAO_TOKEN_CLAIM_CONTRACT = 'KT1NrfV4e2qWqFrnrKyPTJth5wq2KP9VyBei'
 export const DISTRIBUTION_MAPPING_IPFS_PATH =

src/index.jsx

@@ -75,6 +75,9 @@ import { Preview } from '@components/preview/index'
 import MintForm from '@components/form/MintForm'
 import { ListsFeed } from '@pages/home/feeds/lists-feed'
 import { MidiFeed } from '@pages/home/feeds/mime-type-feed'
+import { CodeOfConduct } from '@pages/codeofconduct'
+import { CoreValues } from '@pages/corevalues'
+import { PrivacyPolicy } from '@pages/privacypolicy'
 
 const display_routes = (
   <>
@@ -132,7 +135,9 @@ const router = createBrowserRouter(
       <Route exact path="about" element={<About />} />
       <Route exact path="terms" element={<Terms />} />
       <Route exact path="faq" element={<FAQ />} />
-
+      <Route exact path="codeofconduct" element={<CodeOfConduct />} />
+      <Route exact path="corevalues" element={<CoreValues />} />
+      <Route exact path="privacypolicy" element={<PrivacyPolicy />} />
       <Route path="sync" element={<Sync />} />
       <Route exact path="mint/*" element={<Mint />}>
         <Route index element={<MintForm />} />