få klonad kryptosida att fungera?

import {React, useContext, useEffect, useReducer, useState } from 'react';
import AssetToSwap from '../AssetToSwap/AssetToSwap'
import SwapMetrics from '../SwapMetrics/SwapMetrics'
import tokens from '../../data/tokens.js'
import { useConnectedWallet, useLCDClient, useWallet, WalletStatus};

export default function SwapContainer() {
const {swapValue, setSwapValue} = useContext(SwapContext);
const {balancePrice} = useContext(BalancePriceContext);
const [loaded, setLoaded] = useState(true);
const lcd = useLCDClient();
const connectedWallet = useConnectedWallet();
const {network} = useWallet();

function swapRatesReducer(state, value) {
if(!value){
return state
}
var newValue = {
from: value.from ? value.from : state.from,
to: value.to ? value.to : state.to
}
return newValue
}
function setPriceReducer(state, value) {
if(!value){
return state
}
var newValue = {
from: value.from ? value.from : state.from,
to: value.to ? value.to : state.to
}
return newValue
}

const [swapRates, setSwapRates] = useReducer(swapRatesReducer, {from: null, to: null});
const [prices, setPrice] = useReducer(setPriceReducer, {from: null, to: null});

useEffect(()=>{
const pool = swapValue.pool
const assetFrom = swapValue.assetFrom.asset
const assetTo= swapValue.assetTo.asset
if(assetFrom in balancePrice && connectedWallet){
if(balancePrice[assetFrom].balance=='loading'){
setLoaded(false)
}else{
setLoaded(true)
}
setPrice({from:balancePrice[assetFrom].price})
}
else{
setPrice({from:null})
}
if(assetTo in balancePrice && connectedWallet){
if(balancePrice[assetTo].balance=='loading'){
setLoaded(false)
}else{
setLoaded(true)
}
setPrice({to:balancePrice[assetTo].price})
}else{
setPrice({to:null})
}
}, [swapValue, balancePrice])

useEffect(()=>{
if(lcd){
const prov = new SimulationExecutor(lcd)
prov.simulate(swapValue, setSwapRates)
}
},[swapValue])

return (
<>
<div className='swap-container-input'>
<AssetToSwap token={swapValue.assetFrom.asset} asset={tokens[network.name][swapValue.assetFrom.asset].symbol} logo={tokens[network.name][swapValue.assetFrom.asset].icon}
owned={true} amount={swapValue.assetFrom.amount} onChange={(e)=>setSwapValue({amount: e.target.value, step:'amount'})}></AssetToSwap>
<div className='arrow-container'>
<div className='arrow-button' tabIndex={5}
onClick={()=>{
setSwapValue({
assetFrom: swapValue.assetTo.asset,
assetTo:swapValue.assetFrom.asset,
step: 'amount',
price: swapRates.to
})
}}
onKeyUp = {(e) =>{
if (e.key === 'Enter') {
setSwapValue({
assetFrom: swapValue.assetTo.asset,
assetTo: swapValue.assetFrom.asset,
step: 'amount',
price: swapRates.to
})
}
}}>&rarr;</div>
</div>
<AssetToSwap token={swapValue.assetTo.asset} asset={tokens[network.name][swapValue.assetTo.asset].symbol} logo={tokens[network.name][swapValue.assetTo.asset].icon}
owned={false} amount={swapValue.assetFrom.amount*swapRates.from} ></AssetToSwap>
</div>
<SwapMetrics fromSymbol={tokens[network.name][swapValue.assetFrom.asset].symbol}
toSymbol={tokens[network.name][swapValue.assetTo.asset].symbol}
swapRateFrom={swapRates.from} swapRateTo={swapRates.to}
priceAssetTo={prices.to} priceAssetFrom={prices.from} loaded={loaded} />
</>
)
}

import React, { useEffect , useRef, useState, useContext} from 'react';

export default function AssetToSwap(props) {
const { token, asset, logo, owned, amount, onChange} = props;
const className = owned ? 'asset-outer-input':'asset-outer'
const inputRef = useRef()
const {swapValue, setSwapValue} = useContext(SwapContext);
const [amountInputted, setAmountInputted] = useState(0);
const {balancePrice} = useContext(BalancePriceContext);
const [amountOwned, setAmountOwned] = useState(null);
const [loaded, setLoaded] = useState(true);

useEffect(()=>{
if(token in balancePrice){
if(balancePrice[token].balance=='loading'){
setLoaded(false)
}else{
setLoaded(true)
}
setAmountOwned(balancePrice[token].balance)
}

}, [balancePrice])

useEffect(()=>{
console.log('now step amount')
if(swapValue.step==='amount'){
if(inputRef&&inputRef.current){
inputRef.current.focus()
}
}
}, [swapValue])

const enterHandler = () => {
console.log('next swap')
setSwapValue({
step: 'swap'
})
}

const amountHandler = () => {
console.log('next swap')
setSwapValue({
amount: amountOwned
})
if(inputRef&&inputRef.current){
inputRef.current.value = Math.round(amountOwned*100-1)/100
}
}

const onChangeHandler = (e) => {
onChange(e);
setAmountInputted(e.target.value)
}

return (
<div className={className}>
<div className='current-balance'>
{(owned &&
<>
<div onClick={()=>amountHandler()}>{Math.round(amountOw ned*100)/100}</div>
</>
)}
</div>
<div className='asset-name'>{asset}</div>
<div className='asset-container'>
{(owned &&
<>
<input step="0.01"
lang="en"
onChange={onChangeHandler}
tabIndex="3"
ref={inputRef}
className={amountInputted<=amountOwned?'amount-input':'amount-input amount-input-too-high'}
placeholder="0" type="number"
onKeyUp = {(e) =>{
if (e.key === 'Enter') {
enterHandler();
}
}}/>
<img className='asset-logo-from' src={logo} width="40" alt="Italian Trulli"></img>
</>)}
{(!owned &&
<>
<img className='asset-logo-to' src={logo} width="40" alt="Italian Trulli"></img>
<div className='amount-calculated'>{numeral(amount).format('0.00')}</div>
</>)}
</div>
</div>
)
}

import React from 'react';

export default function SwapMetrics(props) {
const {fromSymbol,toSymbol,swapRateFrom, swapRateTo,
priceAssetTo, priceAssetFrom, loaded} = props

return (
<div className='swaps-metrics-container'>
{(loaded)&&
<>
<div className='swaps-metrics-eq-dist'>1 {fromSymbol} = ${Math.round(priceAssetFrom*100)/100}</div>
<div className='swaps-metrics-swap-rate'>
<div>1 {fromSymbol} → {Math.round(swapRateFrom*10000)/10000} {toSymbol} </div>
<div>1 {toSymbol} → {Math.round(swapRateTo*10000)/10000} {fromSymbol} </div>
</div>
<div className='swaps-metrics-eq-dist'>1 {toSymbol} = ${Math.round(priceAssetTo*100)/100}</div>
</>
}
{(!loaded)&&<TailSpin className="loading" height="30" width="30" color='#ffffff'ariaLabel='loading'/>}
</div>
)
}