\n \n \n
\n \n )\n}\n\nexport default InputGroup\n","import clsx from 'clsx'\nimport React from 'react'\n\nimport './Switch.scss'\n\nconst Switch = ({ className, name, checked, onChange }) => {\n return (\n \n \n
\n )\n}\n\nexport default Switch\n","import clsx from 'clsx'\nimport React from 'react'\n\nimport './RadioGroup.scss'\n\nconst RadioGroup = ({\n className,\n selectedOption,\n setSelectedOption,\n options,\n isDarkTheme,\n}) => {\n return (\n \r\n {renderSocialMediaIcons()}\r\n
\r\n )\r\n}\r\n\r\nexport default SocialMediaIcons\r\n","import React from 'react'\nimport clsx from 'clsx'\nimport { Link, useHistory, useLocation } from 'react-router-dom'\n\nimport { Button, Icon, SocialMediaIcons } from '../'\n\nimport './HomeLayout.scss'\nimport { isDesktop } from '../../utils'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { toggle } from '../../store/theme'\n\nconst HomeLayout = ({ children }) => {\n const { pathname } = useLocation()\n const history = useHistory()\n const dispatch = useDispatch()\n const { isDarkTheme } = useSelector(state => state.theme)\n\n if (isDesktop()) {\n return (\n \n {pathname !== '/login' && (\n \n {pathname !== '/' && (\n history.goBack()}\n />\n )}\n \n
\n )}\n {children}\n \n \n )\n}\n\nexport default HomeLayout\n","export default __webpack_public_path__ + \"static/media/logo-with-tagline.ddf41caa.png\";","import clsx from 'clsx'\nimport React from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Link, useHistory } from 'react-router-dom'\n\nimport { Icon } from '../../'\nimport LogoWithTagline from '../../../assets/imgs/logo-with-tagline.png'\nimport { logout } from '../../../store/user'\nimport './Sidebar.scss'\n\nconst Sidebar = ({ isOpen }) => {\n const history = useHistory()\n const dispatch = useDispatch()\n\n const { isDarkTheme } = useSelector(state => state.theme)\n\n const handleLogout = () => {\n dispatch(logout())\n history.push('/')\n }\n\n return (\n - \n
- \n \n
- \n \n
- \n \n
- \n \n
{' '}\n Settings\n \n \n - \n \n
\n \n
\n \n {options.map(option => (\n onTabChange(option)}\n >\n {option}\n \n ))}\n
\n )\n}\n\nexport default Tabs\n","import clsx from 'clsx'\nimport React from 'react'\n\nimport { Icon } from '../'\n\nimport './ThemeIcon.scss'\n\nconst ThemeIcon = ({ className, name, size, ...props }) => {\n return (\n \n
\n )\n}\n\nexport default Loader\n","import React from 'react'\nimport QrCode from 'qrcode'\nimport clsx from 'clsx'\n\nconst Qr = ({ className, code, width = 140, margin = 0, isDarkTheme }) => {\n const [qr, setQr] = React.useState(null)\n\n React.useEffect(() => {\n ;(async () => {\n try {\n const url = await QrCode.toDataURL(code, {\n color: {\n dark: '#000000',\n light: isDarkTheme ? '#fff' : '#0000',\n },\n width,\n margin,\n })\n setQr(\n \n
\n ,\n document.getElementById('modal-root')\n )\n}\n\nexport default Modal\n","export default __webpack_public_path__ + \"static/media/toast-check.0cdcc162.svg\";","import clsx from 'clsx'\nimport React from 'react'\nimport { useSelector } from 'react-redux'\n\nimport ToastCheck from '../../assets/imgs/toast-check.svg'\n\nimport './WsnToast.scss'\n\nconst WsnToast = ({ heading, message, url }) => {\n const { isDarkTheme } = useSelector(state => state.theme)\n\n return (\n \n {heading}\n
\n {children}
\n \n 
\n
\n )\n}\n\nexport default WsnToast\n","export default function capitalize(str) {\n if (!str) return str\n const capitalizedStr = str.substr(0, 1).toUpperCase() + str.substr(1)\n return capitalizedStr\n}\n","export default function format(amount) {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(amount)\n}\n","export default function groupTransactionsByDate(transactions) {\n console.log(transactions)\n const groupedTransactions = {}\n\n transactions.forEach(txn => {\n const [date] = txn.createdAt.split('T')\n if (date in groupedTransactions) {\n groupedTransactions[date].push(txn)\n } else {\n groupedTransactions[date] = [txn]\n }\n })\n\n return groupedTransactions\n}\n","function setColor(name, value) {\n document.documentElement.style.setProperty(name, value)\n}\n\nexport default function changeTheme(isDark = false) {\n if (isDark) {\n // setColor('--color-black', '#fff')\n // setColor('--color-charcoal', '#fff')\n // setColor('--color-white', '#1d1d1d')\n } else {\n // setColor('--color-black', '#000')\n // setColor('--color-charcoal', '#1d1d1d')\n setColor('--color-white', '#fff')\n }\n}\n","export const breakpoints = {\n lg: 1366,\n md: 992,\n sm: 768,\n xs: 480,\n}\n","import { breakpoints } from '../constants/breakpoints'\n\nexport default function isDesktop() {\n return window.innerWidth > breakpoints.sm\n}\n","import { createSlice } from '@reduxjs/toolkit'\n\nconst initialState = {\n notifications: [\n {\n id: 1,\n heading: 'New device has been authorized',\n description:\n 'You have successfully authorized a new device or in new location to sign into your WSN account.',\n isRead: false,\n createdAt: '2021-07-30T14:20:42.562Z',\n },\n {\n id: 2,\n heading: 'New device has been authorized',\n description:\n 'You have successfully authorized a new device or in new location to sign into your WSN account.',\n isRead: false,\n createdAt: '2021-07-30T14:20:42.562Z',\n },\n {\n id: 3,\n heading: 'New device has been authorized',\n description:\n 'You have successfully authorized a new device or in new location to sign into your WSN account.',\n isRead: false,\n createdAt: '2021-07-30T14:20:42.562Z',\n },\n ],\n}\n\n// const sample = {\n// id: 1,\n// heading: 'New device has been authorized',\n// description:\n// 'You have successfully authorized a new device or in new location to sign into your WSN account.',\n// isRead: false,\n// createdAt: '2021-07-30T14:20:42.562Z',\n// }\n\nexport const notificationsSlice = createSlice({\n name: 'notifications',\n initialState,\n reducers: {\n addNotification: (state, action) => {\n state.notifications.push({\n ...action.payload,\n isRead: false,\n id: Math.ceil(Math.random() * 10000),\n createdAt: new Date().toISOString(),\n })\n },\n markRead: (state, action) => {\n state.notifications = state.notifications.map(n => {\n if (n.id === action.payload) {\n return { ...n, isRead: true }\n }\n return n\n })\n },\n markAllRead: state => {\n state.notifications = state.notifications.map(n => ({\n ...n,\n isRead: true,\n }))\n },\n deleteNotifications: (state, action) => {\n state.notifications = state.notifications.filter(\n n => !action.payload.includes(n.id)\n )\n },\n },\n})\n\nexport const { addNotification, markRead, markAllRead, deleteNotifications } =\n notificationsSlice.actions\n\nexport default notificationsSlice.reducer\n","import { createSlice } from '@reduxjs/toolkit'\n\nconst initialState = {\n isAuthenticated: false,\n privateKey: null,\n publicKey: null,\n privateKeyEncrypted: null,\n settings: {\n askPasswordOnTxn: false,\n autoSessionTimeout: false,\n },\n}\n\nexport const userSlice = createSlice({\n name: 'user',\n initialState,\n reducers: {\n setPublicKey: (state, action) => {\n state.publicKey = action.payload\n },\n setPrivateKey: (state, action) => {\n state.privateKey = action.payload\n },\n setPrivateKeyEncrypted: (state, action) => {\n state.privateKeyEncrypted = action.payload\n },\n login: (state, action) => {\n state.isAuthenticated = true\n state.privateKey = action.payload.privateKey\n state.privateKeyEncrypted = action.payload.privateKeyEncrypted\n state.publicKey = action.payload.publicKey\n },\n logout: state => {\n state.isAuthenticated = false\n state.privateKey = null\n state.publicKey = null\n },\n updateSetting: (state, action) => {\n state.settings[action.payload.setting] =\n !state.settings[action.payload.setting]\n },\n },\n})\n\nexport const {\n login,\n logout,\n updateSetting,\n setPrivateKey,\n setPrivateKeyEncrypted,\n setPublicKey,\n} = userSlice.actions\n\nexport default userSlice.reducer\n","import { createSlice } from '@reduxjs/toolkit'\nimport { changeTheme } from '../../utils'\n\nconst initialState = {\n isDarkTheme: false,\n}\n\nexport const themeSlice = createSlice({\n name: 'theme',\n initialState,\n reducers: {\n setDarkTheme: (state, action) => {\n state.isDarkTheme = action.payload\n changeTheme(action.payload)\n },\n toggle: state => {\n state.isDarkTheme = !state.isDarkTheme\n changeTheme(state.isDarkTheme)\n },\n },\n})\n\nexport const { toggle, setDarkTheme } = themeSlice.actions\n\nexport default themeSlice.reducer\n","import axios from 'axios'\nimport { createAsyncThunk, createSlice } from '@reduxjs/toolkit'\n\nconst initialState = {\n allCoins: [],\n totalBalance: 0,\n isLoading: false,\n errorMessage: null,\n}\n\nexport const fetchAllCoins = createAsyncThunk(\n 'coins/fetchAllCoins',\n async (_, thunkAPI) => {\n try {\n const state = thunkAPI.getState()\n\n const response = await axios.post(\n //`https://wsn-0x29b1d432a40f40f5418da2d4abf740e5e491629b-authority.stackos.io/api/swap/listAllTokens`\n `${process.env.REACT_APP_API_URL}/api/wallet/getBalance`,\n {\n publicKey: state.user.publicKey,\n }\n )\n\n const temp = response.data.data\n const balance = response.data.total\n\n return { data: temp, balance: balance }\n } catch (err) {\n return thunkAPI.rejectWithValue(err.message)\n }\n }\n)\n\nexport const coinsSlice = createSlice({\n name: 'coins',\n initialState,\n extraReducers: builder => {\n builder.addCase(fetchAllCoins.fulfilled, (state, action) => {\n state.allCoins = action.payload.data\n state.totalBalance = action.payload.balance\n state.isLoading = false\n })\n builder.addCase(fetchAllCoins.pending, state => {\n state.isLoading = true\n })\n builder.addCase(fetchAllCoins.rejected, state => {\n state.isLoading = false\n state.errorMessage = 'Something went wrong!'\n })\n },\n})\n\nexport default coinsSlice.reducer\n","export default __webpack_public_path__ + \"static/media/dollar.87820810.svg\";","import React from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { useHistory } from 'react-router-dom'\nimport copy from 'copy-to-clipboard'\nimport { toast } from 'react-toastify'\n\nimport {\n Button,\n Input,\n InputGroup,\n Loader,\n Qr,\n ThemeIcon,\n WsnToast,\n} from '../../../components'\n\nimport { currencyFmt, isDesktop } from '../../../utils'\nimport { fetchAllCoins } from '../../../store/coins'\nimport DollarImg from '../../../assets/imgs/dollar.svg'\nimport './Coins.scss'\nimport TxnList from '../../../components/TxnList'\nimport dayjs from 'dayjs'\nimport clsx from 'clsx'\nimport axios from 'axios'\nimport { addNotification } from '../../../store/notifications'\n\nconst Coins = ({ currentTab, historyFilter }) => {\n const history = useHistory()\n const dispatch = useDispatch()\n const { allCoins, totalBalance, isLoading } = useSelector(\n state => state.coins\n )\n const { isDarkTheme } = useSelector(state => state.theme)\n const { publicKey } = useSelector(state => state.user)\n\n const CODE = publicKey\n\n const [coins, setCoins] = React.useState([])\n const [selectedCoin, setSelectedCoin] = React.useState()\n const [transactions, setTransactions] = React.useState([])\n const [selectedTxn, setSelectedTxn] = React.useState()\n const [balance, setBalance] = React.useState(0)\n const [search, setSearch] = React.useState('')\n \n\n // Send\n const RATE = 357.32\n\n const { privateKey } = useSelector(state => state.user)\n const [recipient, setRecipient] = React.useState('')\n const [amount, setAmount] = React.useState(0)\n const [unitToSend, setUnitToSend] = React.useState(selectedCoin?.unit)\n const [transactionFlag, setTransactionFlag] = React.useState(false)\n\n const renderConversion = () => {\n if (unitToSend === selectedCoin?.unit) {\n return `~${currencyFmt(amount * selectedCoin.currentAmount)} USD`\n } else {\n return `~${amount / selectedCoin.currentAmount} ${selectedCoin?.unit}`\n }\n }\n\n React.useEffect(() => {\n if (allCoins.length) {\n setCoins(allCoins)\n setSelectedCoin(allCoins?.[0])\n } else {\n dispatch(fetchAllCoins())\n }\n setBalance(totalBalance)\n }, [allCoins, allCoins.length, dispatch, totalBalance])\n\n React.useEffect(() => {\n ;(async () => {\n if (selectedCoin) {\n setUnitToSend(selectedCoin.unit)\n let response = await axios.post(\n `${process.env.REACT_APP_API_URL}/api/wallet/getAllTransactions`,\n { publicKey }\n )\n if (response.data.data) {\n setTransactions(response.data.data)\n }\n }\n })()\n }, [publicKey, selectedCoin, selectedCoin?.id])\n\n const handleSearch = e => {\n const { value } = e.target\n setSearch(value)\n const query = value.trim().toLowerCase()\n if (!query) {\n setCoins([...allCoins])\n } else {\n const result = allCoins.filter(\n coin =>\n coin.name.toLowerCase().includes(query) ||\n coin.unit.toLowerCase().includes(query)\n )\n setCoins(result)\n }\n }\n\n const sendCoins = async () => {\n setTransactionFlag(true)\n try{\n const response = await axios.post(`${process.env.REACT_APP_API_URL}/api/token/sendTokenTransaction`, {\n privateKey,\n receiverAddress: recipient,\n contractAddress: selectedCoin.address,\n amountInEther: amount,\n })\n console.log(response)\n const heading = 'Transaction receipt!'\n const description = `Sent ${amount} ${unitToSend} to ${recipient}`\n \n dispatch(addNotification({ heading, description }))\n // url is optional\n toast(\n \n \n View on BscScan\n \n )}\n
\n {heading}
\n{message}
\n {!!url && (\n\n
\n \n )\n }\n\n if (currentTab === 'Send') {\n return (\n \n setSelectedTxn(txn)}\n isDarkTheme={isDarkTheme}\n />\n
\n \n
\n \n
\n \n {selectedCoin.name}\n
\n\n Wallet balance:\n
\n \n {selectedCoin.value}\n {selectedCoin.unit}\n
\n \n {currencyFmt(selectedCoin.investedAmount)}\n
\n \n {selectedTxn ? (\n <>\n \n {selectedTxn.value}\n
\n \n
\n \n
\n \n Date\n
\n\n {dayjs(selectedTxn.createdAt).format(\n 'DD MMM YY'\n )}\n
\n\n
\n \n Status\n
\n\n {selectedTxn.status}\n
\n\n
\n \n Recipient\n
\n\n {selectedTxn.recipient}\n
\n\n
\n \n ) : (\n \n
\n \n Network Fee\n
\n\n {selectedTxn.fee}\n
\n\n
\n \n Nonce\n
\n\n {selectedTxn.nonce}\n
\n\n Select Transaction\n
\n )}\n \n
\n )\n }\n\n if (currentTab === 'Receive') {\n return (\n \n setRecipient(e.target.value)}\n right={\n \n Paste\n \n }\n isDarkTheme={isDarkTheme}\n />\n setAmount(e.target.value)}\n right={\n \n setUnitToSend(\n unitToSend === selectedCoin.unit\n ? 'USD'\n : selectedCoin.unit\n )\n }\n className=\"DesktopCoins__send-amount-unit\"\n >\n {unitToSend}\n \n }\n isDarkTheme={isDarkTheme}\n />\n \n Send\n \n :\n \n Send\n \n }\n
\n Send {unitToSend}
\n\n {renderConversion()}\n
\n \n Network Fee: $0.33\n
\n \n Wallet Balance:{' '}\n \n {selectedCoin.value} {selectedCoin.unit}\n \n
\n {\n transactionFlag?\n \n
\n \n Instantly send your coins or token\n
\n \n
\n )\n }\n }\n\n if (isDesktop()) {\n return (\n Receive BNB
\n\n
\n \n copy(CODE)}\n />\n
\n \n Wallet Balance:\n
\n\n {selectedCoin.value} {selectedCoin.unit}\n
\n\n {selectedCoin.investedAmount.toFixed(2)} USD\n
\n\n Wallet Address:\n
\n{CODE}
\n\n
\n \n WallStreetNinja\n
\n\n Send only BNB to this address.
\n Sending any other coins may result in permanent loss\n
\n
\n \n \n {currencyFmt(balance)}\n
\n \n {coins.map(coin => (\n setSelectedCoin(coin)}\n >\n
\n ))}\n \n
\n \n
\n \n {coin.name}\n
\n\n {coin.value} {coin.unit}\n
\n\n \n {currencyFmt(coin.currentAmount)}{' '}\n \n {coin.change}\n \n \n \n {currencyFmt(coin.investedAmount)}\n \n
\n {renderPanelContent()}
\n \n )\n }\n\n if (isLoading) return \n
\n \n )\n}\n\nexport default Coins\n","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAbCSURBVHgB7Vp7bBN1HP/c9fpeu3aO0TEe4w0yiGNIBgaRlyYIgQRZiJGHBE0UEtA/RBIUTeAfNWriPyZi1EAEJIjggCDISxiEV5AxYIy9YB1jW9d2W1/Xu57fu7I62MMdbd0kfrJb79e73/X36ff9/ZX59AYvoQss3LcFjnvlyjljMEDieSASAWMyQQr4AZrJmOnc5283S1L+4gYT+wdPWiZ2Fmzp8laum8dAxweiz7NYYFy3CeKtEoRPHYbhrfcRPn0UkYpS6F9fC75wF4SzJ8Ha7NAvXgFoNIgXUphH6Mdv6MsKgAsFIBEfRnoMErEH8mEgFIQU8iuvjCyRIBHkQ4BA5/6WBzeSoDwuItGjx3YPQQBYtke3Mt2pU8HujUhz1aJ7yNMZJBOtZhu2Lfv88STBDh0Fjd2C3oZGZ+r2OieTE8hIJUnscFG3aDmMxgSoRpwQeBF8sRdMJwLXGlPAzFy1QXLX1nQ6eedXmzFq2GD0Nuobm/DSsrVEoiMLmyMLnExAr2Wg68ShaNjk6npPIS/eYmA7SCJMyuOpc0ZtYs2LwJKpkQ6T2f7oE+hnlXDiQ5FcyMMsDlxm8dGeB4YtOzJNZ1/6I+5AFCMIyu42wTjjdsIrhGLjKelZGGiyPnRPZ0rRtmZVVisQiebWABKNfTVluNbSFBun600dSHSHnkWTPo4ngoQqddJyLGwWMxKNlcMnoJH/W03HWdOhBqpIsJTLGA2JF16eIRPxQBUJqcUD8WZxbMwOHkpueCB6G6pIRJzV9E8EO2y0kmWK5TdjJL7dsR/z50xDxR0nhmQ58PW2n2G3WTBmeDaKLl7F+DHDsXj+bCQDqhMjxv4U2H4kfiEMsbI09n5ljRPb9x7CU7ZUpNORmmrGtMnPIG/CWJRV3cUr82YhWVCt4JJcV/h9VKz4omNJotzGDbPBiBem5OHg8TPK+3qtjgLUv+P8VEmCcQxEpOw6hBtXlLFmyAiEQjwaXG68PPM5TBg3EmtXLkFGRpqiUnUNLtI6EXOmTe40eUsUVJFooDr7rCODJkW/4Wyqr3MMeowbPSx2z9RJE5TXeWQfbRgzIhvJhCoSd33NcBjNyLU7IFDD4MT9O8ixZSjXDh0vwtXrZRhAJPNzc7D/yCnodVq88epCfLfrV9yndHr1isVIT7Mh0VCttDpGAz3V0PLRpiCCKKK82on1q5crC6+quYcsRz9KFnkcOHYGT5OkNqxZQal9cmxE9VMrfF4UexpwzduAsBQBT1ltSWkFGl0e/HH+Cm5VVMNqMcHlaYbzXj3yJ+bg3OVrOHL6PI4VXUQyoEqdRlrtCIkCPHxQGU9Mc4DVsDAbDXjv7aW48Od1rFyyAPbUFAwZmKmk7kayo4J5s1HtrMP0/FwkA6pIWBobMOnwXsAYLdw1o3LA5eZjxNBBynh6/sTYvfLi22BPtSB7UHypRXdQF7Hra6HJmwJu/LNKsONPHIxd2114FC63V4kbg7MyUVvXgIYmN9YsX4zVGz/BZx+sww+7C5EzdgTmzpiKRCK+Vka7wu8Oqcu7b76mvPnxF1ux6Z1VOHupGCfPXUZmRjq27vgFPn9AiSuJhmoSkarbFMCEaIeOuoCyYRdduoowjbfvOQg+LCiL3rn/N5SWV2NlwXw0eVvQSFJZNHcmbtyuQqKhioRm3ESwA4a0G+eCIZeaN36sknI0NnlgoQCo1+vQRKq1YM7zMJmMKJg/K2YjgymSJxrq0g5OC6Zfx0VYUqKG3j6QpdlTY+ftjdxkNCDR+L/G7it4choFv5eQi3R1wsdWCEmTgt4GE6EMwd2xz1rVKGdv1BfMnbs0EZtTvQrmp8Kj/30SkpwnJAly4AtRMNRyHAx6LZKFpO2giFQ0uZv9tNkaoVo7RESstB/ZR+qJnkIWcJuQIxKQRIEnTxIcbQNbzQYEQ2HoKDXhuPi3hbsCc8ElSNlmNu79Tx0TgUbo+d5FmOUgMPETcwYi4E7UyztEEcSLKSkhZGt5+P1+tLT6ECaj7g5NFH9K9AOQCCREnfSshCydqDTLUlJSlENO0QOBAHw+v9JIeBTWiB8GKYwgE7/XSgiJ4XoB+ke2xmQ7kA+r1UKFUAitJJ0gFUSyt1I+mJoMmaIXlZy6Nn5niJuEvG821ti1LcidPwOl4vIheyhZ3WRCcvzoH25GjcaOcJy28Vgkgi1ehHzR33P011Fa8w/63xEMxQwOQerparyVaES0xjBabdCZ1Odqqknw9MGHv9wMv9cdW9D3cbg2qd1Pi7TUlJ63fjMMllRVzyAS4gw1E8L+IFqbXEgGQj5SM6+HSKiTxl/BcnQMb6uqGwAAAABJRU5ErkJggg==\"","export default __webpack_public_path__ + \"static/media/star.47a97d41.svg\";","import React from 'react'\nimport { useHistory } from 'react-router-dom'\n\nimport ArtworksImage from '../../../assets/imgs/artworks.png'\nimport DomainsImage from '../../../assets/imgs/domains.png'\nimport { isDesktop } from '../../../utils'\n\nimport StarImg from '../../../assets/imgs/star.svg'\nimport './Collectibles.scss'\nimport clsx from 'clsx'\nimport { useSelector } from 'react-redux'\n\nconst Collectibles = ({ children }) => {\n const history = useHistory()\n const { isDarkTheme } = useSelector(state => state.theme)\n\n // const [collectibles, setCollectibles] = React.useState([])\n // const [isLoading, setIsLoading] = React.useState(true)\n\n // React.useEffect(() => {\n // ;(async () => {\n // try {\n // setCollectibles([\n // {\n // id: 1,\n // name: 'Artworks',\n // image: '',\n // },\n // {\n // id: 2,\n // name: 'Domain',\n // image: '',\n // },\n // ])\n // } catch (err) {\n // console.log(err)\n // } finally {\n // setIsLoading(false)\n // }\n // })()\n // }, [])\n\n // if (isLoading) return 'Loading...'\n\n if (isDesktop()) {\n return (\n {currencyFmt(balance)}
\n\n {coins.map(coin => (\n history.push(`/coin/${coin.id}`)}\n >\n
\n ))}\n \n
\n \n
\n \n {coin.name}\n
\n\n {coin.value} {coin.unit}\n
\n\n \n {currencyFmt(coin.currentAmount)}{' '}\n \n {coin.change}\n \n \n \n {currencyFmt(coin.investedAmount)}\n \n
\n \n history.push('/artworks')}\n >\n
\n Artworks
\nDomains
\n \n \n\n {children ?? (\n
\n \n )\n }\n\n return (\n \n
\n )}\n \n Receive Collectibles here\n
\n\n Buy at Open Sea\n
\nArtworks
\n \nDomains
\n \n \n )\n}\n\nexport default Collectibles\n","import React from 'react'\nimport { useSelector } from 'react-redux'\nimport { useHistory, useParams, useLocation } from 'react-router-dom'\nimport { DashboardLayout, Select, Tabs, ThemeIcon } from '../../components'\nimport { capitalize, isDesktop } from '../../utils'\nimport Coins from './Coins'\nimport Collectibles from './Collectibles'\n\nimport './Wallet.scss'\n\nconst TABS = ['Coins', 'Collectibles']\nconst COINS_TABS = ['History', 'Send', 'Receive']\nconst HISTORY_OPTIONS = [\n { value: 'all', title: 'All' },\n { value: 'received', title: 'Received' },\n { value: 'sent', title: 'Sent' },\n { value: 'exchange', title: 'Exchange' },\n]\nconst Wallet = ({ children }) => {\n const { tab } = useParams()\n const history = useHistory()\n const { pathname } = useLocation()\n const { isDarkTheme } = useSelector(state => state.theme)\n\n const currentTab = pathname.includes('/wallet/coins')\n ? 'Coins'\n : 'Collectibles'\n\n const [currentCoinTab, setCurrentCoinTab] = React.useState(COINS_TABS[0])\n const [historyFilter, setHistoryFilter] = React.useState(HISTORY_OPTIONS[0])\n\n React.useEffect(() => {\n if (pathname === '/wallet') {\n const lowerCasedTabs = TABS.map(el => el.toLowerCase())\n if (!tab || !lowerCasedTabs.length || !lowerCasedTabs.includes(tab)) {\n history.push(`/wallet/${lowerCasedTabs[0]}`)\n }\n }\n }, [history, tab, pathname])\n\n const renderContent = () => {\n if (pathname.includes('/artworks')) {\n return\n
\n \n \n history.push(`/wallet/${newTab.toLowerCase()}`)\n }\n isDarkTheme={isDarkTheme}\n />\n {currentTab === 'Coins' && (\n
\n {renderContent()}\n \n setHistoryFilter(option)}\n value={historyFilter}\n isDarkTheme={isDarkTheme}\n />\n setCurrentCoinTab(newTab)}\n isDarkTheme={isDarkTheme}\n />\n
\n )}\n \n {/*
\n \n
\n \n ))}\n \n )\n}\n\nexport default TxnList\n","import clsx from 'clsx'\nimport React from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { useSelector } from 'react-redux'\nimport dayjs from 'dayjs'\n\nimport { DashboardLayout, Icon, ThemeIcon } from '../../../components'\nimport { currencyFmt } from '../../../utils'\n\nimport './Transaction.scss'\n\nconst Transaction = ({ transaction }) => {\n const history = useHistory()\n const { coinId } = useParams()\n\n const { isDarkTheme } = useSelector(state => state.theme)\n\n return (\n \n {index === 0 && 'History'}\n {dayjs(date).format('MMM DD, YYYY')}\n
\n \n {txns.map(txn => (\n onTxnClick(txn)}\n >\n
\n ))}\n \n
\n \n
\n {renderTransactionType(txn.type)}
\n\n {/* {txn.value} {ticker} */}\n
\n\n {txn.sender ? 'From' : 'To'}:{' '}\n {txn.sender || txn.recipient}\n
\n \n
\n \n
\n Date
\n\n {dayjs(transaction.date).format('MMM DD, hh:mm a')}\n
\n\n
\n Status
\n\n {transaction.status}\n
\n\n \n {transaction.sender || transaction.recipient}\n \n
\n \n {transaction.sender ? 'Sender' : 'Recipient'}\n
\n\n
\n \n )\n}\n\nexport default Transaction\n","import React from 'react'\nimport { toast } from 'react-toastify'\nimport { Button, DashboardLayout, Icon, InputGroup, WsnToast } from '../../../components'\nimport { addNotification } from '../../../store/notifications'\nimport { currencyFmt } from '../../../utils'\nimport axios from 'axios'\n\nimport './SendCoin.scss'\nimport { useSelector, useDispatch } from 'react-redux'\nimport clsx from 'clsx'\n\nconst SendCoin = ({ onBackClick, unit }) => {\n const RATE = 357.32\n\n const dispatch = useDispatch()\n const { privateKey } = useSelector(state => state.user)\n const { isDarkTheme } = useSelector(state => state.theme)\n\n const [recipient, setRecipient] = React.useState('')\n const [amount, setAmount] = React.useState(0)\n const [unitToSend, setUnitToSend] = React.useState(unit)\n const [transactionFlag, setTransactionFlag] = React.useState(false)\n\n const renderConversion = () => {\n if (unitToSend === unit) {\n return `~${currencyFmt(amount * RATE)} USD`\n } else {\n return `~${amount / RATE} ${unit}`\n }\n }\n\n const executeTransaction = () => {\n setTransactionFlag(true)\n axios\n .post(`${process.env.REACT_APP_API_URL}/api/swap/sendTransaction`, {\n privateKey,\n receiverAddress: recipient,\n amountInEther: amount,\n })\n .then(function (response) {\n const heading = 'Transaction receipt!'\n const description = `Sent ${amount} ${unitToSend} to ${recipient}`\n \n dispatch(addNotification({ heading, description }))\n // url is optional\n toast(\n \n
\n Network Fee
\n\n {currencyFmt(transaction.networkFee)}\n
\n\n
\n Nonce
\n\n {transaction.nonce}\n
\n{renderConversion()}
\n {\n transactionFlag?\n \n
\n WallStreetNinja
\n\n Send only {unit}{' '}\n to this address. Sending any other coins may result in permanent\n loss.\n
\n\n copy(CODE)}\n />\n {!!navigator.share && (\n
\n \n )\n}\n\nexport default ReceiveCoin\n","import React from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\n\nimport { DashboardLayout, Icon, Loader, ThemeIcon } from '../../components'\nimport { currencyFmt } from '../../utils'\n\nimport Transaction from './Transaction'\nimport './Coin.scss'\nimport SendCoin from './SendCoin'\nimport ReceiveCoin from './ReceiveCoin'\nimport TxnList from '../../components/TxnList'\nimport { useSelector } from 'react-redux'\nimport clsx from 'clsx'\n\nconst Coin = () => {\n const history = useHistory()\n const { coinId, transactionId } = useParams()\n const { isDarkTheme } = useSelector(state => state.theme)\n\n const [coin, setCoin] = React.useState(null)\n const [transactions, setTransactions] = React.useState([])\n const [selectedTransaction, setSelectedTransaction] = React.useState(null)\n const [isLoading, setIsLoading] = React.useState(true)\n const [isSending, setIsSending] = React.useState(false)\n const [isReceiving, setIsReceiving] = React.useState(false)\n\n React.useEffect(() => {\n ;(async () => {\n try {\n setIsLoading(true)\n if (transactionId) {\n // fetch transaction\n setSelectedTransaction({\n id: 1,\n type: 'RECEIVED',\n value: 1.02,\n unit: 'BNB',\n createdAt: '2021-08-06T17:35:19.954Z',\n status: 'COMPLETED',\n sender: '0X10EDJ767SSGV7885GS5T124EGY6758F24E',\n recipient: null,\n networkFee: 0.23,\n nonce: 85,\n })\n } else {\n // fetch all transactions of this coin\n setCoin({\n id: coinId,\n name: 'Binance Coin',\n image: 'https://via.placeholder.com/32',\n value: 1.997696,\n unit: 'BNB',\n investedAmount: 535,\n transactions: [\n {\n id: 1,\n type: 'RECEIVED',\n sender: '0X10EDJ767SSGV7885GS5T124EGY6758F24E',\n value: 1.02,\n createdAt: '2021-08-06T17:35:19.954Z',\n },\n {\n id: 2,\n type: 'SENT',\n recipient: '0X10EDJ767SSGV7885GS5T124EGY6758F24E',\n value: 0.56,\n createdAt: '2021-08-06T17:35:19.954Z',\n },\n {\n id: 3,\n type: 'SMART_CONTRACT_CALL',\n recipient: '0X10EDJ767SSGV7885GS5T124EGY6758F24E',\n value: 0.0,\n createdAt: '2021-08-05T17:35:19.954Z',\n },\n ],\n })\n }\n } catch (err) {\n console.log(err)\n } finally {\n setIsLoading(false)\n }\n })()\n }, [coinId, transactionId])\n\n React.useEffect(() => {\n if (coin?.transactions?.length) {\n setTransactions(coin.transactions)\n }\n }, [coin])\n\n if (isLoading) return \n history.push(`/wallet/coins`)}\n />\n {coin.name}\n
\n \n setIsSending(true)}\n />\n setIsReceiving(true)}\n />\n
\n \n
\n \n {coin.value} {coin.unit}\n
\n \n {currencyFmt(coin.investedAmount)}\n \n\n setQuery(e.target.value)}\n isDarkTheme={isDarkTheme}\n />\n
\n \n {filteredList.map((conv, index) => (\n
\n \n )\n}\n\nexport default AllConversion\n","import clsx from 'clsx'\nimport React from 'react'\nimport { useSelector } from 'react-redux'\nimport TradingViewWidget from 'react-tradingview-widget'\n\nimport './Chart.scss'\n\nconst Chart = ({ conversion }) => {\n const { isDarkTheme } = useSelector(state => state.theme)\n\n const [data, setData] = React.useState([])\n const [lastPrice, setLastPrice] = React.useState(400.23)\n const [low, setLow] = React.useState(320.11)\n const [high, setHigh] = React.useState(412.86)\n\n React.useEffect(() => {\n setData([\n ['day', 'a', 'b', 'c', 'd'],\n ['Mon', 20, 28, 38, 45],\n ['Tue', 31, 38, 55, 66],\n ['Wed', 50, 55, 77, 80],\n ['Thu', 77, 77, 66, 50],\n ['Fri', 68, 66, 22, 15],\n ])\n setLastPrice(400.23)\n setLow(320.11)\n setHigh(412, 86)\n }, [])\n\n if (!data) return null\n return (\n \n handleAction(conv)}\n name={isInWatchlist(conv) ? 'close' : 'plus'}\n className=\"AllConversions__list-item-icon\"\n />\n
\n ))}\n \n {conv.from.unit + conv.to.unit}\n
\n\n {conv.from.name + ' / ' + conv.to.name}\n
\n\n
\n )\n}\n\nexport default Chart\n","import clsx from 'clsx'\nimport React from 'react'\nimport { useSelector } from 'react-redux'\n\nimport { DashboardLayout, Icon, Modal } from '../../components'\nimport { isDesktop } from '../../utils'\nimport AllConversions from './AllConversions'\nimport Chart from './Chart'\n\nimport './Watchlist.scss'\n\nconst Watchlist = () => {\n const { isDarkTheme } = useSelector(state => state.theme)\n const { watchlist } = useSelector(state => state.conversions)\n\n const [selectedConversion, setSelectedConversion] = React.useState({\n from: {\n name: 'Binance Coin',\n unit: 'BNB',\n change: 20.13,\n image: 'https://via.placeholder.com/32',\n },\n to: {\n name: 'TetherUS',\n unit: 'USDT',\n change: 0.03,\n image: 'https://via.placeholder.com/32',\n },\n value: 604.34,\n })\n const [isModalVisible, setIsModalVisible] = React.useState(false)\n\n if (isDesktop()) {\n return (\n \n
\n \n
\n \n \n {conversion.from.unit}/{conversion.to.unit}\n
\n\n Last Price: {lastPrice} Low: {low} High: {high}\n
\n \n
\n \n
\n \n
\n \n Watchlist\n
\n\n setIsModalVisible(true)}\n />\n
\n \n
\n \n \n\n \n {selectedConversion && (\n
\n \n {watchlist.map((conversion, index) => (\n setSelectedConversion(conversion)}\n >\n
\n ))}\n \n
\n \n
\n \n
\n \n {conversion.from.unit}\n {conversion.to.unit}\n
\n\n {conversion.value}\n
\n\n \n {conversion.from.name} /{' '}\n {conversion.to.name}\n \n \n \n {conversion.from.change > 0 && '+'}{' '}\n {conversion.from.change}%\n \n \n {conversion.to.change > 0 && '+'}{' '}\n {conversion.to.change}%\n \n \n
\n \n {watchlist.map(conversion => (\n
\n\n \n
\n ))}\n \n
\n \n
\n \n
\n \n {conversion.from.unit}\n {conversion.to.unit}\n
\n\n {conversion.value}\n
\n\n \n {conversion.from.name} / {conversion.to.name}\n \n \n \n {conversion.from.change > 0 && '+'}{' '}\n {conversion.from.change}%\n \n \n {conversion.to.change > 0 && '+'}{' '}\n {conversion.to.change}%\n \n \n
\n \r\n
\r\n \r\n WallStreetNinja Suite
\r\n\r\n The Unstoppable Finance Suite\r\n
\r\n\r\n
\r\n \r\n {/* The Wall Street Ninja Suite (WSNS) is an easy to use\r\n platform to access a range of decentralized finance\r\n products across multiple blockchain networks. This service\r\n is completely non-custodial and WSNS does not have access\r\n to your funds. */}\r\n Welcome to the WallStreetNinja Alpha Release version.
\r\n WARNING- This is an Alpha Release which may or may not
\r\n function as expected.
\r\n Use for testing purposes only at your own risk.\r\n
\r\n history.push('/register')}\r\n size=\"lg\"\r\n isDarkTheme={isDarkTheme}\r\n >\r\n Create new account\r\n \r\n history.push('/restore-account')}\r\n size=\"lg\"\r\n isDarkTheme={isDarkTheme}\r\n >\r\n Restore account\r\n \r\n
\r\n WallStreetNinja Suite
\r\nThe Unstoppable Finance Suite
\r\n\r\n
\r\n \r\n The Wall Street Ninja Suite (WSNS) is an easy to use platform to\r\n access a range of decentralized finance products across multiple\r\n blockchain networks. This service is completely non-custodial and\r\n WSNS does not have access to your funds.\r\n
\r\n\r\n history.push('/register')}\r\n >\r\n Create new account\r\n \r\n history.push('/restore-account')}\r\n >\r\n Restore account\r\n \r\n
\r\n \r\n
\r\n \r\n Welcome Back!
\r\n\r\n
\r\n \r\n Welcome Back!
\r\n\r\n
\r\n \r\n \r\n \r\n setPassword(e.target.value.trim())}\r\n isDarkTheme={isDarkTheme}\r\n />\r\n \r\n setConfirmPassword(e.target.value.trim())\r\n }\r\n isDarkTheme={isDarkTheme}\r\n />\r\n \r\n I wrote it down\r\n \r\n \r\n
\r\n \r\n \r\n Set an account password\r\n
\r\n\r\n The password you enter encrypts your private key and\r\n provides access to your funds. Please store your password\r\n safely.\r\n
\r\n\r\n For security reasons WSNS does not store your password or\r\n is able to restore it. Your password cannot be changed.\r\n
\r\nSet an account password
\r\n\r\n The password you enter encrypts your private key and provides\r\n access to your funds. Please store your password safely.\r\n
\r\n\r\n For security reasons WSNS does not store your password or is able\r\n to restore it. Your password cannot be changed.\r\n
\r\n \r\n\n onChange(e)}\n />\n \n Paste\n \n
\n )\n}\n\nexport default EnterKey\n","import React from 'react'\nimport { FileDrop } from 'react-file-drop'\n\nimport './UploadFile.scss'\n\nconst UploadFile = ({setKey}) => {\n const ref = React.useRef()\n\n const handleDrop = (files, event) => {\n ref.current = files\n const fr=new FileReader();\n fr.onload=function(){\n setKey(fr.result);\n }\n fr.readAsText(files[0]);\n }\n\n const onChange = (e) => {\n const files = e.target.files;\n console.log(ref)\n const fr=new FileReader();\n fr.onload=function(){\n setKey(fr.result);\n }\n fr.readAsText(files[0]);\n }\n\n return (\n \n console.log('onFrameDragEnter', event)}\n onFrameDragLeave={event => console.log('onFrameDragLeave', event)}\n onFrameDrop={event => console.log('onFrameDrop', event)}\n onDragOver={event => console.log('onDragOver', event)}\n onDragLeave={event => console.log('onDragLeave', event)}\n onDrop={(files, event) => handleDrop(files, event)}\n // onTargetClick={() => ref.current.click()}}\n >\n Drag and drop file or { onChange(e); }} />\n \n \n
\n )\n}\n\nexport default UploadFile\n","import React from 'react'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport axios from 'axios'\r\nimport { useHistory } from 'react-router-dom'\r\nimport { Button, HomeLayout, Input } from '../../components'\r\n\r\nimport EnterKey from './EnterKey'\r\nimport UploadFile from './UploadFile'\r\n\r\nimport './RestoreAccount.scss'\r\nimport { isDesktop } from '../../utils'\r\nimport clsx from 'clsx'\r\nimport { login } from '../../store/user'\r\n\r\nconst RestoreAccount = () => {\r\n const history = useHistory()\r\n const dispatch = useDispatch()\r\n const { isAuthenticated } = useSelector(state => state.user)\r\n const { isDarkTheme } = useSelector(state => state.theme)\r\n\r\n React.useEffect(() => {\r\n if (isAuthenticated) {\r\n history.push('/home')\r\n }\r\n }, [isAuthenticated, history])\r\n\r\n const [mode, setMode] = React.useState('type')\r\n const [password, setPassword] = React.useState('')\r\n const [key, setKey] = React.useState('')\r\n\r\n const pasteFromClipboard = async () => {\r\n try {\r\n let clipboardData = await navigator.clipboard.readText()\r\n setKey(clipboardData)\r\n } catch (err) {\r\n console.log('Failed to copy: ', err.message)\r\n }\r\n }\r\n\r\n const handleSubmit = async e => {\r\n try {\r\n e.preventDefault()\r\n let response = await axios.post(\r\n `${process.env.REACT_APP_API_URL}/api/auth/restoreAccount`,\r\n {\r\n downloadKey: key,\r\n password: password,\r\n }\r\n )\r\n\r\n if (response.status === 200) {\r\n dispatch(\r\n login({\r\n privateKey: response.data.privateKey,\r\n publicKey: response.data.publicKey,\r\n privateKeyEncrypted: key,\r\n })\r\n )\r\n history.push('/home')\r\n } else {\r\n console.log('Failed to restore: ', response.data.message)\r\n }\r\n } catch (err) {\r\n console.log('Failed to restore: ', err.message)\r\n }\r\n }\r\n\r\n if (isDesktop()) {\r\n return (\r\n \r\n \r\n setPassword(e.target.value)}\r\n isDarkTheme={isDarkTheme}\r\n />\r\n \r\n Restore\r\n \r\n \r\n
\r\n \r\n \r\n Restore Account\r\n
\r\n\r\n You will be able to restore your wallet by using a key file\r\n and password if you are a WSNS user.\r\n
\r\n\r\n \r\n setMode(prevMode =>\r\n prevMode === 'type' ? 'upload' : 'type'\r\n )\r\n }\r\n isDarkTheme={isDarkTheme}\r\n >\r\n {mode === 'type' ? 'Upload File' : 'Enter Key'}\r\n \r\n
\r\n \r\n {mode === 'type' ? (\r\n setKey(e.target.value)}\r\n isDarkTheme={isDarkTheme}\r\n onPaste={pasteFromClipboard}\r\n />\r\n ) : (\r\n
\r\n Restore Account
\r\n\r\n You will be able to restore your wallet by using a key file and\r\n password if you are a WSNS user.\r\n
\r\n\r\n \r\n setMode(prevMode =>\r\n prevMode === 'type' ? 'upload' : 'type'\r\n )\r\n }\r\n isDarkTheme={isDarkTheme}\r\n >\r\n {mode === 'type' ? 'Upload File' : 'Enter Key'}\r\n \r\n
\r\n \r\n \r\n \n downloadKey()}\n size=\"lg\"\n >\n Download Key\n \n
\n \n \n Download your key file\n
\n\n Please download your key file and store it safely in\n addition to your password.\n
\n- \n
- \n Access to your account is only possible using both the\n password and key file.\n \n
- \n For security reasons WSNS does not store your key file\n or is able to restore it. Only you have access to your\n account.\n \n
- \n Never share your key or password.\n \n
Download your key file
\n\n Please download your key file and store it safely in addition to\n your password.\n
\n- \n
- \n Access to your account is only possible using both the\n password and key file.\n \n
- \n For security reasons WSNS does not store your key file or is\n able to restore it. Only you have access to your account.\n \n
- \n Never share your key or password.\n \n
\n \n Welcome\n
\n
\n \n \n Welcome\n
WallStreetNinja Suite User!\n
\n \n
\n \n The Unstoppable Finance Suite\n
\n\n Welcome\n
WallStreetNinja\n
Suite User!\n
\n \n
\n \n The
\n Unstoppable\n
Finance Suite\n
\n \n history.goBack()}\n />\n {notification.heading}\n
\n {notification.description}
\n \n )\n}\n\nexport default Notification\n","import React from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport clsx from 'clsx'\nimport dayjs from 'dayjs'\n\nimport { Checkbox, DashboardLayout, Icon, Loader } from '../../components'\nimport './Notifications.scss'\nimport Notification from './Notification'\nimport { isDesktop } from '../../utils'\nimport { useDispatch, useSelector } from 'react-redux'\nimport {\n deleteNotifications,\n markAllRead,\n markRead,\n} from '../../store/notifications'\n\nconst Notifications = () => {\n const history = useHistory()\n const { notificationId } = useParams()\n const dispatch = useDispatch()\n const { isDarkTheme } = useSelector(state => state.theme)\n const { notifications } = useSelector(state => state.notifications)\n\n const [fetchedNotification, setFetchedNotification] = React.useState(null)\n const [selected, setSelected] = React.useState([])\n const [isLoading, setIsLoading] = React.useState(true)\n\n const [selectedNotification, setSelectedNotification] = React.useState()\n\n React.useEffect(() => {\n if (selectedNotification) {\n dispatch(markRead(selectedNotification.id))\n }\n }, [selectedNotification, dispatch])\n\n React.useEffect(() => {\n try {\n if (notificationId && !isDesktop()) {\n // fetch single notification\n const foundNotification = notifications.find(\n n => n.id === notificationId\n )\n setFetchedNotification(foundNotification)\n } else {\n // fetch all notifications\n // dispatch from here after fetching\n }\n } catch (err) {\n console.log(err)\n } finally {\n setIsLoading(false)\n }\n }, [notificationId])\n\n const toggleCheckbox = touchedId => {\n const index = selected.findIndex(id => id === touchedId)\n const updatedSelected = [...selected]\n if (~index) {\n updatedSelected.splice(index, 1)\n } else {\n updatedSelected.push(touchedId)\n }\n setSelected(updatedSelected)\n }\n\n if (isDesktop()) {\n return (\n\n dispatch(markAllRead())}\n />\n dispatch(deleteNotifications(selected))}\n />\n
\n \n
\n \n \n )}\n \n {selectedNotification ? (\n <>\n
\n \n {selectedNotification.heading}\n
\n\n {selectedNotification.description}\n
\n\n {selectedNotification.metadata}\n
\n \n ) : (\nNo notification selected.
\n )}\n\n {notifications.map(notification => (\n \n setSelectedNotification(notification)\n }\n >\n
\n ))}\n \n
\n \n \n toggleCheckbox(notification.id)\n }\n onClick={e => e.stopPropagation()}\n />\n {notification.description}\n
\n \n {dayjs(notification.createdAt).format(\n 'YYYY-MM-DD HH:MM'\n )}\n
\n \n history.goBack()}\n />\n
\n \n dispatch(markAllRead())}\n />\n dispatch(deleteNotifications(selected))}\n />\n
\n \n {notifications.map(notification => (\n \n history.push(`/notifications/${notification.id}`)\n }\n >\n
\n ))}\n \n \n )\n}\n\nexport default Notifications\n","export default __webpack_public_path__ + \"static/media/autofarm.0e89abbe.svg\";","export default __webpack_public_path__ + \"static/media/arweave.09ddac25.svg\";","export default __webpack_public_path__ + \"static/media/one-inch.48098f9e.svg\";","export default __webpack_public_path__ + \"static/media/dydx.42e3942f.svg\";","export default __webpack_public_path__ + \"static/media/unicrypt.177b3021.svg\";","export default __webpack_public_path__ + \"static/media/opensea.55e304eb.svg\";","import clsx from 'clsx'\nimport React from 'react'\nimport { useSelector } from 'react-redux'\n\nimport AutofarmImage from '../../assets/imgs/autofarm.svg'\nimport ArweaveImage from '../../assets/imgs/arweave.svg'\nimport OneInchImage from '../../assets/imgs/one-inch.svg'\nimport DYDXImage from '../../assets/imgs/dydx.svg'\nimport UnicryptImage from '../../assets/imgs/unicrypt.svg'\nimport OpenseaImage from '../../assets/imgs/opensea.svg'\nimport { DashboardLayout, Loader, Select } from '../../components'\nimport { isDesktop } from '../../utils'\n\nimport './Apps.scss'\n\nconst OPTIONS = [\n { value: 'history', title: 'History' },\n { value: 'new', title: 'New' },\n { value: 'exchanges', title: 'Exchanges' },\n { value: 'lending', title: 'Lending' },\n { value: 'skating', title: 'Skating' },\n { value: 'yield-farming', title: 'Yield Farming' },\n { value: 'all', title: 'All' },\n]\n\nconst Apps = () => {\n const { isDarkTheme } = useSelector(state => state.theme)\n\n const [apps, setApps] = React.useState([])\n const [isLoading, setIsLoading] = React.useState(true)\n const [type, setType] = React.useState(OPTIONS[0])\n\n React.useEffect(() => {\n ;(async () => {\n try {\n // fetch apps here\n setApps([\n {\n id: 1,\n name: 'Autofarm',\n image: AutofarmImage,\n description:\n 'Cross-chain yield aggregator that enables users to get the return assets from yield farming pools by simply staking in Autofarm vaults.',\n },\n {\n id: 2,\n name: 'Aave',\n image: ArweaveImage,\n description:\n 'Aave is an Open Source and Non-Custodial protocol to earn interest on deposits and borrow assets.',\n },\n {\n id: 3,\n name: '1inch',\n image: OneInchImage,\n description:\n 'DeFi / DEX aggregator with the most liquidity and the best rates on Ethereum and Binance Smart Chain',\n },\n {\n id: 4,\n name: 'dYdX',\n image: DYDXImage,\n description:\n 'Trade Perpetuals on the most powerful open trading platform, backed by @a16z, @polychain, and Three Arrows Capital.',\n },\n {\n id: 5,\n name: 'Unicrypt',\n image: UnicryptImage,\n description:\n 'Unicrypt provides an ever-growing suite of decentralized services. The objective is to bring value to the DeFi space as a whole by delivering',\n },\n {\n id: 6,\n name: 'OpenSea',\n image: OpenseaImage,\n description:\n 'A peer-to-peer marketplace for rare digital items and crypto collectibles. Buy, sell, auction, and discover CryptoKitties, Decentraland.',\n },\n ])\n } catch (err) {\n console.log(err)\n } finally {\n setIsLoading(false)\n }\n })()\n }, [])\n\n if (isDesktop()) {\n return (\n \n
\n \n toggleCheckbox(notification.id)}\n onClick={e => e.stopPropagation()}\n />\n {notification.description}\n
\n \n {dayjs(notification.createdAt).format('YYYY-MM-DD HH:MM')}\n
\n Dapps
\n\n
\n ))}\n \n
\n \n {app.name}\n
\n\n {app.description}\n
\nDapps
\n\n
\n ))}\n \n
\n \n {app.name}\n
\n\n {app.description}\n
\n\n setNetwork(selectedOption)}\n isDarkTheme={isDarkTheme}\n />\n downloadKey()}\n isDarkTheme={isDarkTheme}\n size=\"lg\"\n >\n Download\n \n \n navigator.clipboard.writeText(privateKeyEncrypted)\n }\n isDarkTheme={isDarkTheme}\n size=\"lg\"\n >\n Copy\n \n
\n \n Private Keys
\n\n Here you can export your Private Key from WSNS to with\n another wallet. Never share your key or password.\n
\n\n setPassword(e.target.value)}\n isDarkTheme={isDarkTheme}\n />\n showKeys()}\n >\n Show\n \n
\n Key File
\n\n WSNS Account key file includes all assets from your\n multi-chain wallet. You can either copy the string of\n symbols manually or click the Download button to get it.\n
\n\n \n dispatch(\n updateSetting({ setting: 'askPasswordOnTxn' })\n )\n }\n />\n
\n \n Ask password on transaction\n
\n\n \n dispatch(\n updateSetting({ setting: 'autoSessionTimeout' })\n )\n }\n />\n
\n \n Set session timeout to 15 mins\n
\nPrivate Keys
\n\n Here you can export your Private Key from WSNS to with another\n wallet. Never share your key or password.\n
\n\n setPassword(e.target.value)}\n isDarkTheme={isDarkTheme}\n />\n showKeys()}\n >\n Show\n \n
\n Key File
\n\n WSNS Account key file includes all assets from your multi-chain\n wallet. You can either copy the string of symbols manually or click\n the Download button to get it.\n
\n\n history.push('/artworks')}\n />\n
\n Collectible Detail
\n\n
\n \n 
\n
\n \n
\n \n {artwork.name}\n
\n\n {artwork.description}\n
\n\n Last Bid: {artwork.lastBid.value}\n {artwork.lastBid.unit}\n
\n \n
\n \n )\n}\n\nexport default Artwork\n","import clsx from 'clsx'\nimport React from 'react'\nimport { useSelector } from 'react-redux'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { DashboardLayout, Icon, Loader } from '../../components'\nimport { isDesktop } from '../../utils'\nimport Wallet from '../Wallet'\nimport Artwork from './Artwork'\n\nimport './Artworks.scss'\n\nconst Artworks = () => {\n const history = useHistory()\n const { artworkId } = useParams()\n const { isDarkTheme } = useSelector(state => state.theme)\n\n const [artworks, setArtworks] = React.useState([])\n const [isLoading, setIsLoading] = React.useState(true)\n\n React.useEffect(() => {\n ;(async () => {\n try {\n setArtworks([\n {\n id: 1,\n image: 'https://via.placeholder.com/100',\n name: 'Nyan Cat',\n },\n {\n id: 2,\n image: 'https://via.placeholder.com/100',\n name: 'Murukami',\n },\n {\n id: 3,\n image: 'https://via.placeholder.com/100',\n name: 'Cryptopunk',\n },\n {\n id: 4,\n image: 'https://via.placeholder.com/100',\n name: 'Crypto kitty',\n },\n ])\n } catch (err) {\n console.log(err)\n } finally {\n setIsLoading(false)\n }\n })()\n }, [])\n\n if (isDesktop()) {\n if (isLoading) {\n return (\n \n Last Bid -{' '}\n \n {artwork.lastBid.value} {artwork.lastBid.unit}\n \n
\n \n {artwork.name}
\n{artwork.description}
\n\n {artwork.name}\n
\n \n ))}\n \n\n {artworks.map(artwork => (\n history.push(`/artworks/${artwork.id}`)}\n >\n
\n ))}\n \n \n )\n}\n\nexport default Artworks\n","import clsx from 'clsx'\nimport React from 'react'\nimport { useSelector } from 'react-redux'\n\nimport './CoinsList.scss'\n\nconst CoinsList = ({ coins, onCoinSelect, inPopover }) => {\n const { isDarkTheme } = useSelector(state => state.theme)\n\n return (\n {artwork.name}
\n\n
\n \n {label}
\n \n
\n \n {name}\n {!!onChange ? (\n {valueInUsd}\n ) : (\n {valueInUsd}\n )}\n
\n \n {\n onCoinSelect(coin)\n setIsCoinPopoverOpen(false)\n }}\n inPopover={true}\n />\n }\n onClickOutside={() => setIsCoinPopoverOpen(false)}\n >\n \n isDesktop()\n ? setIsCoinPopoverOpen(true)\n : setIsCoinListOpen(true)\n }\n >\n {!!image && (\n
\n \n {!!onChange ? (\n \n
\n ) : (\n {getConversion()}\n )}\n \n
\n \n This token is not Whitelisted on WSNS app. By adding it as a custom\n token, you confirm that all further interaction with it are at your\n own risk\n
\n \n\n
\n {!isLimitOrder && (\n <>\n \n Advanced Settings\n
\n\n setIsPartialFill(!isPartialFill)}\n />\n
\n \n Partial Fill{' '}\n
\n setIsCHIToken(!isCHIToken)}\n />\n
\n \n CHI Token{' '}\n
\n setIsOptimizedRouter(!isOptimizedRouter)}\n />\n
\n \n Optimized Router{' '}\n
\n \n setShowTolerenceOptions(!showTolerenceOptions)\n }\n >\n {slippageTolerence?.title || 'NA'}\n
\n {showTolerenceOptions && (\n \n Slippage Tolerence\n
\n\n setShowGasPriceOptions(!showGasPriceOptions)}\n >\n {gasPrice?.title || 'NA'}\n
\n {showGasPriceOptions && (\n Gas Price
\n\n setShowCustomTokens(!showCustomTokens)}\n >\n {customTokens.length}\n
\n {showCustomTokens && (\n \n Custom Tokens{' '}\n
\n {customTokens.map(token => (\n
\n )}\n \n
\n ))}\n \n \n Reset\n \n \n Close\n \n setShowTokenForm(false)}\n heading=\"Add Custom Token\"\n >\n
\n \n )\n}\n\nexport default Settings\n","import React from 'react'\nimport axios from 'axios'\nimport { toast } from 'react-toastify'\n\nimport {\n Button,\n DashboardLayout,\n Icon,\n InputGroup,\n Loader,\n Modal,\n Select,\n Tabs,\n WsnToast\n} from '../../components'\nimport Coin from './Coin'\n\nimport './Exchange.scss'\nimport Settings from './Settings'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { fetchAllCoins } from '../../store/coins'\nimport { addNotification } from '../../store/notifications'\nimport { isDesktop } from '../../utils'\nimport clsx from 'clsx'\nimport { Popover } from 'react-tiny-popover'\nimport CustomToken from './CustomToken'\n\nconst Exchange = () => {\n const TABS = ['Market']//['Market', 'Limit']\n const TIME_OPTIONS = [\n { title: '10 minutes', value: 10 },\n { title: '1 Hour', value: 60 },\n { title: '3 Days', value: 60 * 24 * 3 },\n ]\n const isDesktopScreen = isDesktop()\n\n const dispatch = useDispatch()\n const { allCoins, isLoading } = useSelector(state => state.coins)\n const { isDarkTheme } = useSelector(state => state.theme)\n const { privateKey } = useSelector(state => state.user)\n\n React.useEffect(() => {\n if (allCoins.length) {\n setCoins(allCoins)\n setFrom(allCoins[0])\n setTo(allCoins[1])\n setTransactionCost(2.6)\n getQuote()\n } else {\n dispatch(fetchAllCoins())\n }\n }, [allCoins, allCoins.length, dispatch])\n\n const [currentTab, setCurrentTab] = React.useState(TABS[0])\n const [isSettingsVisible, setIsSettingsVisible] = React.useState(false)\n const [coins, setCoins] = React.useState([])\n const [isTokenPopoverOpen, setIsTokenPopoverOpen] = React.useState(false)\n const [isTokenModalVisible, setIsTokenModalVisible] = React.useState(false)\n const [tokenAddress, setTokenAddress] = React.useState('')\n\n const [transactionFlag, setTransactionFlag] = React.useState(false)\n const [from, setFrom] = React.useState({})\n const [to, setTo] = React.useState({})\n const [value, setValue] = React.useState(1)\n const [transactionCost, setTransactionCost] = React.useState(0)\n const [limitPrice, setLimitPrice] = React.useState(16.5)\n const [expiry, setExpiry] = React.useState(TIME_OPTIONS[0])\n const [isPartialFill, setIsPartialFill] = React.useState(false)\n const [isCHIToken, setIsCHIToken] = React.useState(false)\n const [isOptimizedRouter, setIsOptimizedRouter] = React.useState(false)\n const [slippageTolerence, setSlippageTolerence] = React.useState(null)\n const [gasPrice, setGasPrice] = React.useState(null)\n const [customTokens, setCustomTokens] = React.useState([\n {\n id: 1,\n name: 'TOMOChain',\n unit: 'TOMO',\n value: 1500,\n image: 'https://via.placeholder.com/32',\n },\n ])\n\n const getQuote = async () => {\n const response = await axios.get(`https://api.1inch.exchange/v3.0/56/quote?fromTokenAddress=${from['address']}&toTokenAddress=${to['address']}&amount=${value * 10 ** from['decimals']}`)\n setTransactionCost(response.data.estimatedGas)\n }\n\n const swapTokens = async () => {\n // console.log('here')\n // console.log(from['address'])\n // console.log(to['address'])\n // console.log(from['decimals'])\n // console.log(privateKey)\n setTransactionFlag(true)\n const fromToken = from['unit']\n const toToken = to['unit']\n try{\n let response = await axios.post(\n `${process.env.REACT_APP_API_URL}/api/swap/swap`,\n {\n privateKey: privateKey,\n fromAddress: from['address'],\n toAddress: to['address'],\n amount: value * 10 ** from['decimals'],\n value: value\n }\n )\n console.log(response)\n const heading = 'Transaction receipt!'\n const description = `Swap ${fromToken} to ${toToken}`\n \n dispatch(addNotification({ heading, description }))\n // url is optional\n toast(\n \n
\n Sell Price
\n\n 1 {from.unit} ={' '}\n \n {(from.valueInUsd/to.valueInUsd).toFixed(6)}\n {' '}\n {to.unit}\n
\n\n {from.valueInUsd}\n
\n \n
\n Buy Price
\n\n 1 {to.unit} ={' '}\n \n {(to.valueInUsd/from.valueInUsd).toFixed(6)}\n {' '}\n {from.unit}\n
\n\n {to.valueInUsd}\n
\n \n
\n \n Transaction Cost\n
\n\n {transactionCost}\n
\n\n {(from.value / from.valueInUsd) * transactionCost}\n
\n \n )\n } else {\n // limit\n return (\n <>\n \n
\n Rate
\n\n 1 {from.unit} ={' '}\n \n {to.value}\n {' '}\n {to.unit}\n
\n\n
\n \n )\n }\n }\n\n const renderCTAs = () => {\n if (currentTab === TABS[0]) {\n // market\n if(transactionFlag){\n return (\n Inversion Rate
\n\n 1 {to.unit} ={' '}\n \n {from.value}\n {' '}\n {from.unit}\n
\n\n setCurrentTab(newTab)}\n isDarkTheme={isDarkTheme}\n />\n
\n \n \n setIsTokenPopoverOpen(false)\n }\n content={\n console.log('Add token!')}\n />\n }\n >\n \n isDesktop()\n ? setIsTokenPopoverOpen(\n !isTokenPopoverOpen\n )\n : setIsTokenModalVisible(true)\n }\n />\n \n setIsSettingsVisible(true)}\n />\n
\n \n setLimitPrice(e.target.value)}\n type=\"number\"\n label=\"Price\"\n className=\"Exchange__main-limit-input\"\n right={from.unit}\n isDarkTheme={isDarkTheme}\n />\n
\n )}\n \n \n setExpiry(selectedOption)\n }\n options={TIME_OPTIONS}\n isDarkTheme={isDarkTheme}\n />\n
\n \n Expires In\n
\n {renderInfo()}
\n \n {renderCTAs()}\n {renderContent()}
\n )}\n \n