h origin main

diff --git a/src/App.js b/src/App.js
index 331e061..07da390 100644
--- a/src/App.js
+++ b/src/App.js
@@ -37,6 +37,16 @@ import {
   MenuItem,
   Select,
   Switch,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Stepper,
+  Step,
+  StepLabel,
+  Radio,
+  RadioGroup,
+  Stack,
 } from '@mui/material';
 import { 
   AccountBalanceWallet, 
@@ -50,6 +60,9 @@ import {
   ShowChart,
   Gavel,
   Upload,
+  HowToVote,
+  LocalAtm,
+  Description,
 } from '@mui/icons-material';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -141,6 +154,24 @@ const ERC20_ABI = [
   }
 ];
 
+// Add this near the top of your WalletConnectComponent
+const DUMMY_TOKENS = [
+  {
+    address: "0x1234567890123456789012345678901234567890",
+    name: "Burger Chain DAO",
+    ticker: "BURGER"
+  },
+  {
+    address: "0x2345678901234567890123456789012345678901",
+    name: "Pizza Franchise DAO",
+    ticker: "PIZZA"
+  },
+  {
+    address: "0x3456789012345678901234567890123456789012",
+    name: "Coffee Shop DAO",
+    ticker: "COFFEE"
+  }
+];
 
 function WalletConnectComponent() {
   const { activate, active, account, library, deactivate, setError } = useWeb3React();
@@ -159,10 +190,40 @@ function WalletConnectComponent() {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const [tradeMode, setTradeMode] = useState('buy');
-  // Load token addresses from local storage on component mount
+
+  // Update the useEffect for loading token addresses
   useEffect(() => {
-    const storedAddresses = JSON.parse(localStorage.getItem("tokenAddresses")) || [];
-    setTokenAddresses(storedAddresses);
+    const loadTokens = async () => {
+      try {
+        // Try to get tokens from localStorage first
+        const storedAddresses = JSON.parse(localStorage.getItem("tokenAddresses"));
+        
+        if (!storedAddresses || storedAddresses.length === 0) {
+          // If localStorage is empty, try to fetch from Cloudflare
+          try {
+            const response = await fetch('https://your-cloudflare-worker.workers.dev/tokens');
+            const cloudflareTokens = await response.json();
+            setTokenAddresses(cloudflareTokens);
+            // Optionally save to localStorage
+            localStorage.setItem("tokenAddresses", JSON.stringify(cloudflareTokens));
+          } catch (cloudflareError) {
+            console.log("Cloudflare fetch failed, using dummy data:", cloudflareError);
+            // If Cloudflare fetch fails, use dummy data
+            setTokenAddresses(DUMMY_TOKENS);
+            // Optionally save to localStorage
+            localStorage.setItem("tokenAddresses", JSON.stringify(DUMMY_TOKENS));
+          }
+        } else {
+          setTokenAddresses(storedAddresses);
+        }
+      } catch (error) {
+        console.error("Error loading tokens:", error);
+        // If all else fails, use dummy data
+        setTokenAddresses(DUMMY_TOKENS);
+      }
+    };
+
+    loadTokens();
   }, []);
 
   // Auto-connect to MetaMask if authorized
@@ -530,6 +591,132 @@ const tokenAddressChange = (v) => {
     investmentRequired: "",
   });
 
+  // Add these new state variables in WalletConnectComponent
+  const [stakedAmount, setStakedAmount] = useState('0');
+  const [proposalTitle, setProposalTitle] = useState('');
+  const [proposalDescription, setProposalDescription] = useState('');
+  const [proposals, setProposals] = useState([]);
+  const [selectedProposal, setSelectedProposal] = useState(null);
+  const [voteValue, setVoteValue] = useState('');
+  const [openStakeDialog, setOpenStakeDialog] = useState(false);
+  const [openUnstakeDialog, setOpenUnstakeDialog] = useState(false);
+  const [openProposalDialog, setOpenProposalDialog] = useState(false);
+  const [stakeAmount, setStakeAmount] = useState('');
+  const [unstakeAmount, setUnstakeAmount] = useState('');
+  const [selectedDAO, setSelectedDAO] = useState('');
+  const [daoDetails, setDaoDetails] = useState(null);
+
+  // Add this helper function to get DAO details
+  const getDAODetails = (tokenAddress) => {
+    // Find the token info from tokenAddresses
+    const tokenInfo = tokenAddresses.find(token => token.address === tokenAddress);
+    return {
+      name: tokenInfo?.name || 'Unknown DAO',
+      ticker: tokenInfo?.ticker || '',
+      address: tokenAddress,
+      // You can add more DAO specific details here
+    };
+  };
+
+  // Add these handler functions
+  const handleStake = async () => {
+    if (!library || !account) {
+      setStatus("Please connect to a wallet first.");
+      return;
+    }
+
+    try {
+      const signer = library.getSigner();
+      // Add your staking contract interaction here
+      // Example:
+      // const stakingContract = new ethers.Contract(stakingAddress, stakingABI, signer);
+      // await stakingContract.stake(ethers.utils.parseEther(stakeAmount));
+      
+      setOpenStakeDialog(false);
+      setStakeAmount('');
+      // Update staked amount
+      // fetchStakedAmount();
+    } catch (error) {
+      console.error("Staking failed:", error);
+    }
+  };
+
+  const handleUnstake = async () => {
+    if (!library || !account) {
+      setStatus("Please connect to a wallet first.");
+      return;
+    }
+
+    try {
+      const signer = library.getSigner();
+      // Add your unstaking contract interaction here
+      
+      setOpenUnstakeDialog(false);
+      setUnstakeAmount('');
+      // Update staked amount
+      // fetchStakedAmount();
+    } catch (error) {
+      console.error("Unstaking failed:", error);
+    }
+  };
+
+  const handleCreateProposal = async () => {
+    if (!library || !account) {
+      setStatus("Please connect to a wallet first.");
+      return;
+    }
+
+    try {
+      const signer = library.getSigner();
+      // Add your proposal creation contract interaction here
+      
+      // For demo purposes, adding to local state
+      setProposals([
+        ...proposals,
+        {
+          title: proposalTitle,
+          description: proposalDescription,
+          votesFor: 0,
+          votesAgainst: 0,
+        }
+      ]);
+      
+      setOpenProposalDialog(false);
+      setProposalTitle('');
+      setProposalDescription('');
+    } catch (error) {
+      console.error("Proposal creation failed:", error);
+    }
+  };
+
+  const handleVote = async () => {
+    if (!library || !account || !selectedProposal || !voteValue) {
+      setStatus("Please connect to a wallet and select a vote option.");
+      return;
+    }
+
+    try {
+      const signer = library.getSigner();
+      // Add your voting contract interaction here
+      
+      // For demo purposes, updating local state
+      setProposals(proposals.map(p => 
+        p.title === selectedProposal.title
+          ? {
+              ...p,
+              votesFor: voteValue === 'for' ? p.votesFor + 1 : p.votesFor,
+              votesAgainst: voteValue === 'against' ? p.votesAgainst + 1 : p.votesAgainst,
+            }
+          : p
+      ));
+      
+      setSelectedProposal(null);
+      setVoteValue('');
+    } catch (error) {
+      console.error("Voting failed:", error);
+    }
+  };
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static" sx={{ mb: 3, borderRadius: 1 }}>
@@ -1219,6 +1406,261 @@ const tokenAddressChange = (v) => {
     </Box>
   </Container>
 )}
+
+{activeTab === 'governance' && (
+  <Container>
+    {/* DAO Selector */}
+    <Paper sx={{ p: 3, mb: 3 }}>
+      <FormControl fullWidth>
+        <InputLabel>Select Franchise DAO</InputLabel>
+        <Select
+          value={selectedDAO}
+          onChange={(e) => {
+            setSelectedDAO(e.target.value);
+            setDaoDetails(getDAODetails(e.target.value));
+          }}
+          label="Select Franchise DAO"
+        >
+          {tokenAddresses.map((token) => (
+            <MenuItem key={token.address} value={token.address}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography>{token.name}</Typography>
+                <Chip 
+                  label={token.ticker} 
+                  size="small" 
+                  sx={{ ml: 1 }}
+                />
+              </Box>
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Paper>
+
+    {selectedDAO ? (
+      <>
+        {/* DAO Info Header */}
+        <Paper sx={{ p: 3, mb: 3 }}>
+          <Grid container spacing={2} alignItems="center">
+            <Grid item xs={12} md={6}>
+              <Typography variant="h5">{daoDetails?.name}</Typography>
+              <Typography color="text.secondary" gutterBottom>
+                {daoDetails?.address}
+              </Typography>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Box sx={{ display: 'flex', gap: 2, justifyContent: { xs: 'flex-start', md: 'flex-end' } }}>
+                <Chip 
+                  icon={<HowToVote />} 
+                  label={`${proposals.length} Active Proposals`}
+                />
+                <Chip 
+                  icon={<LocalAtm />} 
+                  label={`${stakedAmount} ${daoDetails?.ticker} Staked`}
+                />
+              </Box>
+            </Grid>
+          </Grid>
+        </Paper>
+
+        <Grid container spacing={3}>
+          {/* Staking Section */}
+          <Grid item xs={12} md={4}>
+            <Paper sx={{ p: 3, height: '100%' }}>
+              <Typography variant="h6" gutterBottom>
+                Staking
+              </Typography>
+              <Box sx={{ mb: 3 }}>
+                <Typography variant="body2" color="text.secondary" gutterBottom>
+                  Currently Staked
+                </Typography>
+                <Typography variant="h4">
+                  {stakedAmount} {selectedTokenTicker || 'Tokens'}
+                </Typography>
+              </Box>
+              <Stack spacing={2}>
+                <Button
+                  variant="contained"
+                  startIcon={<LocalAtm />}
+                  onClick={() => setOpenStakeDialog(true)}
+                  fullWidth
+                >
+                  Stake Tokens
+                </Button>
+                <Button
+                  variant="outlined"
+                  startIcon={<LocalAtm />}
+                  onClick={() => setOpenUnstakeDialog(true)}
+                  fullWidth
+                >
+                  Unstake Tokens
+                </Button>
+              </Stack>
+            </Paper>
+          </Grid>
+
+          {/* Proposals Section */}
+          <Grid item xs={12} md={8}>
+            <Paper sx={{ p: 3 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+                <Typography variant="h6">
+                  Active Proposals
+                </Typography>
+                <Button
+                  variant="contained"
+                  startIcon={<Description />}
+                  onClick={() => setOpenProposalDialog(true)}
+                >
+                  Create Proposal
+                </Button>
+              </Box>
+              
+              {proposals.length === 0 ? (
+                <Box sx={{ textAlign: 'center', py: 4 }}>
+                  <Typography color="text.secondary">
+                    No active proposals
+                  </Typography>
+                </Box>
+              ) : (
+                <List>
+                  {proposals.map((proposal, index) => (
+                    <ListItem
+                      key={index}
+                      secondaryAction={
+                        <Button
+                          variant="outlined"
+                          size="small"
+                          startIcon={<HowToVote />}
+                          onClick={() => setSelectedProposal(proposal)}
+                        >
+                          Vote
+                        </Button>
+                      }
+                    >
+                      <ListItemText
+                        primary={proposal.title}
+                        secondary={`Votes: For (${proposal.votesFor}) Against (${proposal.votesAgainst})`}
+                      />
+                    </ListItem>
+                  ))}
+                </List>
+              )}
+            </Paper>
+          </Grid>
+        </Grid>
+
+        {/* Stake Dialog */}
+        <Dialog open={openStakeDialog} onClose={() => setOpenStakeDialog(false)}>
+          <DialogTitle>Stake Tokens</DialogTitle>
+          <DialogContent>
+            <TextField
+              autoFocus
+              margin="dense"
+              label="Amount to Stake"
+              type="number"
+              fullWidth
+              value={stakeAmount}
+              onChange={(e) => setStakeAmount(e.target.value)}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{selectedTokenTicker || 'Tokens'}</InputAdornment>,
+              }}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpenStakeDialog(false)}>Cancel</Button>
+            <Button onClick={handleStake} variant="contained">Stake</Button>
+          </DialogActions>
+        </Dialog>
+
+        {/* Unstake Dialog */}
+        <Dialog open={openUnstakeDialog} onClose={() => setOpenUnstakeDialog(false)}>
+          <DialogTitle>Unstake Tokens</DialogTitle>
+          <DialogContent>
+            <TextField
+              autoFocus
+              margin="dense"
+              label="Amount to Unstake"
+              type="number"
+              fullWidth
+              value={unstakeAmount}
+              onChange={(e) => setUnstakeAmount(e.target.value)}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{selectedTokenTicker || 'Tokens'}</InputAdornment>,
+              }}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpenUnstakeDialog(false)}>Cancel</Button>
+            <Button onClick={handleUnstake} variant="contained">Unstake</Button>
+          </DialogActions>
+        </Dialog>
+
+        {/* Create Proposal Dialog */}
+        <Dialog 
+          open={openProposalDialog} 
+          onClose={() => setOpenProposalDialog(false)}
+          maxWidth="md"
+          fullWidth
+        >
+          <DialogTitle>Create New Proposal</DialogTitle>
+          <DialogContent>
+            <Box sx={{ mt: 2 }}>
+              <TextField
+                label="Proposal Title"
+                fullWidth
+                value={proposalTitle}
+                onChange={(e) => setProposalTitle(e.target.value)}
+                sx={{ mb: 3 }}
+              />
+              <TextField
+                label="Proposal Description"
+                fullWidth
+                multiline
+                rows={4}
+                value={proposalDescription}
+                onChange={(e) => setProposalDescription(e.target.value)}
+              />
+            </Box>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpenProposalDialog(false)}>Cancel</Button>
+            <Button onClick={handleCreateProposal} variant="contained">Create Proposal</Button>
+          </DialogActions>
+        </Dialog>
+
+        {/* Vote Dialog */}
+        <Dialog 
+          open={Boolean(selectedProposal)} 
+          onClose={() => setSelectedProposal(null)}
+        >
+          <DialogTitle>{selectedProposal?.title}</DialogTitle>
+          <DialogContent>
+            <FormControl>
+              <FormLabel>Your Vote</FormLabel>
+              <RadioGroup
+                value={voteValue}
+                onChange={(e) => setVoteValue(e.target.value)}
+              >
+                <FormControlLabel value="for" control={<Radio />} label="For" />
+                <FormControlLabel value="against" control={<Radio />} label="Against" />
+              </RadioGroup>
+            </FormControl>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setSelectedProposal(null)}>Cancel</Button>
+            <Button onClick={handleVote} variant="contained">Submit Vote</Button>
+          </DialogActions>
+        </Dialog>
+      </>
+    ) : (
+      <Paper sx={{ p: 3, textAlign: 'center' }}>
+        <Typography color="text.secondary">
+          Please select a DAO to view governance details.
+        </Typography>
+      </Paper>
+    )}
+  </Container>
+)}
           </Box>
         </Container>
       )}