├── .gitignore ├── LICENSE ├── Practice Submissions ├── README.md └── bangpateng │ └── challenge3 │ ├── .eslintrc.js │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── challenge3.md │ ├── eslint.config.mjs │ ├── next.config.js │ ├── next.config.ts │ ├── package-lock.json │ ├── package.json │ ├── pages │ ├── _app.tsx │ └── index.tsx │ ├── postcss.config.mjs │ ├── public │ ├── Animated.gif │ └── favicon.ico │ ├── src │ ├── components │ │ ├── Footer.tsx │ │ ├── HeroSection.tsx │ │ └── WalletGenerator.tsx │ └── styles │ │ └── globals.css │ ├── tailwind.config.js │ └── tsconfig.json ├── README.md ├── doc ├── Using Arweave Academy Github.md └── image │ ├── Clone tutorial_fork_1.png │ ├── Clone tutorial_fork_2.png │ ├── Clone tutorial_fork_3.png │ ├── PR tutorial_fork_1.png │ ├── PR tutorial_fork_2.png │ ├── PR tutorial_fork_3.png │ ├── PR tutorial_submission_1.png │ ├── PR tutorial_submission_2.png │ ├── PR tutorial_submission_3.png │ ├── PR tutorial_submission_4.png │ ├── PR tutorial_submission_5.png │ ├── Upsteam tutorial_fork_1.png │ ├── push tutorial_fork_1.png │ └── school of dumdum.jpg ├── practice ├── challenge1.md ├── challenge2.md ├── challenge3.md └── challenge4.md ├── submissions └── Archive Announcement.md └── template.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Arweave Oasis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Practice Submissions/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ArweaveOasis/Arweave-Academy/2e95a3e9d01c825314b476eb31b2ee8b8c2e62e7/Practice Submissions/README.md -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | '@typescript-eslint/no-unused-vars': 'off', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Bang Pateng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/README.md: -------------------------------------------------------------------------------- 1 | # Bang Pateng App Arweare 2 | A wallet generator for Arweave, built using Next.js. 3 | 4 | ![screenshoot1](https://github.com/user-attachments/assets/6f9a7e0b-f191-4cc5-8ed7-891981c1bfc5) 5 | 6 | #### Website Link : [BG Pateng V1 App](https://bang-pateng-app-arweare_arlink.arweave.net/) 7 | 8 | ## 🚀 1. Getting Started 9 | 10 | 1. **Clone this repository**: 11 | 12 | ``` 13 | git clone https://github.com/bangpateng/Bang-Pateng-App-Arweare.git 14 | cd Bang-Pateng-App-Arweare 15 | ``` 16 | 17 | 2. **Install dependencies**: 18 | 19 | ``` 20 | npm install 21 | ``` 22 | 23 | Run the application locally: 24 | 25 | ``` 26 | npm run dev 27 | ``` 28 | 29 | Open your browser and visit `http://localhost:3000` 30 | 31 | ## 🚀 2. Uploading to Your Own GitHub Repository 32 | Follow these steps to upload this project to your own GitHub repository: 33 | 34 | #### Step 1: Create a New Repository 35 | - Go to GitHub and log in to your account. 36 | - Click on the + (plus icon) in the top right corner and select "New repository". 37 | - Enter a repository name (e.g., My-Arweave-Wallet). 38 | - Choose visibility (Public/Private) and click "Create repository". 39 | 40 | #### Step 2: Initialize Git in Your Local Project 41 | If you haven't already initialized Git in your project, run the following commands: 42 | 43 | ``` 44 | git init 45 | ``` 46 | 47 | #### Step 3: Link Your Repository 48 | Add your GitHub repository URL as the remote origin: 49 | 50 | ``` 51 | git remote add origin https://github.com/your-username/My-Arweave-Wallet.git 52 | ``` 53 | 54 | Replace your-username with your GitHub username and My-Arweave-Wallet with your repo name. 55 | 56 | #### Step 4: Add and Commit Files 57 | Add all project files to Git and commit the changes: 58 | 59 | ``` 60 | git add . 61 | git commit -m "Initial commit" 62 | ``` 63 | 64 | #### Step 5: Push to GitHub 65 | Upload your project to GitHub by pushing the committed files: 66 | 67 | ``` 68 | git branch -M main 69 | git push -u origin main 70 | ``` 71 | 72 | If you are using a different branch name, replace main with your branch name. 73 | 74 | #### Step 6: Verify Upload 75 | 76 | - Go to your GitHub repository link and refresh the page. 77 | - You should see all your project files uploaded. 78 | 79 | #### Step 7: Future Updates 80 | When you make changes and want to update your repository, run: 81 | 82 | ``` 83 | git add . 84 | git commit -m "Update project with new features" 85 | git push origin main 86 | ``` 87 | 88 | ## 🚀 3. Deploying to ArLink 89 | You can deploy this project to Arweave using ArLink by following these steps: 90 | 91 | 1. **Configure Next.js for Static Export** 92 | 93 | Ensure that your next.config.js file contains the following configuration: 94 | 95 | ``` 96 | /** @type {import('next').NextConfig} */ 97 | const nextConfig = { 98 | reactStrictMode: true, 99 | assetPrefix: "./", 100 | output: 'export', // Enables static HTML export 101 | images: { 102 | unoptimized: true // Required for static export 103 | } 104 | }; 105 | 106 | module.exports = nextConfig; 107 | ``` 108 | 109 | 2. **Build the Project Locally** 110 | 111 | Before deploying, you can test the build process locally with: 112 | 113 | ``` 114 | npm run build 115 | ``` 116 | 117 | 3. **Deploying via ArLink Dashboard** 118 | 119 | Follow these steps to deploy your project to Arweave using ArLink: 120 | 121 | - Go to [ArLink Deployment](https://arlink.arweave.net/) 122 | - Connect your [Arweave wallet](https://www.arconnect.io/download). 123 | - Click "New Project" and enter your project details. 124 | - In the repository URL, enter your GitHub repository link: `https://github.com/your-username/My-Arweave-Wallet.git` 125 | - Set the Branch to main. 126 | - Set the Root Directory to `./` 127 | - Under Build And Output Settings, use the following values: 128 | 129 | **Install command**: `npm install` 130 | **Build command**: `npm run build` 131 | 132 | - Output directory: `./out` 133 | - Click Deploy now to start the deployment process. 134 | - Once deployed, you will get a public URL where your application is accessible. 135 | 136 | 4. **Accessing the Deployed Site** 137 | 138 | After deployment, your app will be accessible at: 139 | 140 | ``` 141 | https://your-link.arlink.ar.io/ 142 | ``` 143 | 144 | ![GitHub stars](https://img.shields.io/github/stars/bangpateng/Bang-Pateng-App-Arweare?style=social) 145 | ![GitHub forks](https://img.shields.io/github/forks/bangpateng/Bang-Pateng-App-Arweare?style=social) -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/challenge3.md: -------------------------------------------------------------------------------- 1 | ### Frontend Challenge 3: Client-Side Rendering 2 | 3 | - **Decription** 4 | Build a simple web app that renders on the client and deploy it to Arweave. 5 | - **Why?** 6 | Because it fits Arweave’s permanent storage model, and AR.IO gateways can’t execute server-side code. Use CSR for interactive apps that change often. 7 | - **Tools** 8 | Arx, Next.js, Nuxt, SvelteKit, etc. -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, // Sesuaikan dengan kebutuhan proyek 4 | assetPrefix: "./", 5 | output: 'export', // Enables static HTML export 6 | images: { 7 | unoptimized: true // Required for static export 8 | } 9 | }; 10 | 11 | module.exports = nextConfig; 12 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | reactStrictMode: true, 6 | }; 7 | 8 | export default nextConfig; 9 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend-challenge3", 3 | "version": "0.1.0", 4 | "description": "Frontend Challenge 3 - Client-Side Rendering with Next.js", 5 | "private": true, 6 | "scripts": { 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint", 11 | "format": "prettier --write ." 12 | }, 13 | "dependencies": { 14 | "arconnect": "^1.0.4", 15 | "arweave": "^1.15.5", 16 | "autoprefixer": "^10.4.20", 17 | "axios": "^1.7.9", 18 | "bip39": "^3.1.0", 19 | "framer-motion": "^12.0.1", 20 | "next": "15.1.5", 21 | "react": "^19.0.0", 22 | "react-dom": "^19.0.0", 23 | "react-icons": "^5.4.0", 24 | "styled-components": "^6.1.14" 25 | }, 26 | "devDependencies": { 27 | "@eslint/eslintrc": "^3", 28 | "@types/node": "^20", 29 | "@types/react": "^19", 30 | "@types/react-dom": "^19", 31 | "eslint": "^9", 32 | "eslint-config-next": "15.1.5", 33 | "postcss": "^8.5.1", 34 | "tailwindcss": "^3.4.17", 35 | "typescript": "^5", 36 | "prettier": "^3.2.5" 37 | }, 38 | "browserslist": [ 39 | "last 2 versions", 40 | "> 1%", 41 | "not dead" 42 | ], 43 | "keywords": [ 44 | "frontend", 45 | "nextjs", 46 | "tailwindcss", 47 | "typescript", 48 | "arweave", 49 | "client-side-rendering" 50 | ], 51 | "author": "Bang Pateng", 52 | "license": "MIT" 53 | } 54 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css'; 2 | import type { AppProps } from 'next/app'; 3 | import Head from 'next/head'; 4 | 5 | function MyApp({ Component, pageProps }: AppProps) { 6 | return ( 7 | <> 8 | 9 | BG Pateng V1 Web App 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default MyApp; 19 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import HeroSection from '@/components/HeroSection'; 2 | import Footer from '@/components/Footer'; 3 | import WalletGenerator from '@/components/WalletGenerator'; 4 | 5 | export default function Home() { 6 | return ( 7 |
8 | 9 | 10 |
11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/public/Animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ArweaveOasis/Arweave-Academy/2e95a3e9d01c825314b476eb31b2ee8b8c2e62e7/Practice Submissions/bangpateng/challenge3/public/Animated.gif -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ArweaveOasis/Arweave-Academy/2e95a3e9d01c825314b476eb31b2ee8b8c2e62e7/Practice Submissions/bangpateng/challenge3/public/favicon.ico -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/src/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | const Footer = () => { 2 | return ( 3 | 6 | ); 7 | }; 8 | 9 | export default Footer; 10 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/src/components/HeroSection.tsx: -------------------------------------------------------------------------------- 1 | const HeroSection = () => { 2 | return ( 3 |
4 |

BG PATENG V1 WEB APP

5 |

6 | Generator Arweare Wallet 7 |

8 |
9 | ); 10 | }; 11 | 12 | export default HeroSection; 13 | 14 | 15 | -------------------------------------------------------------------------------- /Practice Submissions/bangpateng/challenge3/src/components/WalletGenerator.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import Arweave from 'arweave'; 3 | import * as bip39 from 'bip39'; 4 | import { FaTwitter, FaTelegram, FaYoutube, FaGithub, FaWallet } from 'react-icons/fa'; 5 | 6 | const WalletGenerator = () => { 7 | const [wallet, setWallet] = useState<{ address: string; phrase: string } | null>(null); 8 | const [copied, setCopied] = useState(false); 9 | 10 | const generateWallet = async () => { 11 | try { 12 | const arweave = Arweave.init({ 13 | host: 'arweave.net', 14 | port: 443, 15 | protocol: 'https', 16 | }); 17 | 18 | const mnemonic = bip39.generateMnemonic(); 19 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 20 | const seed = bip39.mnemonicToSeedSync(mnemonic).toString('hex'); // Suppressed unused warning 21 | const key = await arweave.wallets.generate(); 22 | const address = await arweave.wallets.jwkToAddress(key); 23 | 24 | setWallet({ 25 | address, 26 | phrase: mnemonic, 27 | }); 28 | setCopied(false); 29 | } catch (error) { 30 | console.error('Error generating wallet:', error); 31 | alert('Failed to generate wallet. Please try again.'); 32 | } 33 | }; 34 | 35 | const copyToClipboard = () => { 36 | if (wallet) { 37 | navigator.clipboard.writeText(wallet.phrase); 38 | setCopied(true); 39 | setTimeout(() => setCopied(false), 2000); 40 | } 41 | }; 42 | 43 | return ( 44 |
45 |
46 | 63 | Install Wallet 64 | 65 | 66 |
67 |

Address:

68 | 74 |
75 | 76 |
77 |

Seed Phrase:

78 |