refacto assets management , turbo and scss

common/lib/common/networks.ts

@@ -45,7 +45,10 @@ const networks = (() => {
   const getChainName = (chainId: chainIdish): string | undefined => get(chainId)?.chainName;
   const getMainnetName = (chainId: chainIdish) =>
     isTestnet(chainId) ? getChainName(getLinkedMainnet(chainId)) : getChainName(chainId);
-  const getIconName = (chainId: chainIdish) => `icon-${getMainnetName(chainId)}.png`;
+  const getIconName = (chainId: chainIdish) => {
+    const chainName = getMainnetName(chainId);
+    return chainName ? `icon-${chainName}.png` : "";
+  };
 
   // console.log("networks.getAll", getAll());
   // console.log("networks.getAllSameType mainnet", getAllSameType(1));

config/src/testnets.handlebars.json

@@ -99,17 +99,17 @@
     "create": true
   },
   {
-    "chainId": 999,
-    "chainName": "zora-goerli",
-    "rpcUrls": ["https://testnet.rpc.zora.energy"],
+    "chainId": 999999999,
+    "chainName": "zora-sepolia",
+    "rpcUrls": ["https://sepolia.rpc.zora.energy"],
     "nativeCurrency": {
       "name": "Zora Ether",
       "symbol": "zETH",
       "decimals": 18
     },
-    "blockExplorerUrls": ["https://testnet.explorer.zora.energy"],
+    "blockExplorerUrls": ["https://sepolia.explorer.zora.energy/"],
     "linkedMainnet": 7777777,
-    "linkedLayer1": 5,
+    "linkedLayer1": 11155111,
     "create": true
   },
   {
@@ -233,19 +233,7 @@
     "create": true,
     "linkedMainnet": 40
   },
-  {
-    "chainId": 31337,
-    "chainName": "local",
-    "rpcUrls": ["http://127.0.0.1:8545"],
-    "nativeCurrency": {
-      "name": "Ether",
-      "symbol": "ETH",
-      "decimals": 18
-    },
-    "blockExplorerUrls": ["http://localhost/explorer"],
-    "linkedMainnet": 31337,
-    "create": true
-  },
+
   {
     "chainId": 1351057110,
     "chainName": "chaos-testnet",
@@ -259,5 +247,18 @@
     "eip1559": false,
     "create": true,
     "linkedMainnet": 344106930
+  },
+  {
+    "chainId": 31337,
+    "chainName": "local",
+    "rpcUrls": ["http://127.0.0.1:8545"],
+    "nativeCurrency": {
+      "name": "Ether",
+      "symbol": "ETH",
+      "decimals": 18
+    },
+    "blockExplorerUrls": ["http://localhost/explorer"],
+    "linkedMainnet": 31337,
+    "create": true
   }
 ]

contracts/remappings.txt

@@ -3,4 +3,4 @@ ds-test/=lib/forge-std/lib/ds-test/src/
 @openzeppelin/contracts/=lib/openzeppelin-contracts/contracts/
 @openzeppelin/contracts-upgradeable/=lib/openzeppelin-contracts-upgradeable/contracts/
 @opennfts/contracts/=lib/OpenNFTs/contracts/
-@forge-deploy-lite/=lib/forge-deploy-lite/script/
+@forge-deploy-lite/=lib/forge-deploy-lite/src/

gulp/.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.env*
+.env*
+web/dapp

gulp/gulpfile.js

@@ -22,9 +22,9 @@ if (!process.env.ENVIR) {
 }
 var production = process.env.ENVIR == "PROD";
 
-// Clean assets
+// Clean lib
 function clean() {
-  return del(["../web/dapp/", ".../wordpress/plugins/kredeum-nfts/lib/"], { force: true });
+  return del(["web/dapp/**/*"], { force: true });
 }
 
 function swallow(err) {
@@ -35,7 +35,7 @@ function swallow(err) {
 // Optimize Images
 function images() {
   return gulp
-    .src("./images/**/*")
+    .src("images/**/*")
     .pipe(
       imagemin([
         imagemin.gifsicle({ interlaced: true }),
@@ -51,45 +51,43 @@ function images() {
         }),
       ])
     )
-    .pipe(gulp.dest("../web/dapp/assets/images"))
-    .pipe(gulp.dest("../wordpress/plugins/kredeum-nfts/lib/images"));
+    .pipe(gulp.dest("web/dapp/assets/images"));
 }
 
 // CSS task
 function css() {
   return gulp
-    .src("./scss/**/*.scss")
+    .src("scss/**/*.scss")
     .pipe(!production ? sourcemaps.init() : noop())
     .pipe(plumber())
     .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError, swallow))
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(sourcemaps.write(".", { sourceRoot: "css-source" }))
-    .pipe(gulp.dest("../web/dapp/assets/css/"))
-    .pipe(gulp.dest("../wordpress/plugins/kredeum-nfts/lib/css/"));
+    .pipe(gulp.dest("web/dapp/assets/css/"));
 }
 
 function fonts() {
-  return gulp.src(["./fonts/**/*"]).pipe(gulp.dest("../web/dapp/assets/fonts/")).pipe(gulp.dest("../wordpress/plugins/kredeum-nfts/lib/fonts/"));
+  return gulp.src(["fonts/**/*"]).pipe(gulp.dest("web/dapp/assets/fonts/"));
 }
 
 // Copy html
 function htmls() {
-  return gulp.src(["./html/**/*"]).pipe(gulp.dest("../web/dapp"));
+  return gulp.src(["html/*"]).pipe(gulp.dest("web/dapp"));
 }
 
 // Transpile, concatenate and minify scripts
 function scripts() {
   return gulp
-    .src(["./js/**/*"])
+    .src(["js/**/*"])
     .pipe(plumber())
     .pipe(!production ? uglify().on("error", swallow) : noop())
-    .pipe(gulp.dest("../web/dapp/assets/js/"));
+    .pipe(gulp.dest("web/dapp/assets/js/"));
 }
 
 // Watch files
 function watchFiles() {
-  gulp.watch("./scss/**/*", css);
-  gulp.watch("./js/**/*", gulp.series(scripts));
+  gulp.watch("scss/**/*", css);
+  gulp.watch("js/**/*", gulp.series(scripts));
 }
 
 const build = gulp.series(clean, gulp.parallel(css, images, scripts, htmls), fonts);

gulp/html/index.html

@@ -15,8 +15,8 @@
     <meta name="theme-color" content="#ffffff" />
 
     <link rel="stylesheet" href="./assets/css/front.css" />
-    <link rel="stylesheet" href="./assets/kredeum-nfts.css" />
-    <script defer src="./assets/kredeum-nfts.js"></script>
+    <link rel="stylesheet" href="./assets/js/kredeum-nfts.css" />
+    <script defer src="./assets/js/kredeum-nfts.js"></script>
   </head>
 
   <body class="kredeum">

gulp/mockups/connexion.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kredeum dapp</title>
+    <meta name="description" content="The decentralized NFT platform" />
+    <link rel="stylesheet" href="assets/css/front.css" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff"/>
+  </head>
+
+  <body>
+    <div id="kredeum-dapp">
+      <div id="kredeum-nfts">
+        <nav class="nav-krd" role="navigation">
+          <div class="logo"><img src="assets/images/logo-kredeum.svg" alt="Logo Kredeum" /></div>
+
+          <div class="menu">
+            <input id="burger" type="checkbox" />
+
+            <label for="burger">
+              <span></span>
+              <span></span>
+              <span></span>
+            </label>
+
+            <div class="nav">
+              <ul>
+                <li class="active">
+                  <a href=""><i class="fas fa-columns"></i></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <a class="discord-link" href="https://discord.gg/Vz5AyU2Nfx" target="_blank" title="Discord Kredem"><i class="fas fa-discord"></i></a>
+        </nav>
+
+        <main class="main-krd" role="main">
+          <section class="content">
+            <header>
+              <h1>My NFT wallet</h1>
+              <a href="#create" class="btn btn-default" title="Create"><i class="fas fa-plus fa-left"></i>Create</a>
+
+              <div class="row alignbottom">
+                <div class="col col-xs-12 col-sm-3">
+                  <span class="label"
+                    >Connect <a class="info-button" href="" target="_blank"><i class="fas fa-info-circle"></i></a
+                  ></span>
+                  <a href="" class="btn btn-light btn-metamask" title="Connect to Metamask">Connect to Metamask</a>
+                </div>
+              </div>
+            </header>
+
+            <div class="card-krd">
+              <p>No NFTs ✌️</p>
+            </div>
+          </section>
+        </main>
+
+        <!-- Modal create -->
+        <div id="create" class="modal-window">
+          <div>
+            <div class="modal-content">
+              <a href="#" title="Close" class="modal-close"><i class="fa fa-times"></i></a>
+
+              <div class="modal-body">
+                <div class="titre"><i class="fas fa-plus fa-left c-green"></i>What do you want to do ?</div>
+
+                <div class="txtcenter">
+                  <a href="#create-nft" class="btn btn-default" title="Create NFT">Create NFT</a>
+                  <span class="or">Or</span>
+                  <a href="#add-collection" class="btn btn-second" title="Add a new collection">Add a new collection</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Modal create NFT -->
+        <div id="create-nft" class="modal-window">
+          <div>
+            <div class="modal-content">
+              <a href="#" title="Close" class="modal-close"><i class="fa fa-times"></i></a>
+
+              <div class="modal-body">
+                <div class="titre"><i class="fas fa-plus fa-left c-green"></i>Create NFT</div>
+
+                <form method="POST" action="" enctype="multipart/form-data">
+                  <div class="section">
+                    <div class="box-file"><input type="file" id="file" name="file" /></div>
+                    <div class="media media-photo mt-20"><img src="https://picsum.photos/130" /></div>
+                  </div>
+
+                  <div class="section">
+                    <span class="label label-big">Media type</span>
+                    <div class="box-fields">
+                      <input class="box-field" id="create-type-video" name="media-type" type="checkbox" value="Video" />
+                      <label class="field" for="create-type-video"><i class="fas fa-play"></i>Video</label>
+
+                      <input class="box-field" id="create-type-picture" name="media-type" type="checkbox" value="Picture" />
+                      <label class="field" for="create-type-picture"><i class="fas fa-image"></i>Picture</label>
+
+                      <input class="box-field" id="create-type-texte" name="media-type" type="checkbox" value="Texte" />
+                      <label class="field" for="create-type-texte"><i class="fas fa-file-alt"></i>Texte</label>
+
+                      <input class="box-field" id="create-type-music" name="media-type" type="checkbox" value="Music" />
+                      <label class="field" for="create-type-music"><i class="fas fa-music"></i>Music</label>
+
+                      <input class="box-field" id="create-type-web" name="media-type" type="checkbox" value="Web" />
+                      <label class="field" for="create-type-web"><i class="fas fa-code"></i>Web</label>
+                    </div>
+                  </div>
+
+                  <div class="section">
+                    <span class="label label-big">Add to an existing collection ?</span>
+                    <div>
+                      <select class="custom">
+                        <option selected value="0">Collection 0</option>
+                        <option value="1">Collection 1</option>
+                        <option value="2">Collection 2</option>
+                        <option value="3">Collection 3</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="txtright">
+                    <button class="btn btn-default btn-sell" type="submit">Add file</button>
+                  </div>
+                </form>
+
+                <div class="titre"><i class="fas fa-spinner fa-left c-green refresh"></i>Minting NFT</div>
+                <div class="media media-photo"><img src="https://picsum.photos/130" /></div>
+                <ul class="steps process">
+                  <li class="complete">
+                    <div class="flex"><span class="label">Image ipfs cid</span></div>
+                    <div class="flex"><a class="link" href="" target="_blank">bakrefile…tghekjele</a></div>
+                  </li>
+                  <li class="complete">
+                    <div class="flex"><span class="label">Metadata ipfs cid</span></div>
+                    <div class="flex"><a class="link" href="" target="_blank">bakrefile…tghekjele</a></div>
+                  </li>
+                  <li class="complete">
+                    <div class="flex"><span class="label">Transaction</span></div>
+                    <div class="flex"><a class="link" href="" target="_blank">0x2435…4536</a></div>
+                  </li>
+                  <li>
+                    <div class="flex"><span class="label">Token ID</span></div>
+                    <div class="flex"><span class="t-light">It may take one minute more</span><i class="fas fa-spinner fa-right c-green refresh"></i></div>
+                  </li>
+                  <li>
+                    <div class="flex"><span class="label">NFT</span></div>
+                    <div class="flex"><span class="t-light">It may take one minute more</span><i class="fas fa-spinner fa-right c-green refresh"></i></div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Modal add collection -->
+        <div id="add-collection" class="modal-window">
+          <div>
+            <div class="modal-content">
+              <a href="#" title="Close" class="modal-close"><i class="fa fa-times"></i></a>
+
+              <div class="modal-body">
+                <div class="titre"><i class="fas fa-plus fa-left c-green"></i>Name your collection</div>
+
+                <form method="POST" action="" enctype="multipart/form-data">
+                  <div class="section">
+                    <div class="form-field">
+                      <input type="text" id="collection" name="collection" placeholder="My collection" />
+                    </div>
+                  </div>
+
+                  <div class="txtright">
+                    <button class="btn btn-default btn-sell" type="submit">Create</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script type="text/javascript" src="./assets/js/front.js"></script>
+  </body>
+</html>